使用 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 访问我的网络摄像头。我将代码更改为 Typescript，例如：

@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 之类的

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