Question

我在Firefox中收到以下错误（Chrome / Edge / Safari中没有问题）：

MediaStreamError { name: "AbortError", message: "Starting video failed", constraint: "", stack: "" }

当抛出此错误时，浏览器控制台仅显示<不可用。

我正在使用来自webrtc.github.io的adapter-latest.js，并且代码在我的应用程序内的其他页面上运行良好，但在特定页面上却运行不佳。是否有可能发现什么会干扰getUserMedia？我已经准备尝试注释掉所有其他库和包含库。

我的代码是：

       var video = document.getElementById('recorder');
       video.onloadedmetadata = function(e) {
           $("#takePicture").show();

           if($("#customerImage").attr("src") == ""){
               $("#recorder").show();
           }
       };
       navigator.mediaDevices.getUserMedia({ video: true})
           .then(stream => {
               video.srcObject = stream;
           })
           .catch(e => console.log(e));

Answer 1

您真的确定需要适配器吗？以我的经验，它带来的问题多于解决的问题。

您可以尝试使用约束吗？

示例（我删除了一些内容，但是在这里它就像一个符咒一样工作）：

 constraints = {
    width: 1280,
    height: 720,
    frameRate: 10, //mobile
    facingMode: {
        exact: "environment"
    } //mobile
}



navigator.mediaDevices.getUserMedia({
    audio: false,
    video: constraints
}).
then(handleSuccess).catch(handleError);


function handleSuccess(stream) {
    video.src = URL.createObjectURL(stream);
    video.play();
}

function handleError(error) {
    console.log('navigator.getUserMedia error: ', error);
}

Answer 2

我遇到了这个问题，因为我让Chrome浏览器也运行了相同的应用程序并使用了网络摄像头。因此，基本上，网络摄像头已经在使用中，我也正尝试通过Firefox访问它。

Firefox-mediaDevices.getUserMedia引发AbortError

2 个答案: