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.

score 2 · Accepted Answer · answered Apr 03 '19 at 10:18

2

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);

 }

answered Apr 03 '19 at 10:18

Ritesh Waghela

3,474
2
19
25

1

It's working. Can I do the same to show the received media stream? – Rupesh Apr 03 '19 at 10:23

score 0 · Answer 2 · edited Apr 03 '19 at 11:01

0

Try this

document.getElementById("vid1").src= window.URL.createObjectURL(stream);

edited Apr 03 '19 at 11:01

jeff porter

6,560
13
65
123

answered Apr 03 '19 at 10:05

Fahad Subzwari

2,109
3
24
52

New error `Property 'src' does not exist on type 'HTMLElement'.` – Rupesh Apr 03 '19 at 10:07
are you displaying live stream? – Fahad Subzwari Apr 03 '19 at 10:08
Yes. I am displaying the live stream getting from webcam. – Rupesh Apr 03 '19 at 10:09
URL.createObjectURL is no longer supported for MediaStreams as of Chrome 72. – Philipp Hancke Apr 03 '19 at 10:56

Roman · Answer 3 · 2021-05-27T19:19:13.553

0

In my case the following variant works:

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

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

 }

P.S. navigatorr !== navigator

edited May 27 '21 at 19:19

answered May 24 '21 at 03:32

Roman

19,236
15
93
97

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

3 Answers3