Nitish Nitish - 2 months ago 16
Javascript Question

Get the src of an image from HTML5 webcam

I have an application where the user will click on a picture from the webcam and save it to a database. I have added the plugin from WebRTC.

My code is as below:

<form action="process.php" method="post">
<div class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas">
</canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
<script>
var myImg = document.getElementById("photo").src;
</script>
<input type="submit" onclick="alert(myImg)">
</form>


But when I click on submit, to check what it passes, it alerts empty! Why is it not showing the
src
?

NB: I am taking help from this

Answer

There are two issues with html , javascript at Question

  1. img src is still set to placeholder image when input type="submit" is clicked, refreshing window on form submission

  2. form is being submitted before img element src is set to data URI at photo.setAttribute('src', data); within takepicture

Try setting input type="submit" disabled attribute to prevent form being submitted before takepicture is called; attaching click event to #startbutton ; within #startbutton click handler attaching onload event to #photo , which should alert data URI of <img> src after being set to data URI representation of canvas image set from video within onload handler; set input type="submit" disabled attribute to false to allow form to be submitted.

Note also that error may occur if https: protocol not used.

 getUserMedia() no longer works on insecure origins. 
 To use this feature, you should consider switching your 
 application to a secure origin, such as HTTPS. 
 See [url] for more details.

<form>
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button> 
  </div>
  <canvas id="canvas">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box."> 
  </div>
    <script>
     document.getElementById("startbutton").addEventListener("click", function() {
       document.getElementById("photo").onload = function() {
           console.log(this.src);
           alert(this.src);
           document.querySelector("input[type=submit]").disabled = false;
       };          
     })
  </script>
  <input type="submit" disabled>
</form>

plnkr https://plnkr.co/edit/qzvEdtCnQnzXceIpDumA

Comments