DOMException：无法在 Javascript 网络摄像头录像机中启动视频源

Question

我正在 Javascript 和 WebRTC 中开发网络摄像头录像机。但是当我点击“开始录制”按钮时。我收到此错误：

Cannot access media devices:  DOMException: Could not start video source
(anonymous) @ scripts.js:43
Promise.catch (async)
(anonymous) @ scripts.js:42

我的代码如下：

HTML :

<button id="btn-start-recording">Start Recording</button> <!-- OnClick it will run Javascript -->
<hr>
<video id="my-preview" controls autoplay></video>
<script src="./scripts.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript :

// When the user clicks on start video recording
    document.getElementById('btn-start-recording').addEventListener("click", function(){
        // Disable start recording button
        this.disabled = true;

        // Request access to the media devices
        navigator.mediaDevices.getUserMedia({
            audio: true, 
            video: true
        }).then(function(stream) {
            // Display a live preview on the video element of the page
            setSrcObject(stream, video);

            // Start to display the preview on the video element
            // and mute the video to disable the echo issue !
            video.play();
            video.muted = true;

            // Initialize the recorder
            recorder = new RecordRTCPromisesHandler(stream, {
                mimeType: 'video/webm',
                bitsPerSecond: 128000
            });

            // Start recording the video
            recorder.startRecording().then(function() {
                console.info('Recording video ...');
            }).catch(function(error) {
                console.error('Cannot start video recording: ', error);
            });

            // release stream on stopRecording
            recorder.stream = stream;

            // Enable stop recording button
            document.getElementById('btn-stop-recording').disabled = false;
        }).catch(function(error) {
            console.error("Cannot access media devices: ", error); // This is line 43.
        });
    }, false);

我还根据提示授予了对浏览器麦克风和摄像头的访问权限，并在 Windows 10 个设置中启用了它。

我也在通过 Visual Studio 代码的扩展在实时服务器上工作。我尝试运行本地文件，但也没有用。

我正在开发 Windows 10 - Microsoft Edge Chromium 90。

我试过 Google Chrome 90 但还是不行。

但是当我在 Firefox 中尝试时，我得到了 DOMException: Failed to allocate videosource

Answer 1

getUserMedia 在浏览器中要求页面通过 HTTPS（也称为 TLS，通常是端口 443，并且浏览器在地址栏中有一个有效的小锁）。

如果您使用通过 http 服务 HTML 页面的网络服务器（纯文本、端口 80、标记为不安全的页面、and/or 地址栏中没有锁定），请求到 getUserMedia 将失败。

来源：我https://webrtchacks.com/chrome-secure-origin-https/

编辑

另一个可能的解释是另一个进程正在同时使用摄像机。您是否已确认您的网络摄像头未被其他应用程序使用？考虑完全杀死最近使用过您的相机的所有应用程序或浏览器，以尝试释放任何进程锁。

DOMException：无法在 Javascript 网络摄像头录像机中启动视频源

DOMException: Could not start video source in Javascript webcam recorder

javascript

webrtc

编辑