Property 'scr' does not exist on type 'Element' in mediaStream and Angular 4

Question

I am using getUserMedia to displaying the live stream from the webcam.

My app.component.html is

// to show webcam video
<video id="vid1" autoplay></video>

// to show recieved stream from other user.
<video id="vid2" autoplay></video>

and app.component.ts

navigatorr.getUserMedia(constraints, function (stream) {
    const video = document.querySelector('#vid1');

    // inserting our stream to the video tag
    video.src = window.URL.createObjectURL(stream);

 }

It is giving an error that

Property 'src' does not exist on type 'Element'.

But If I am using

const video = document.querySelector('video');

It is working, But then How will I show the video of the received stream.

How to solve this problem, Please someone help me.

Answer 1

You need to cast Element to HTMLVideoElement: Try this:

navigatorr.getUserMedia(constraints, function (stream) {
    const video = <HTMLVideoElement>(document.querySelector('#vid1'));

    // inserting our stream to the video tag
    video.src = window.URL.createObjectURL(stream);

 }