首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >DOMException:无法启动Javascript网络摄像机录像机中的视频源

DOMException:无法启动Javascript网络摄像机录像机中的视频源
EN

Stack Overflow用户
提问于 2021-05-06 02:27:30
回答 1查看 418关注 0票数 0

我是在Javascript和WebRTC的摄像头录像机工作。但是当我点击“开始录制”按钮时。我得到了这个错误:

代码语言:javascript
运行
复制
Cannot access media devices:  DOMException: Could not start video source
(anonymous) @ scripts.js:43
Promise.catch (async)
(anonymous) @ scripts.js:42

我的代码如下:

HTML:

代码语言:javascript
运行
复制
<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:

代码语言: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 Code上的一个扩展的实时服务器上工作。我尝试在本地运行该文件,但同样不起作用。

我正在使用Windows 10 - Microsoft Edge Chromium 90。

我试过谷歌Chrome90,但也不能工作。

但是当我尝试火狐的时候,我得到了DOMException: Failed to allocate videosource

EN

回答 1

Stack Overflow用户

发布于 2021-05-07 07:21:56

浏览器中的getUserMedia要求页面通过HTTPS提供(也称为TLS,通常是端口443,浏览器在地址栏中有一个有效的小锁)。

如果你使用的是通过http提供HTML页面的网络服务器(纯文本,端口80,标记为不安全的页面,和/或地址栏中没有锁),对getUserMedia的请求将会失败。

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

编辑

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67406854

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档