个人中心
gpt4 book ai didi

javascript - Chrome 扩展 - navigator.mediaDevices.getUserMedia() 失败，出现 NotAllowedError : Failed due to shutdown

转载 作者：行者123 更新时间：2023-12-05 05:05:00 27 4
gpt4 key购买 nike

我正在尝试开发一个 Chrome 扩展来访问网络摄像头并录制视频，并在停止后下载它。

扩展失败，调用以下代码行时出错:

navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(handleSuccess).catch(function (err) {alert(err)});".

错误是:

 NotAllowedError: Failed due to shutdown

我在 Mac 上使用 Chrome 版本 80.0.3987.132(正式版)(64 位)。

我在这里做错了什么？我们不能通过扩展程序访问设备网络摄像头吗？有什么指点吗？

示例代码如下:

list .json

{
  "manifest_version": 2,
  "name": "Video Capture",
  "version": "0.1",
  "browser_action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
   }
}

弹出窗口

<html>
  <head>
    <title>Video Capture</title>
    <script src="videoCapture.js"></script>
  </head>
  <body>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <a id="download">Download</a>
  </body>
</html>

videoCapture.js

var shouldStop = false;
window.addEventListener('load', function showPopup() {
    alert("Extension started");
    startButton = document.getElementById('start');
    stopButton = document.getElementById('stop');
    downloadLink = document.getElementById('download');
    shouldStop = false;
    startButton.addEventListener('click', function() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
            alert("This browser does not support the API yet");
        }
        alert("Media Devices Available..Starts recording.");

        var handleSuccess = function(stream) {
            alert("handling recording");
            const options = {mimeType: 'video/mp4'};
            const recordedChunks = [];
            const mediaRecorder = new MediaRecorder(stream);

            mediaRecorder.start(5000); //capture video for 5 seconds

            mediaRecorder.ondataavailable = function(e) {
                if (e.data.size > 0) {
                    recordedChunks.push(e.data);
                }
                if(shouldStop === true && stopped === false) {
                    mediaRecorder.stop();
                    stopped = true;
                    stream.getTracks().forEach(function(track) {
                        track.stop();
                    });
                }
            };

            mediaRecorder.onstop = function() {
                downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
                var currentTimestamp = Date.now();
                downloadLink.download = 'recording-'+currentTimestamp+'.mp4';
                alert("Click Download Link to download captured video");
            };
        };

        navigator.mediaDevices.getUserMedia({ audio: false, video: true })
            .then(handleSuccess).catch(function (err) {alert(err)});
    });

    stopButton.addEventListener('click', function() {
        shouldStop = true;
        alert("stopped");
    });    

});

最佳答案

链接到这个问题作为可能的解决方案(getUserMedia 需要在网站选项卡中运行，而不是从弹出窗口或后台脚本运行):https://stackoverflow.com/a/51009577/4136722

关于javascript - Chrome 扩展 - navigator.mediaDevices.getUserMedia() 失败，出现 NotAllowedError : Failed due to shutdown，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60776528/

27 4 0
文章推荐： python-3.x - 可安装 python 模块的最小示例
文章推荐： amazon-web-services - 如何通过 aws web 控制台在 aws lambda 中添加描述
文章推荐： python-3.x - 分组重复项，允许 NaN 等于任何值
文章推荐： postgresql - Snowflake 数据类型等效于 Postgres jsonb 数据类型
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com