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

Question

为了从我的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 is not defined。

但是，当我从 测试相同的代码时Firefox，它运行良好。Firefox 宣布尝试访问网络摄像头并同意完成操作。此外，Chrome似乎这是不允许的，因为他告诉我：

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

我知道它需要 SSL 才能在 Chrome 中工作，但是电子支持吗？那么，有什么建议可以使用相机electron吗？

Answer 1

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

在您的 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));