function startVideo(src) { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { let video = document.getElementById(src); if ("srcObject" in video) { video.srcObject = stream; } else { video.src = window.URL.createObjectURL(stream); } video.onloadedmetadata = function (e) { video.play(); }; //mirror image }); } } var canvas; function getFrame(src,dotNetHelper) { console.log("getFrame"); var video = document.getElementById(src); var context; var width = video.offsetWidth , height = video.offsetHeight; canvas = canvas || document.createElement('canvas'); canvas.width = width; canvas.height = height; context = canvas.getContext('2d'); context.drawImage(video, 0, 0, width, height); var dataUrl=canvas.toDataURL('image/jpeg'); dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl); }