1233

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"])},

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: {},
 };
 </script>

front/src/views/login.vue

@@ -45,9 +45,7 @@ export default {
   },
   watch: {},
   computed: {},
-  async mounted() {
-    await this.init();
-  },
+  async mounted() { },
   beforeUnmount() { },
 
   methods: {

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();
       }
     },
   },

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
 }
 </style>