问题描述
- 当电脑连接有多个摄像头,如果在一个web页面中要同时嵌入显示,该如何实现?
解决方案
- javascript中有关于媒体的函数 navigator.mediaDevices.enumerateDevices(),使用该函数可以遍历所有连接的可用设备。根据设备名称自行选择,然后将获取的设备在前端页面显示。
- 下面通过代码具体解释:
// 获取页面视频元素
// var videoElement = new Array(2)
var videoElement = document.getElementById('video');
var videoElement1 = document.getElementById('video1');
navigator.mediaDevices.enumerateDevices()
.then(gotDevices).catch(handleError);
// 遍历所有的设备,包括视频和音频设备。 找出 RGB相机设备
function gotDevices(deviceInfos) {
var constraints = new Array(2);
var id = 0;
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
if (deviceInfo.kind === 'videoinput') {
if (deviceInfo.label.search("RGB") !== -1){
constraints[id] = {
video: {
deviceId: deviceInfo.deviceId
}
};
id = id +1;
}
}
}
if (window.stream) {
window.stream.getTracks().forEach(function(track) {
track.stop();
});
}
navigator.mediaDevices.getUserMedia(constraints[0]).
then(gotStream).catch(handleError);
navigator.mediaDevices.getUserMedia(constraints[1]).
then(gotStream1).catch(handleError);
}
function gotStream(stream ) {
window.stream = stream; // make stream available to console
videoElement.srcObject = stream;
// 使用 tracking.js 在图像上框选出人脸
var canvas = document.getElementById('canvas');
drawBox(canvas,videoElement);
}
function gotStream1(stream ) {
window.stream = stream; // make stream available to console
videoElement1.srcObject = stream;
// 相机2
var canvas1 = document.getElementById('canvas1');
drawBox(canvas1,videoElement1);
}
function handleError(error) {
console.log('Error: ', error);
}
function drawBox(canvas, videoElement) {
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(2);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
context.strokeStyle = '#eb1717';
context.lineWidth = 2;
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
});
});
tracking.track(videoElement, tracker);
}
结果
- 完美实现左右摄像头的显示问题
注:有偿提供开发技术指导,提供源代码。扫码,码上解决您的问题。