Get the src of an image from HTML5 webcam

Question

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 1

Define one default src first. Then replace that src with your taken photo:

 <script> var myImg = document.getElementById("photo").src; </script> 

 <div class="output"> <img id="photo" src="" alt="The screen capture will appear in this box."> </div> 

Answer 2

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