0

My code is here

 <video id="video" width="640" height="480" autoplay></video>
  <button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

  <script>

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", 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);
      }

      // Trigger photo take
      document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
      });
    }, false);

  </script>

My code is working fine but how can i get the url (i mean how can i save permanantly this)

Please help me i am new one with HTML5

Ravendra Kumar
  • 1,072
  • 10
  • 29
  • 1
    Take a look into the toDataURL method of the canvas element: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/ – enhzflep Nov 25 '13 at 07:42

1 Answers1

0

Add an image tag and try something lie this in your snap method:

<img id="canvasImg"><img>

document.getElementById('canvasImg').src = canvas.toDataURL();

You should be able to right click and save the image.

Edit: Here's a similar thread: how to save canvas data to file

Community
  • 1
  • 1
Nick
  • 4,002
  • 4
  • 30
  • 41