getUserMedia 无法在新浏览器上运行答案

【问题标题】：getUserMedia not working on new browsersgetUserMedia 无法在新浏览器上运行
【发布时间】：2016-03-03 08:00:18
【问题描述】：

我正在使用 HTML Media Capture 和 getUserMedia 方法。它无法与 Chrome 一起使用，并且我收到了失败时包含的警报。

这是我使用的示例代码：

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        // constraints
        {
            video: true,
            audio: true
        },
        // successCallback
        function (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            // Do something with the video
            video.play();
        },
        // errorCallback
        function (err) {
            console.log("The following error occured: " + err);
        }
    );
} else {
    alert("getUserMedia not supported by your web browser or Operating system version");
}

【问题讨论】：

对于正确的 HTML 媒体捕获语法（有几个修订），请参阅 addpipe.com/blog/correct-syntax-html-media-capture
使用最新版本... navigator.getUserMedia() 现在替换为 navigator.mediaDevices.getUserMedia webrtc.github.io/samples

标签： javascript html google-chrome internet-explorer microsoft-edge

【解决方案1】：

它不适用于 Chrome

尝试使用 webkit ， moz 前缀，请参阅 Navigator.getUserMedia()

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia; 
if (navigator.getUserMedia) {
    //do stuff
}

【讨论】：

【解决方案2】：

标准的 navigator.getUserMedia 在 Chrome 上无法识别。它适用于 Microsoft Edge。您将需要添加供应商前缀。对于 Chrome：navigator.webkitGetUserMedia

这是 JSFiddle 上的工作代码 https://jsfiddle.net/RamiSarieddine/t9d3hpyr/

//browser support check "ms" vendor function is for IE8
navigator.getUserMedia = ( navigator.getUserMedia       ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia    ||
                           navigator.msGetUserMedia );

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        // constraints
        {
            video: true,
            audio: true
        },
        // successCallback
        function (localMediaStream) {
            var video = document.querySelector('video');
            video.src = window.URL.createObjectURL(localMediaStream);
            // Do something with the video
            video.play();
        },
        // errorCallback
        function (err) {
            console.log("The following error occured: " + err);
        }
    );
} else {
    alert("getUserMedia not supported by your web browser or Operating system version");
}

【讨论】：

FIREFOX 现在是问题，因为您在小提琴和我的所有应用程序 LOL “navigator.mozGetUserMedia 已被 navigator.mediaDevices.getUserMedia 替换发生以下错误：NotReadableError：无法分配视频源”
@Rami Sarieddine 上述 URL 在 Firefox 中不起作用，请检查。

【解决方案3】：

navigator.getUserMedia 已被navigator.mediaDevices.getUserMedia 取代。

后者使用现代 Promise，并且在 Edge、Firefox 和 Chrome 中原生可用。还有adapter.js，官方的WebRTC polyfill，可以帮助他们赶上标准（例如srcObject）。

这是一个适用于所有三个的小提琴：https://jsfiddle.net/srn9db4h/

var constraints = { video: true, audio: true };

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

【讨论】：

使用最新版本的 Chrome 和 FF 都损坏了小提琴... NotFoundError: The object can not be found here.
@ScottStensland 该错误通常意味着在您的系统上找不到摄像头或麦克风。小提琴对我来说仍然可以正常工作。

【解决方案4】：

这个小小的验证呢？

async getMediaStream(constraints): Promise<MediaStream> {
  return new Promise(function (resolve, reject) {
    if (navigator.mediaDevices
      && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => resolve(stream))
        .catch(err => reject(err));
    } else {
      const getUserMedia = navigator.getUserMedia
      || navigator['webkitGetUserMedia']
      || navigator['mozGetUserMedia']
      || navigator['msGetUserMedia'];
      getUserMedia(
        constraints,
        (stream) => resolve(stream),
        (err) => reject(err)
      );
    }
  });
}

const isEdge = navigator.userAgent.indexOf('Edge') !== -1
  && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob);

getMediaStream({
  audio: isEdge ? true : {
    echoCancellation: false
  }
})
.then(stream => console.log(stream))
.catch(err => console.error(err))

问候，尼科尔斯 :)

【讨论】：