Question

在orden中使用我安装electron节点模块的webcamjs应用中的网络摄像头，这是我使用的代码，取自模块文档：

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

当我尝试访问网络摄像头时，电子会抛出以下异常：

未捕获的ReferenceError：未定义take_snapshot 。

但是，当我从Firefox测试相同的代码时，它运行良好。 Firefox宣布试图访问网络摄像头并给予OK以完成操作。而且，Chrome似乎不允许这样做，因为他告诉我：

Webcam.js错误：网络摄像头尚未加载。

我知道需要SSL才能在Chrome中运行，但是电子支持吗？那么，从electron使用相机的任何建议？

Answer 1

尝试这个

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

Answer 2

您不需要外部库来捕获网络摄像头流。

在您的HTML页面中：

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

在您的JavaScript文件中：

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

电子 - 允许访问网络摄像头

2 个答案: