Skip to content

Instantly share code, notes, and snippets.

@M-Abdullahi
Last active September 15, 2021 15:17
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save M-Abdullahi/6e7637f8b43e7559de2a7ec2ae567a35 to your computer and use it in GitHub Desktop.
This gist allows you to request access to camera/webcam for your vuejs apps
  methods: {
    hasCameraCapability() {
      return !!(window.navigator.mediaDevices && window.navigator.getUserMedia)
    },
    requestCameraAccess(config = {video: true}) {
      return window.navigator.getUserMedia(config)
    },
    
    initiateCamera() {
      if (! this.hasCameraCapability()) {
        return
      }

      this.requestCameraAccess()
        .then((mediaStream => {

          this.$refs.video.srcObject = stream
        })).catch(error => {
          // handle the error
      })
    },

    takePhoto() {
      const context = this.$refs.canvas.getContext('2d');
      
      context.drawImage(this.$refs.camera, 0, 0, 450, 337.5);
    },
    
    closeCamera() {
      let tracks = this.$refs.camera.srcObject.getTracks();

      tracks.forEach(track => {
        track.stop();
      });
    }
  },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment