Question

我正在使用getUserMedia来显示来自摄像头的实时流。

我的app.component.html是

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

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

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

 }

出现错误

类型“元素”上不存在属性“ src”。

但是如果我使用

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

它正在工作，但是然后我将如何显示接收到的视频流的视频。

如何解决此问题，请有人帮助我。

Answer 1

您需要将Element强制转换为HTMLVideoElement：试试这个：

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

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

 }

Answer 2

尝试

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

Answer 3

就我而言，以下变体有效：

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

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

 }

附言navigatorr !== navigator

mediaStream和Angular 4中的类型'Element'上不存在属性'scr'

3 个答案: