0

In my creation of account I have a camera button that when click it will show a modal inside of it has a video stream and have a button to take a photo, Everything is working I'm just struggling on how I can stop the webcam stream when the user click the x button on modal but when I click the x button it's still on. Hope you can help fix it , Advance Thanks.

Here is the code for the webcam:-

<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>

Here is my javaScript I used for webcam:-

 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  = "";

 };

When I run my code on console I got this error:

Uncaught TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type 'MediaStream'.

Bahman Parsa Manesh
  • 2,314
  • 3
  • 16
  • 32
neff
  • 5
  • 7
  • Possible duplicate of [Stop/Close webcam which is opened by navigator.getUserMedia](https://stackoverflow.com/questions/11642926/stop-close-webcam-which-is-opened-by-navigator-getusermedia) – Avi Aug 24 '18 at 11:19

3 Answers3

0

You did not select the video element to stop the video stream:

function vidOff() {
    var video = document.getElementById('video');
    video.pause();
    video.srcObject  = "";
};
  • i tried your code but when i click the close button on modal the webcam is still on – neff Aug 24 '18 at 11:29
  • 1
    the error is in statement `video.srcObject = "";` change it to `video.srcObject = null;` –  Aug 24 '18 at 13:03
  • when i remove the data-dismiss"modal" its working but the modal is not closing – neff Aug 24 '18 at 14:07
  • 1
    dis You try the changing `""` to `null` like I suggested in the previous comment? –  Aug 24 '18 at 14:32
  • yes i change it to null sometimes it's work sometimes it's not – neff Aug 24 '18 at 14:51
0

I had an issue long time ago but with youtube videos, I have solved just by removing the iframe on closing the modal.

I know it is not a perfect solution and better if you find a video function which stop it instead but you can try and remove and add the video element back on close and open the modal popup https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

Amr Elgarhy
  • 66,568
  • 69
  • 184
  • 301
0

As stream returned asynchronously in callback function via promise cannot be called outside function scope, therefore better to define and assign click event function within the callback function

Waleed93
  • 1,130
  • 2
  • 15
  • 24