getUserMedia不适用于新的浏览器 [英] getUserMedia not working on new browsers

问题描述

我正在玩弄HTML Media Capture和 getUserMedia 方法。它不适用于Chrome，当出现故障时我收到提醒。

I am playing around with HTML Media Capture and the getUserMedia method. It is not working with Chrome and I get the alert included on failure.

以下是我使用的示例代码：

Here is the sample code I used:

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

推荐答案

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

The standard navigator.getUserMedia is not recognized on Chrome. it works with Microsoft Edge. You will need to add vendor prefixes. for Chrome: navigator.webkitGetUserMedia

以下是JSFiddle
< a href =https://jsfiddle.net/RamiSarieddine/t9d3hpyr/ =nofollow noreferrer> https://jsfiddle.net/RamiSarieddine/t9d3hpyr/

Here is a working code on 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");
}

这篇关于getUserMedia不适用于新的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！