Hi guys
I am doing a project using the built-in camera. So I prepared the same code for both boxes (A and B) but when the website opens the camera is displayed only in the A box. Is there a way to display it in the B box as well?
Thanks a lot
sample.zip (53.9 KB)
PS: Here is the javascript code for the box:
<video autoplay="" id="vid" width="244" height="211" style="display: inline;"></video>
<canvas id="canvas" width="244" height="211"></canvas>
<br>
<script type="text/javascript">
var video = document.querySelector("#vid");
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
var onCameraFail = function (e) {
console.log('Camera did not work.', e);
};
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
}
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video:true}, function (stream) {
video.src = video.mozSrcObject = stream;
localMediaStream = stream;
}, onCameraFail);
</script>