vue.js - 网络摄像头在某些机器上无法使用 JavaScript
问题描述
我正在使用 Vue.js 构建一个使用网络摄像头的 Electron 应用程序。网络摄像头在一台计算机上的 Electron 应用程序中工作,但它只是在另一台计算机上显示黑屏。唯一显着的区别(我认为)是它工作的机器(机器 A)使用 Node v14.15.0
,而它不工作的机器(机器 B)使用v12.18.4
我已经单独测试了机器 B 上的网络摄像头。它通过 Windows 上的本机相机应用程序和此在线工具运行。有趣的是,集成和外部网络摄像头都无法工作。我一开始直播,灯就亮了,但就是这样。似乎来自的承诺.getUserMedia()
没有解决(请参阅代码片段),但我无法确定原因。
如何让网络摄像头流式传输?
let mediaInputs = [];
let devices = [];
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
return;
}
mediaInputs = await navigator.mediaDevices.enumerateDevices();
devices = await mediaInputs.filter(
(device) => device.kind === "videoinput"
);
//Stop any existing streams
if (this.video.srcObject !== undefined) {
const l = this.video.srcObject;
l.getTracks().forEach((track) => track.stop());
}
const sourceInfo = this.videoSources.find((o) => o.label === this.source);
const constraints = {
video: {
deviceId: sourceInfo.deviceId,
width: 1280,
height: 720,
},
audio: false,
};
try {
console.log('This line is logged');
//This is where I start the stream.
const stream = await navigator.mediaDevices.getUserMedia(constraints);
console.log('This line is never reached');
this.video = this.$refs.video;
this.video.srcObject = stream;
this.video.play();
} catch (error) {
this.showSnackbar(error);
console.error(error);
}
解决方案
我只需要更新到最新版本的 Electron(在撰写本文时为 11.1.1)即可工作。
但是,如果您仍然遇到问题,有一个关于该主题的GitHub 线程仍然处于活动状态
推荐阅读
- c - 如何判断 linux 内核在哪里解析 tuntap 接口上的 MLD 连接?
- css - 组合来自不同选择器的变量
- excel - 如何从excel中的特定shett复制
- ios - 在 iOS AudioKit 上使用外部麦克风录制立体声
- javascript - D3.js 工具提示在鼠标悬停时不显示(或根本不显示)
- java - 片段 webView 无法检测到 Google 地图(您的位置)
- c++ - 为什么我会收到“错误:预期的表达式”?
- excel - 将单元格组合在同一列中
- python - 从目录 Pytorch 中的文件夹加载自定义数据
- windows - Rust Bindgen:在 Windows 上设置包含路径