electron - allowing access to webcam

Question

In orden to use webcam from my electron app I installed webcamjs node module, this is the code I've used, taken from module docs:

<h1>camara</h1>
<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>

<script language="JavaScript">
Webcam.attach( '#my_camera' );
function take_snapshot() {
Webcam.snap( function(data_uri) {
    document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
} );
}
</script>
<a href="javascript:void(take_snapshot())">Take Snapshot</a>

When I try to access the webcam, electron throws me the following exception:

Uncaught ReferenceError: take_snapshot is not defined.

However, when I test the same code from Firefox, it works well. Firefox announces that tries to access the webcam and given OK to complete the action. Moreover, from Chrome seems that this is not allowed because he tells me:

Webcam.js error: Webcam is not loaded yet.

I know that it need a SSL to work in Chrome, but electron support it? So, any suggestions to use the camera from electron?

Answer 1

Try this one

navigator.getUserMedia({video: true, audio: false}, (localMediaStream) => {
        var video = document.querySelector('video')
        video.srcObject = localMediaStream
        video.autoplay = true
     }, (e) => {})

Answer 2

You don't need an external library in order to capture your webcam stream.

In your HTML page:

<video id="video" height="480" width="800" autoplay></video>

In your JavaScript file:

const constraints = {
    audio: false,
    video: {
        mandatory: {
            maxHeight: 480,
            maxWidth: 800,
            minHeight: 480,
            minWidth: 800,
        }
    }
};

const videoElement = document.getElementById('video');

navigator.getUserMedia = navigator.webkitGetUserMedia;
navigator.getUserMedia(
    constraints,
    stream => videoElement.src = window.URL.createObjectURL(stream),
    error => console.error(error));