diff --git a/api/main.py b/api/main.py index f50ad25..b366019 100644 --- a/api/main.py +++ b/api/main.py @@ -15,43 +15,38 @@ collection = db["users"] app.config["SECRET_KEY"] = "secret!" socketio = SocketIO(app, cors_allowed_origins="*") # 存储连接的客户端的房间号 -clients = {} +clients = [] +adminSid = "" @socketio.on("connect", namespace="/ws/video") def on_connect(): - print("Client connected") + global clients + global adminSid + sid = request.sid + # 假设客户端在连接时发送了一个 id + id = request.args.get("id") + isAdmin = request.args.get("isAdmin") + if isAdmin == "1": + adminSid = sid + print(87874, adminSid) + clients.append({"id": id, "sid": sid, "isAdmin": isAdmin}) @socketio.on("disconnect", namespace="/ws/video") def on_disconnect(): - print("Client disconnected") - # 移除客户端的房间关联 - room = clients.pop(request.sid, None) - if room: - leave_room(room) + global clients + for item in clients: + if item["id"] == request.sid: + clients.remove(item) + print(f"Client disconnected with id {item['id']}") -@socketio.on("join", namespace="/ws/video") -def on_join(data): - room = data["room"] - join_room(room) - clients[request.sid] = room - - -@socketio.on("leave", namespace="/ws/video") -def on_leave(data): - room = data["room"] - leave_room(room) - clients.pop(request.sid, None) - - -@socketio.on("message", namespace="/ws/video") +@socketio.on("video", namespace="/ws/video") def handle_video_frame(message): - # 广播视频帧给房间内的所有客户端，除了发送该帧的客户端 - room = clients.get(request.sid) - if room: - emit("message", message, room=room, include_self=False) + # 广播视频帧给老师 + global adminSid + socketio.emit("teacherVideo", message, room=adminSid) # md5加密 @@ -139,7 +134,6 @@ def insert_data(): admin = isAdmin(userJson["id"]) if admin: _id = ObjectId() - print(77337, str(_id)) userItem = { "_id": _id, "xuexiaomingcheng": userJson["xuexiaomingcheng"], @@ -180,7 +174,6 @@ def query_data(): # 获取到POST过来的数据，转为json形式 userJson = json.loads(resData) admin = isAdmin(userJson["id"]) - print(777, userJson, admin) if admin: users = collection.find() serialized_data = [] @@ -269,7 +262,6 @@ def updatePassword(): # 获取到POST过来的数据，转为json形式 userJson = json.loads(resData) admin = isAdmin(userJson["id"]) - print(777, userJson, admin) if admin: collection.update_one( {"_id": ObjectId(userJson["userid"])}, diff --git a/front/src/views/home.vue b/front/src/views/home.vue index 164884d..4b18958 100644 --- a/front/src/views/home.vue +++ b/front/src/views/home.vue @@ -36,11 +36,20 @@ export default { userName: "", }; }, + watch: { + "$router": { + handler(nev, olv) { + console.log(895, nev, olv) + }, + deep: true + } + }, async mounted() { await this.init(); }, methods: { async init() { + console.log(895, this.$route) if (!localStorage.getItem("userId")) { this.$router.push("/login"); } @@ -60,7 +69,6 @@ export default { this.$router.push(route); }, }, - watch: {}, computed: {}, }; diff --git a/front/src/views/login.vue b/front/src/views/login.vue index e96f375..9c8a72d 100644 --- a/front/src/views/login.vue +++ b/front/src/views/login.vue @@ -45,9 +45,7 @@ export default { }, watch: {}, computed: {}, - async mounted() { - await this.init(); - }, + async mounted() { }, beforeUnmount() { }, methods: { diff --git a/front/src/views/student.vue b/front/src/views/student.vue index 69f6c63..6062af2 100644 --- a/front/src/views/student.vue +++ b/front/src/views/student.vue @@ -53,6 +53,7 @@ import { getUser, //获取user信息 } from "@/api/student"; import { ElMessage, ElMessageBox } from 'element-plus' +import io from 'socket.io-client'; export default { name: "student", components: {}, @@ -119,8 +120,7 @@ export default { }, ], userData: {}, - ws: null, - videoStream: null, + socket: null, }; }, watch: {}, @@ -138,21 +138,17 @@ export default { this.userData = res.list[0] }, async initWebSocket() { - this.ws = new WebSocket('ws://127.0.0.1:5000/ws/video'); - this.ws.binaryType = 'arraybuffer'; - this.ws.onopen = () => { - console.log(1, 'WebSocket connected'); - }; - this.ws.onerror = (err) => { - console.error(2, 'WebSocket error:', err); - }; - this.ws.onclose = () => { - console.log(3, 'WebSocket disconnected'); - }; + this.socket = io('http://localhost:5000/ws/video', { query: { id: this.userId, isAdmin: "0" } }); // 替换为你的后端服务器地址 + this.socket.on('connect', () => { + console.log('Connected to server'); + }); + this.socket.on('message', (data) => { + console.log(78454, data) + }); }, async connectTeacher() { console.log(78744, this.socketMsg) - this.socketMsg.emit('sendMsg', { sid: this.socketMsg.id, id: this.userId, msg: "我有问题" }); + this.socket.emit('sendMsg', { sid: this.socketMsg.id, id: this.userId, msg: "我有问题" }); }, async startExam() { try { @@ -185,14 +181,21 @@ export default { let video = this.$refs['videoEL']; let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); - canvas.width = video.videoWidth; - canvas.height = video.videoHeight; + canvas.width = video.offsetWidth; + canvas.height = video.offsetHeight; let sendFrame = () => { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => { - let arrayBufferView = new Uint8Array(blob); - that.ws.send(arrayBufferView.buffer); - }, 'image/jpeg'); + let reader = new FileReader(); + reader.onloadend = () => { + let arrayBuffer = reader.result; + that.socket.emit('video', arrayBuffer,); + }; + reader.readAsArrayBuffer(blob); + // let arrayBufferView = new Uint8Array(blob); + // console.log(89444, video) + // that.socket.emit('video', arrayBufferView.buffer); + }, 'image/png'); }; setInterval(sendFrame, 1000 / 30); // 30 FPS }, @@ -202,8 +205,8 @@ export default { } }, closeWebSocket() { - if (this.ws && this.ws.readyState === WebSocket.OPEN) { - this.ws.close(); + if (this.socket && this.socket.connected) { + this.socket.disconnect(); } }, }, diff --git a/front/src/views/teacher.vue b/front/src/views/teacher.vue index 86816c4..61885d7 100644 --- a/front/src/views/teacher.vue +++ b/front/src/views/teacher.vue @@ -202,9 +202,8 @@ export default { formHeader: [], formHeaderLocal: [], formDisabled: false, - ws: null, + socket: null, videoStream: null, - room: 'defaultRoom', // 房间名 }; }, watch: {}, @@ -352,21 +351,16 @@ export default { }, // 初始化实时传输信息 async initWebSocket() { - this.ws = new WebSocket(`ws://127.0.0.1:5000/ws/video`); - console.log(787844, this.ws) - this.ws.binaryType = 'arraybuffer'; - this.ws.onopen = () => { - console.log(4, 'WebSocket connected'); - this.ws.send(JSON.stringify({ type: 'join', room: this.room })); - }; - this.ws.onerror = (err) => { - console.error(5, 'WebSocket error:', err); - }; - this.ws.onclose = () => { - console.log(6, 'WebSocket disconnected'); - }; - this.ws.onmessage = (event) => { + this.socket = io('http://localhost:5000/ws/video', + { query: { id: localStorage.getItem('userId'), isAdmin: "1" } } + ); // 替换为你的后端服务器地址 + this.socket.on('connect', () => { + console.log('Connected to server'); + console.log(879784, this.socket.id) + }); + this.socket.on('teacherVideo', (data) => { // 在这里处理接收到的视频帧 + const arrayBuffer = event.data; const blob = new Blob([arrayBuffer], { type: 'image/jpeg' }); const urlCreator = window.URL || window.webkitURL; @@ -379,7 +373,7 @@ export default { this.$refs.videoEL1.srcObject = null; // 清空当前流 this.$refs.videoEL1.src = imageUrl; // 设置新图像作为视频源 this.$refs.videoEL1.play(); - }; + }); }, stopVideoStream() { if (this.videoStream) { @@ -387,8 +381,8 @@ export default { } }, closeWebSocket() { - if (this.ws && this.ws.readyState === WebSocket.OPEN) { - this.ws.close(); + if (this.socket && this.socket.connected) { + this.socket.disconnect(); } }, }, @@ -403,6 +397,6 @@ export default { position: relative; width: 390px; height: 390px; - background-color: blueviolet + background-color: aliceblue }