getUserMedia 不适用于新浏览器

Question

我正在使用 HTML 媒体捕获和 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");
}

Answer 1

It is not working with Chrome

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

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

Answer 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");
}

Answer 3

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

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

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

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

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

Answer 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))

问候，尼科尔斯 :)

getUserMedia 不适用于新浏览器

getUserMedia not working on new browsers

html

javascript

internet-explorer

google-chrome

microsoft-edge