解决web页面嵌入多摄像头显示问题

问题描述

• 当电脑连接有多个摄像头，如果在一个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);
    }
  

结果

• 完美实现左右摄像头的显示问题

注：有偿提供开发技术指导，提供源代码。扫码，码上解决您的问题。