在我创建帐户时,我有一个相机按钮,点击它时会显示一个模态,里面有一个视频流和一个拍照按钮,一切正常我只是在努力解决如何停止网络摄像头流当用户单击模式上的 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 = "";
};
当我在控制台上运行我的代码时,我收到了这个错误:
未捕获的类型错误:无法在“HTMLMediaElement”上设置“srcObject”属性:提供的值不是“MediaStream”类型。