如何在电子应用程序中显示网络摄像头视频源？

Question

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

Answer 1

有两种方法可以完成此操作。但是，这两种方式都不符合您 select 使用相机 by defining the vendorid and productid 的标准。尽管它允许您通过 deviceId.

select 设备

方法一手动实现

首先，我们创建一个视频元素

<video ref="vid" />

接下来，我们创建 select

<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 变化，以便在用户 select 进行视频输入时加载正确的源。

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

Answer 2

您可以使用此代码

var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}

// this functions to stop

function stop(e) {
  var stream = video.srcObject;
  var tracks = stream.getTracks();

  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    track.stop();
  }

  video.srcObject = null;
}

#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
</head>
 
<body>
<div id="container">
    <video autoplay="true" id="videoElement">
    
    </video>
</div>
</body>
</html>

它是如何工作的？

select video tag

var video = document.querySelector("#videoElement");

then accessing the getUserMedia API

    if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}

如何在电子应用程序中显示网络摄像头视频源？

How can I show webcam video feed inside an electron application?

javascript

vue.js

electron

方法一手动实现

方法二使用vue-web-cam