在创建帐户时,我有一个摄像头按钮,单击该按钮会在其中显示一个模态,其中包含一个视频流和一个用于拍照的按钮,一切正常,我只是在努力地停下来当用户单击模式上的x按钮时,网络摄像头流就会消失,但是当我单击x按钮时,它仍然处于打开状态。希望您能帮助解决它,谢谢。
这是网络摄像头的代码:-
<a class="btn-floatingbtn-lg" data-toggle="modal" data-target="#webcam" onClick="startWebcam();"><i class="fa fa-camera fa-2x"></i></a>
<div class="modal fade" id="webcam" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog cascading-modal" role="document">
<div class="modal-content">
<div class="modal-header light-blue darken-3 white-text ">
<h4 class="title "><i class="fa fa-camera"></i> WebCam</h4>
<a type="btn" onclick="vidOff()" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></a>
</div>
<div class="modal-body mb-1">
<div class="booth">
<video id="video" width="270" height="200" ></video>
<a href="#" id="capture" class="btn btn-primary" style="display:block; margin: 10px 0;padding:10px 20px; text-align:center;text-decoration:none;">
Take photo</a>
</div>
</div>
</div>
</div>
</div>
</div>
这是我用于网络摄像头的javaScript:-
function startWebcam(){
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
photo = document.getElementById('photo'),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function(stream){
video.srcObject = stream;
video.play();
}, function(error){
// An error occured
// error.code
});
document.getElementById('capture').addEventListener('click',function(){
context.drawImage(video, 0, 0, 270, 200);
photo.setAttribute('src', canvas.toDataURL('image/png'));
});
};
function vidOff() {
video.pause();
video.srcObject = "";
};
当我在控制台上运行代码时,出现此错误:
未捕获的TypeError:无法在'HTMLMediaElement'上设置'srcObject'属性:提供的值不是'MediaStream'类型的。
答案 0 :(得分:0)
您没有选择视频元素来停止视频流:
function vidOff() {
var video = document.getElementById('video');
video.pause();
video.srcObject = "";
};
答案 1 :(得分:0)
我有issue long time前,但有youtube视频,我有solved,只是在关闭模态时删除了iframe。
我知道这不是一个完美的解决方案,如果您找到停止播放的视频功能会更好,但是您可以尝试删除视频元素并将其添加回关闭状态,然后打开模式弹出窗口 https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript
答案 2 :(得分:0)
由于stream
不能通过promise在回调函数中异步返回,因此不能在函数范围之外调用,因此最好在回调函数中定义和分配click事件函数