Chrome扩展程序-navigator.mediaDevices.getUserMedia()失败，并出现NotAllowedError:由于关机而失败 [英] Chrome Extensions - navigator.mediaDevices.getUserMedia() failing with NotAllowedError: Failed due to shutdown
问题描述
我正在尝试开发一个Chrome扩展程序来访问网络摄像头并录制视频，并在停止后进行下载.
I am trying to develop a Chrome Extension to access webcam and record a video, and to download it once stopped.
扩展失败，并在调用以下代码行时出错:
Extension fails with an error on invoking the following line of code:
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位).
I am using Chrome Version 80.0.3987.132 (Official Build) (64-bit) on Mac.
我在这里做错了什么?我们不能通过扩展名访问设备网络摄像头吗?有指针吗?
What am I doing wrong here? Can't we access device webcam via an extension? Any pointers?
下面的示例代码:
manifest.json
manifest.json
{
"manifest_version": 2,
"name": "Video Capture",
"version": "0.1",
"browser_action": {
"default_icon": "logo.png",
"default_popup": "popup.html"
}
}
popup.html
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
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
Linking to this question as a possible solution (getUserMedia needed to be run in the website tab NOT from the popup or the background script): https://stackoverflow.com/a/51009577/4136722
这篇关于Chrome扩展程序-navigator.mediaDevices.getUserMedia()失败，并出现NotAllowedError:由于关机而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
