使用 Angular 访问网络摄像头

Question

我使用了这个代码示例：

<video autoplay playsinline style="width: 100vw; height: 100vh;"></video>
<script>
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
        .then(stream => document.querySelector('video').srcObject = stream);
</script>

我想使用 Angular 通过网络摄像头使用 WebApp 进行访问。我将代码更改为打字稿，如：

@ViewChild('myVideo') myVideo: any;

public takePicture(event?: any): void {
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
.then(stream => this.myVideo.srcObject = stream);
}

在 .ts 和

        <button (click)="takePicture($event)"></button>
        <video #myVideo autoplay playsinline style="width: 100px; height: 100px;"></video>

在html。无论如何，示例代码在用浏览器打开的普通文件中工作。但是我无法翻译 Angular 的代码。我没有收到任何错误消息。浏览器正在询问我的摄像头许可，但我没有看到我的网络摄像头的输入。

来自德国的问候！

Answer 1

你没有得到任何输出的原因是在使用 viewchild 时你必须通过

访问 srcObject

this.myVideo.nativeElement.srcObject

你可以按照上面的方法或使用旧的javascript document.getElement like

public takePicture(event?: any): void {
const vid = document.getElementById("videoelementId")
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
.then(stream => vid.srcObject = stream);
}

我基于此开发了一个插件，

https://www.npmjs.com/package/get-my-photo

https://github.com/Faiz-exe/get-my-photo

使用 Angular 访问网络摄像头

Webcam access with Angular

html

video

typescript

getusermedia

angular