Как остановить поток веб-камеры при нажатии x на модальном

neff спросил: 31 июля 2018 в 09:36 в: javascript

В моем создании учетной записи у меня есть кнопка камеры, которая, когда щелкнет, покажет, что модальная внутри него имеет видеопоток и имеет кнопку, чтобы сделать снимок, все работает. Я просто борюсь за то, как я могу остановить поток веб-камеры, когда пользователь нажимает кнопку 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  = ""; };

Когда я запускаю свой код на консоли, я получил эту ошибку:

Uncaught TypeError: Не удалось установить свойство 'srcObject' в 'HTMLMediaElement ': Предоставляемое значение не относится к типу "MediaStream".


2 ответа

Есть решение
SpitGlued ответил: 31 июля 2018 в 09:43

Вы не выбрали элемент видео для остановки видеопотока:

function vidOff() {
    var video = document.getElementById('video');
    video.pause();
    video.srcObject  = "";
};
neff ответил: 31 июля 2018 в 09:49
я попробовал ваш код, но когда я нажимаю кнопку закрытия в модальном режиме, веб-камера все еще включена
SpitGlued ответил: 31 июля 2018 в 11:23
ошибка в выражении video.srcObject = "";, измените его на video.srcObject = null;
neff ответил: 31 июля 2018 в 12:27
когда я удаляю "модальные" данные отклонить его работает, но модальное не закрывается
SpitGlued ответил: 31 июля 2018 в 12:52
Вы пытались изменить "" на null, как я предлагал в предыдущем комментарии?
neff ответил: 31 июля 2018 в 01:11
да, я изменяю его на ноль, иногда это работает, иногда это не
Amr Elgarhy ответил: 31 июля 2018 в 10:06

У меня была проблема давным-давно , но с видео на YouTube я решил , просто удалив iframe при закрытии модальный.

Я знаю, что это не идеальное решение, и лучше, если вы найдете функцию видео, которая останавливает его, но вы можете попробовать удалить и добавить элемент видео обратно при закрытии и открыть модальные popuphttps://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript