javascript - 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

Chrome 无法识别标准的 navigator.getUserMedia。它适用于 Microsoft Edge。您将需要添加 vendor 前缀。对于 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");
}