CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxelectron
mos
mos

Reputation: 347

electron - allowing access to webcam

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?

Upvotes: 7

Views: 12134

Answers (2)

Declan Nnadozie
Declan Nnadozie

Reputation: 2057

Try this one

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

Upvotes: 4

TheBlueSky
TheBlueSky

Reputation: 5948

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));

Upvotes: 2

Related Questions