Turn off camera after photo

Question

I am reverse-engineering a project and am running into some perplexing problems. The project is in Meteor, which I like, but doesn't seem to follow Meteors conventions.

This is essentially a javascript file to allow users to take a selfie using the laptop devices camera. However, after taking the photo, the camera does not turn off.

After having tried a number of suggestions online, I am putting the question: how does one turn off the camera?

Thank you for your help!

    Template.newSelfie.rendered = function(){

      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
          console.log("Video capture error: ", error.code);
        };

      // Put video listeners into place
      if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
          video.src = stream;
          video.play();
        }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
          video.src = window.webkitURL.createObjectURL(stream);
          video.play();
        }, errBack);
      }
      else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
          video.src = window.URL.createObjectURL(stream);
          video.play();
        }, errBack);
      }

      // Converts canvas to an image
      function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image.src;
      }

      $('#take-selfie').click(function() {
        context.drawImage(video, 0, 0, 450, 350);
        var selfieImg = convertCanvasToImage(canvas);

        Posts.insert({
          ownerId: Meteor.userId(),
          userWallId: Meteor.userId(), 
          content: '<img src="'+selfieImg+'">',
          postedOn: new Date()
        }, function(err, res) {
          console.log(err || res);
        });

        Selfies.insert({
          ownerId: Meteor.userId(),
          image: selfieImg,
          postedOn: moment().format('MM/DD/YYYY hh:mm a'),
          createdAt: moment().format('YYYY-MM-DD')
        }, function(err, res) {
            console.log(err || res);
            if(err){
              console.log(err);
            } else {
              Router.go('profileSelfies');
            }
        });
      });       
    };

Does the camera turn off after the newSelfie component thing is removed from the document? It looks like it keeps the webcam stream open forever, so it can grab a frame whenever the button is clicked. Maybe removing `video` from the DOM would do it. (I've never used this API; this is a wild guess.) — Jeremy, Feb 26 '16 at 22:36
It stays open until I reload the page. I imagine this is pretty simple but for some reason it escapes me. I've tried video.stop() and similar, but just haven't grabbed the camera. — Perry Cipolloni, Feb 26 '16 at 22:57
What if you reassign `video.src` to something like the empty string? — Jeremy, Feb 29 '16 at 17:08
This is answered well in this question: http://stackoverflow.com/questions/11642926/stop-close-webcam-which-is-opened-by-navigator-getusermedia — Brian Leathem, Mar 16 '16 at 04:23

score 2 · Answer 1 · answered Oct 19 '21 at 12:38

const video = document.querySelector('video');

// A video's MediaStream object is available through its srcObject attribute
const mediaStream = video.srcObject;

// Through the MediaStream, you can get the MediaStreamTracks with getTracks():
const tracks = mediaStream.getTracks();

// Tracks are returned as an array, so if you know you only have one, you can stop it with: 
tracks[0].stop();

// Or stop all like so:
tracks.forEach(track => track.stop())

https://dev.to/morinoko/stopping-a-webcam-with-javascript-4297

Turn off camera after photo

1 Answers1