|
|
@ -53,6 +53,7 @@ import { |
|
|
getUser, //获取user信息 |
|
|
getUser, //获取user信息 |
|
|
} from "@/api/student"; |
|
|
} from "@/api/student"; |
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
|
|
import io from 'socket.io-client'; |
|
|
export default { |
|
|
export default { |
|
|
name: "student", |
|
|
name: "student", |
|
|
components: {}, |
|
|
components: {}, |
|
|
@ -119,8 +120,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
userData: {}, |
|
|
userData: {}, |
|
|
ws: null, |
|
|
socket: null, |
|
|
videoStream: null, |
|
|
|
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
watch: {}, |
|
|
watch: {}, |
|
|
@ -138,21 +138,17 @@ export default { |
|
|
this.userData = res.list[0] |
|
|
this.userData = res.list[0] |
|
|
}, |
|
|
}, |
|
|
async initWebSocket() { |
|
|
async initWebSocket() { |
|
|
this.ws = new WebSocket('ws://127.0.0.1:5000/ws/video'); |
|
|
this.socket = io('http://localhost:5000/ws/video', { query: { id: this.userId, isAdmin: "0" } }); // 替换为你的后端服务器地址 |
|
|
this.ws.binaryType = 'arraybuffer'; |
|
|
this.socket.on('connect', () => { |
|
|
this.ws.onopen = () => { |
|
|
console.log('Connected to server'); |
|
|
console.log(1, 'WebSocket connected'); |
|
|
}); |
|
|
}; |
|
|
this.socket.on('message', (data) => { |
|
|
this.ws.onerror = (err) => { |
|
|
console.log(78454, data) |
|
|
console.error(2, 'WebSocket error:', err); |
|
|
}); |
|
|
}; |
|
|
|
|
|
this.ws.onclose = () => { |
|
|
|
|
|
console.log(3, 'WebSocket disconnected'); |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
}, |
|
|
async connectTeacher() { |
|
|
async connectTeacher() { |
|
|
console.log(78744, this.socketMsg) |
|
|
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() { |
|
|
async startExam() { |
|
|
try { |
|
|
try { |
|
|
@ -185,14 +181,21 @@ export default { |
|
|
let video = this.$refs['videoEL']; |
|
|
let video = this.$refs['videoEL']; |
|
|
let canvas = document.createElement('canvas'); |
|
|
let canvas = document.createElement('canvas'); |
|
|
let ctx = canvas.getContext('2d'); |
|
|
let ctx = canvas.getContext('2d'); |
|
|
canvas.width = video.videoWidth; |
|
|
canvas.width = video.offsetWidth; |
|
|
canvas.height = video.videoHeight; |
|
|
canvas.height = video.offsetHeight; |
|
|
let sendFrame = () => { |
|
|
let sendFrame = () => { |
|
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
|
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height); |
|
|
canvas.toBlob((blob) => { |
|
|
canvas.toBlob((blob) => { |
|
|
let arrayBufferView = new Uint8Array(blob); |
|
|
let reader = new FileReader(); |
|
|
that.ws.send(arrayBufferView.buffer); |
|
|
reader.onloadend = () => { |
|
|
}, 'image/jpeg'); |
|
|
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 |
|
|
setInterval(sendFrame, 1000 / 30); // 30 FPS |
|
|
}, |
|
|
}, |
|
|
@ -202,8 +205,8 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
closeWebSocket() { |
|
|
closeWebSocket() { |
|
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) { |
|
|
if (this.socket && this.socket.connected) { |
|
|
this.ws.close(); |
|
|
this.socket.disconnect(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
