CODEWITHSUNDEEP
javascripthtmlcanvaswebcamsnapshot
Muhammad Zamzamy
Muhammad Zamzamy

Reputation: 1

Taking Snapshot on Webcam, then pass it to Canvas

I would like to ask about how to pass the snapshot into the canvas. Whenever I took a Snapshot, the Snapshot is always appear on the bottom of the page. I provide screenshot about the UI.

Webcam Layout : Webcam Snapshot

The Problem : The Problem

There is a canvas beside the Webcam Snapshot, and I want to pass the snapshot to it.

Here's the HTML code :

var video = document.querySelector("#video-webcam");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia({
    video: true
  }, handleVideo, videoError);
}

function handleVideo(stream) {
  video.srcObject = stream;
}

function videoError(e) {
  alert("Permission!")
}

function takeSnapshot() {
  var img = document.createElement('img');
  var context;

  var width = video.offsetWidth,
    height = video.offsetHeight;

  canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, width, height);

  img.src = canvas.toDataURL('image/png');
  document.body.appendChild(img);
}
<div class="row">
  <div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
    <div class="card">
      <video class="card" autoplay="true" id="video-webcam">
                        Demo.
                    </video>
      <button type="button" onclick="takeSnapshot()" class="btn btn-primary btn-icon-text">Ambil Gambar</button>
    </div>
  </div>
  <div class="col-xl-3 col-lg-6 col-sm-6 grid-margin stretch-card">
    <div class="card">
      <canvas id="canvas" width="1280" height="720"></canvas>
    </div>
  </div>
</div>

Any solution?

Already tried many times about using id's or classes, but i didn't manage it.

Upvotes: 0

Views: 32

Answers (0)

Related Questions