我想通过定义该设备的vendorid 和productid 来显示来自特定设备 的网络摄像头。什么是最好的图书馆?我查看了 opencv 和 webcamjs,但没有 Electron 教程。提前致谢。
最佳答案
您可以通过两种方式完成此操作。但是,这两种方式都不符合您选择相机的标准by defining the vendorid and productid
.尽管它允许您通过 deviceId
选择设备.
方法一手动实现
首先,我们创建一个视频元素
<video ref="vid" />
接下来,我们创建我们的选择
<select
v-model="deviceID"
v-if="videoDevices.length >= 1"
style="border:1px black solid"
>
<option
v-for="i in videoDevices"
:key="i.deviceId"
:value="i.deviceId"
:selected="(deviceID == i.deviceId)"
>
{{ i.label }}
</option>
</select>
然后,在我们的脚本中,我们需要 videoDevices
和 deviceID
我们数据对象中的变量。
data() {
return {
videoDevices: [],
deviceID: null,
};
}
当 Vue 实例被挂载时,我们需要查找连接到我们计算机的所有媒体设备并过滤掉所有属于 videoinput
的设备。 .
async mounted() {
//Get all mediaDevices attached to the computer
let devices = await navigator.mediaDevices.enumerateDevices();
//Iterate over all of the devices
for (let index = 0; index < devices.length; index++) {
const device = devices[index];
if (device.kind == "videoinput") {
//Add the video device because it is a videoDevice. Manually create a new object with device details instead of passing device.
this.videoDevices.push({
deviceId: device.deviceId,
kind: device.kind,
label: device.label,
});
}
}
}
最后,我们需要看deviceID
进行更改,以便在用户选择视频输入时加载正确的源。
watch: {
async deviceID(v) {
//Start the video with the exact deviceId we are trying to observe
var constraints = {
deviceId: { exact: v.deviceID },
};
//Create a stream with the webcam selected by the constraints above.
let stream = await navigator.mediaDevices.getUserMedia({
video: constraints,
});
//Get the ref pointing towards our video tag
let video = this.$refs.vid;
//Set the source to be the stream we are capturing above
video.srcObject = stream;
//When the stream is loaded, begin playing the stream
video.onloadedmetadata = function() {
video.play();
};
},
}
这里是带有 full example 的代码沙箱
方法二使用vue-web-cam
您可以使用 vue-web-cam .
下面是如何使用它,直接来自示例
npm i vue-web-cam --save
模板:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Current Camera</h2>
<code v-if="device">{{ device.label }}</code>
<div class="border">
<vue-web-cam
ref="webcam"
:device-id="deviceId"
width="100%"
@started="onStarted"
@stopped="onStopped"
@error="onError"
@cameras="onCameras"
@camera-change="onCameraChange"
/>
</div>
<div class="row">
<div class="col-md-12">
<select v-model="camera">
<option>-- Select Device --</option>
<option
v-for="device in devices"
:key="device.deviceId"
:value="device.deviceId"
>{{ device.label }}</option>
</select>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary" @click="onCapture">Capture Photo</button>
<button type="button" class="btn btn-danger" @click="onStop">Stop Camera</button>
<button type="button" class="btn btn-success" @click="onStart">Start Camera</button>
</div>
</div>
</div>
<div class="col-md-6">
<h2>Captured Image</h2>
<figure class="figure">
<img :src="img" class="img-responsive" />
</figure>
</div>
</div>
</div>
脚本
import { WebCam } from "vue-web-cam";
export default {
name: "App",
components: {
"vue-web-cam": WebCam
},
data() {
return {
img: null,
camera: null,
deviceId: null,
devices: []
};
},
computed: {
device: function() {
return this.devices.find(n => n.deviceId === this.deviceId);
}
},
watch: {
camera: function(id) {
this.deviceId = id;
},
devices: function() {
// Once we have a list select the first one
const [first, ...tail] = this.devices;
if (first) {
this.camera = first.deviceId;
this.deviceId = first.deviceId;
}
}
},
methods: {
onCapture() {
this.img = this.$refs.webcam.capture();
},
onStarted(stream) {
console.log("On Started Event", stream);
},
onStopped(stream) {
console.log("On Stopped Event", stream);
},
onStop() {
this.$refs.webcam.stop();
},
onStart() {
this.$refs.webcam.start();
},
onError(error) {
console.log("On Error Event", error);
},
onCameras(cameras) {
this.devices = cameras;
console.log("On Cameras Event", cameras);
},
onCameraChange(deviceId) {
this.deviceId = deviceId;
this.camera = deviceId;
console.log("On Camera Change Event", deviceId);
}
}
};
关于javascript - 如何在 Electron 应用程序中显示网络摄像头视频源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67033248/