Захват изображения с веб-камеры с JavaScript без обновления страницы

Question

Я создал форму HTML, и одно из полей - это div canvas, который принимает изображение с веб-камеры пользователя и сохраняет его как base64_encode, а в настоящее время только console.log() данных. проблема заключается в том, что каждый раз пользователь нажимает кнопку «снимать», обновляет страницу и все данные, заполненные более ранними входами, исчезают/удаляются. Я пытался под стендом, что вызывает это обновление, но не может понять это ...

Это отношение HTML часть:

<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> 

и 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); 

любая идея, почему нажатие <button id="snap">Take Picture</button> обновить страницу и как я могу ее предотвратить? thx

Answer 1

Если у вас есть <button> внутри <form>, тогда щелчок по нему отправит форму по умолчанию. Чтобы предотвратить это, вы можете использовать event.preventDefault, чтобы остановить отправку.

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

Answer 2

В-случае, если кто-то поймают в этом вопросе, я сумел решить эту ссылку, используя руководство C @ Mike ... я просто добавить это к button:

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