Vue

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="app">
  <div class="container" style="margin-top: 10px">
    <div class="row">    
      <div class="col-sm-6">
        <p><button type="button" class="btn btn-lg btn-primary" @click="getStream('video')">Start Camera</button></p>

        <video ref="player" controls autoplay style="height:180px; width: 240px;"></video>
      </div>

      <div class="col-sm-6">
        <p><button type="button" class="btn btn-lg btn-primary" @click="snapshot()">Take snapchat</button></p>
        <canvas ref="snapshot" style="height:180px; width: 240px;"></canvas>
        <pre>{{ photo }}</pre>
      </div>
      <div class="col-sm-6" style="display: none">
        <p><button type="button" class="btn btn-lg btn-primary" @click="getStream('audio')">Grab audio</button></p>

        <audio controls autoplay></audio>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: () => ({
  	photo: ''
  }),
  methods: {
  	getUserMedia: function (options, successCallback, failureCallback) {
      var api = window.navigator.getUserMedia || window.navigator.webkitGetUserMedia ||
        window.navigator.mozGetUserMedia || window.navigator.msGetUserMedia;
      if (api) {
        return api.bind(window.navigator)(options, successCallback, failureCallback);
      }
    },

    getStream: function (type) {
      if (!navigator.getUserMedia && !navigator.webkitGetUserMedia &&
        !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
        alert('User Media API not supported.');
        return;
      }

      var constraints = {};
      constraints[type] = true;
      this.getUserMedia(constraints, function (stream) {
        var mediaControl = document.querySelector(type);

        if ('srcObject' in mediaControl) {
          mediaControl.srcObject = stream;
          mediaControl.src = (window.URL || window.webkitURL).createObjectURL(stream);
        } else if (navigator.mozGetUserMedia) {
          mediaControl.mozSrcObject = stream;
        }
      }, function (err) {
        alert('Error: ' + err);
      });
    },
    
    snapshot: function () {
    	const snapshotCanvas = this.$refs.snapshot
      const player = this.$refs.player
    	const context = snapshotCanvas.getContext('2d');
      // Draw the video frame to the canvas.
      context.drawImage(player, 0, 0, snapshotCanvas.width,snapshotCanvas.height);
      this.photo = snapshotCanvas.toDataURL()
    }
  }
})