After trying out this code snippet:
<video autoplay playsinline style="width: 100vw; height: 100vh;"></video>
<script>
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
.then(stream => document.querySelector('video').srcObject = stream);
</script>
I attempted to modify it for use in a WebApp with Angular. The revised TypeScript code looks like this:
@ViewChild('myVideo') myVideo: any;
public takePicture(event?: any): void {
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
.then(stream => this.myVideo.srcObject = stream);
}
This goes in the .ts file, and the following HTML markup is added:
<button (click)="takePicture($event)"></button>
<video #myVideo autoplay playsinline style="width: 100px; height: 100px;"></video>
Although the original example worked when opened in a browser as a standalone file, I encountered issues adapting it for Angular. Despite not receiving any error messages, I was unable to access my webcam input. It seems that the browser is prompting for camera permission, but no video feed is displayed.
Best regards from Germany!