i used this Code Example:
<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 want to get access through my webcam with a WebApp using Angular. I changed the Code to Typescript like:
@ViewChild('myVideo') myVideo: any;
public takePicture(event?: any): void {
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
.then(stream => this.myVideo.srcObject = stream);
}
in the .ts and
<button (click)="takePicture($event)"></button>
<video #myVideo autoplay playsinline style="width: 100px; height: 100px;"></video>
in the html. Anyways the example code works in a normal file opened with a browser. But i can not translate the code for Angular. I dont get any Error message. The Browser is asking me for cam-permission but i dont see the input of my webcam.
Greetings from Germany!
The reason that you're not getting any output is that while using viewchild you have to access the srcObject via
this.myVideo.nativeElement.srcObject
you can follow the above way or use good old 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);
}
I have developed a plugin based on this ,