简体   繁体   中英

Turn off camera after photo

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');
            }
        });
      });       
    };
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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM