Javascript 使用HTML/JS代码允许用户使用网络摄像头录制视频时出错
这是我在索引页面中使用的代码。我想让用户使用他们的网络摄像头录制视频。当我运行应用程序时,我看到的只是录像机应该在哪里的空间和停止按钮。当我“检查震源”并将光标悬停在记录器应该位于的区域时,它会变得更亮,这意味着它是它们的,我就是看不见它。此外,所示的inspect源代码中显示了一个错误,代码如下所示。Javascript 使用HTML/JS代码允许用户使用网络摄像头录制视频时出错,javascript,html,video,Javascript,Html,Video,这是我在索引页面中使用的代码。我想让用户使用他们的网络摄像头录制视频。当我运行应用程序时,我看到的只是录像机应该在哪里的空间和停止按钮。当我“检查震源”并将光标悬停在记录器应该位于的区域时,它会变得更亮,这意味着它是它们的,我就是看不见它。此外,所示的inspect源代码中显示了一个错误,代码如下所示。 window.URL=window.URL | | window.webkitURL; navigator.getUserMedia= navigator.getUserMedia|| na
window.URL=window.URL | | window.webkitURL;
navigator.getUserMedia=
navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia;
var video=document.querySelector('video');
var cameraStream='';
if(navigator.getUserMedia){
navigator.getUserMedia(
{音频:正确,视频:正确}
功能(流)
{
cameraStream=溪流;
video.src=window.URL.createObjectURL(流);
}
函数()
{
书面文件(“问题”)
}
);
}
其他的
{
书面文件(“不支持”);
}
document.querySelector(“#stopbt”).addEventListener(
“点击”,
职能(e)
{
video.src=“”;
cameraStream.stop();
});
您需要一个,
在}
和{
之间(在第64行和第65行之间)
对不起,不是分号
尝试刷新,因为屏幕截图有一个错误,但它的代码与问题中的代码不同。问题中的代码应该可以工作,因为用户友好的错误描述是正确的错误,可以显示代码的内容。在第64行的对象之后和问题中的第一个回调函数之后需要一个逗号参数列表。还请注意,
navigator.getUserMedia
API不推荐使用,您应该使用一个,并使用URL.createObjectURL(mediaStream)
是一个非常糟糕的主意,而且当你似乎不撤销这个blobURI时:它会使你的硬件停留在活动
模式。取而代之的是,使用videoElement.srcObject=mediaStream
@WillReese非常感谢。@Kaido你好!感谢你的反馈。因为我从一个教程中复制了这段代码,所以我不能完全确定你所说的t是什么意思回答的第二部分。我将用navigator.mediaDevices.getUserMedia替换navigator.getUserMedia,但请您能再解释一下下一部分吗?非常感谢!您目前正在做video.src=URL.createObjectURL(stream)
。这是一种不好的做法,而且正在被弃用。当您这样做时,浏览器将创建对硬件(摄像头或麦克风)的内存访问,在硬刷新页面或关闭浏览器之前不会发布。正确的方法是使用视频元素的srcObject
属性,该属性将在不锁定硬件的情况下接受媒体流:video.srcObject=stream
;谢谢。我更改了它。我现在正在使用它。
<script type="text/javascript">
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var cameraStream = '';
if (navigator.getUserMedia) {
navigator.getUserMedia(
{audio: true, video: true}
function(stream)
{
cameraStream = Stream;
video.src = window.URL.createObjectURL(stream);
}
function()
{
document.writeln("problem")
}
);
}
else
{
document.writeln("not support");
}
document.querySelector('#stopbt').addEventListener(
'click',
function(e)
{
video.src="";
cameraStream.stop();
});
</script>