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
There are two issues with html , javascript at Question
img src is still set to placeholder image when input type="submit" is clicked, refreshing window on form submission
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>