在模式上单击 x 时如何停止网络摄像头流答案

【问题标题】：How to stop webcam stream when clicking x on modal在模式上单击 x 时如何停止网络摄像头流
【发布时间】：2023-03-10 19:33:02
【问题描述】：

在我创建帐户时，我有一个相机按钮，点击它时会显示一个模态，里面有一个视频流和一个拍照按钮，一切正常我只是在努力如何停止当用户单击模式上的 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">&times;</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”类型。

【问题讨论】：

Stop/Close webcam which is opened by navigator.getUserMedia的可能重复

标签： javascript jquery webcam.js

【解决方案1】：

您没有选择视频元素来停止视频流：

function vidOff() {
    var video = document.getElementById('video');
    video.pause();
    video.srcObject  = "";
};

【讨论】：

我尝试了您的代码，但是当我单击模式上的关闭按钮时，网络摄像头仍处于开启状态
错误在语句video.srcObject = ""; 更改为video.srcObject = null;
当我删除 data-dismiss"modal" 它的工作，但模态没有关闭
dis 您尝试像我在上一条评论中建议的那样将"" 更改为null 吗？
是的，我将其更改为 null 有时它可以工作，有时它不是

【解决方案2】：

我之前有一个issue long time，但在使用 youtube 视频时，我有一个 solved，只需在关闭模式时删除 iframe。

我知道这不是一个完美的解决方案，如果您找到一个可以停止它的视频功能会更好，但是您可以尝试删除并重新添加视频元素关闭并打开模式弹出窗口 https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

【讨论】：

【解决方案3】：

由于stream通过promise在回调函数中异步返回不能在函数范围外调用，因此最好在回调函数中定义和分配点击事件函数

【讨论】：