现在我的项目是使用electron-vue写的,有一个需求是需要把摄像头画面采集上来,并且需要将每帧画面传递到Python做图像识别,现在视频已经可以采集到了,但就是怎么获取每帧的数据,各位有遇到过或解决过这种问题的,请回复下,谢谢
下面是获取摄像头代码:
/** @desc 获取计算机外设列表 储存摄像头数据 */
getDevices() {
return new Promise((resolve, reject) => {
if (
!navigator.mediaDevices ||
!navigator.mediaDevices.enumerateDevices
) {
window.alert('不支持 mediaDevices.enumerateDevices()');
}
navigator.mediaDevices
.enumerateDevices()
.then((devices) => {
this.cameraList = [];
devices.forEach((device, index) => {
if (device.kind && device.kind === 'videoinput') {
this.cameraList.push({
id: device.deviceId,
label: device.label,
});
}
});
resolve();
})
.catch((err) => {
console.log(err.name + ': ' + err.message);
reject();
});
});
},
main() {
this.cameraList.forEach((camera, index) => {
let domId = `video${index}`;
let video = document.getElementById(domId);
this.enableCamera(camera.id, video,index);
});
},
/** @desc 摄像头使能封装 */
enableCamera(deviceId, video,index) {
this.getUserMedia(
this.setConstraints(deviceId),
(stream) => {
// var videoTracks = stream.getVideoTracks();
// console.log('Using video device: ' + videoTracks[0].label);
// stream.onended = function() {
// console.log('Stream ended');
// };
mediaStreamArray.push(stream)
video.srcObject = stream;
video.onloadedmetadata = (e) => {
video.play();
};
// debugger
// var stream_video = video.captureStream() || video.mozCaptureStream();
// var videoTrack_media = stream_video .getVideoTracks()[0].clone();
// console.log(videoTrack_media)
if(index == 0){
this.bufferDataOne = stream
}else if(index == 1){
this.bufferDataTwo = stream
}else if(index == 2){
this.bufferDataThree = stream
}else if(index == 3){
this.bufferDataFour = stream
}
},
(error) => {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
);
},