javascript - 在 getUserMedia 中使用 sourceId 指定网络摄像头

Question

我有两个网络摄像头，正在尝试指定在我的视频标签中显示哪一个。我的 HTML 很简单 <video autoplay></video> 。这是我的 JavaScript:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {
    video: {
        optional: [{
            sourceId: "64-character-alphanumeric-source-id-here"
        }]
    }
};
var video = document.querySelector("video");

function successCallback(stream) {
    window.stream = stream; // stream available to console
    if (window.URL) {
        video.src = window.URL.createObjectURL(stream);
    } else {
        video.src = stream;
    }
    video.play();
}

function errorCallback(error) {
    console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

但是，即使我将 sourceId 更改为第二个网络摄像头，我也无法让它显示该网络摄像头。 js.fiddle code

Answer 1

此代码在移动 Chrome 中适用于我:它尝试检测背面视频流。

MediaStreamTrack.getSources(function(sourceInfos) {
              var videoSourceId;
              for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                if(sourceInfo.kind == "video" && sourceInfo.facing == "environment") {
                  videoSourceId = sourceInfo.id;
                }
              }
              var constraints = {
                audio: false,
                video: {
                  optional: [{sourceId: videoSourceId}]
                }
              };
            ....
});

请注意，此代码中没有后备