電子 - 允許訪問網絡攝像頭

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