getUserMedia 在 Chrome v50.0.2661.86 上不起作用答案

【问题标题】：getUserMedia not working on Chrome v50.0.2661.86getUserMedia 在 Chrome v50.0.2661.86 上不起作用
【发布时间】：2016-04-26 22:42:43
【问题描述】：

我正在尝试使用 getUserMedia 方法访问我的网络摄像头并使用 clmtrackr (https://github.com/auduno/clmtrackr) 跟踪我的面部。几周前它可以工作，但自从 Chrome 更新到 v50 后我遇到了问题，它使用替换视频而不是调用我的网络摄像头。

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

// check for camerasupport
if (navigator.getUserMedia) {

    var videoSelector = {video : true};
    if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
        var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
        if (chromeVersion < 20) {
            videoSelector = "video";
        }
    };

    navigator.getUserMedia(videoSelector, function( stream ) {
        if (video.mozCaptureStream) {
            video.mozSrcObject = stream;
        } else {
            video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        }

        video.play();
    }, function() {
        //it uses this alt video
        insertAltVideo(video);
        alert("There was some problem trying to fetch video from your webcam, using a fallback video instead.");
    });
} else {
    insertAltVideo(video);
    alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}

PS : 它在 Firefox 上可以正常工作

提前致谢

【问题讨论】：

标签： javascript google-chrome html5-video webcam getusermedia

【解决方案1】：

navigator.getUserMedia 不再在 Chrome 中工作（它返回undefined），使用更新的MediaDevices 接口：

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
      console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
  })
  .catch(function(error) {
    // ...
  }

查看更多：

【讨论】：