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

Question

我想通过定义该设备的vendorid 和productid 来显示来自特定设备 的网络摄像头。什么是最好的图书馆？我查看了 opencv 和 webcamjs，但没有 Electron 教程。提前致谢。

Answer 1

您可以通过两种方式完成此操作。但是，这两种方式都不符合您选择相机的标准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);
        }
    }
};