gpt4 book ai didi

javascript - 如何在 Electron 应用程序中显示网络摄像头视频源?

转载 作者:行者123 更新时间:2023-12-05 06:02:04 26 4
gpt4 key购买 nike

我想通过定义该设备的vendoridproductid 来显示来自特定设备 的网络摄像头。什么是最好的图书馆?我查看了 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>

然后,在我们的脚本中,我们需要 videoDevicesdeviceID我们数据对象中的变量。

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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com