Capture image from webcam with JavaScript without page refresh

Question

I created HTML form and one of the fields is a canvas div which takes image from user's webcam and save it as base64_encode, and currently just console.log() the data. the problem is after each time user press the "take picture" button, the page refresh and all the data that was filled in earlier inputs disappear/get's deleted. I've been trying to under stand what causes this refresh but can't figure it out...

This is the relevant HTML part:

  <div class="form-group">
    <input minlength=8 type="password" class="form-control" name="pass" placeholder="Enter Password" required/>
  </div>

  <div class="form-group">
    <div id="camera">
        <div class="center clear">
            <video id="video" width="320" height="240" autoplay></video>
            <button id="snap">Take Picture</button>
            <canvas id="canvas" width="320" height="240"></canvas>
        </div>
    </div>

and the JS:

  // 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.URL.createObjectURL(stream);
        video.play();
      }, errBack);
    } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
      navigator.mozGetUserMedia(videoObj, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
      }, errBack);
    }

    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function() {
      context.drawImage(video, 0, 0, 320, 240);
            var image = document.getElementById("canvas");
            var pngUrl = canvas.toDataURL();
            console.log(pngUrl);
    });
  }, false);

any idea why clicking <button id="snap">Take Picture</button> refresh's the page and how can i prevent it?? thx

Answer 1

If you have a <button> inside of a <form> then clicking it will submit the form by default. To prevent this, you can use event.preventDefault to stop the submission.

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
}, true);

Answer 2

万一其他人陷入这个问题，我设法使用@Mike C的指导解决了这个问题……我只是将其添加到button ：

<button id="snap" onclick="return false;">Take Picture</button>