Javascript 角度-如何从navigator.getUserMedia设置视频src？

我正在尝试为Angular中的视频元素设置网络摄像头流

    import {Component, View, bootstrap} from "angular2/angular2";

    @Component({
        selector: "home",
    })
    @View({
        template:`<video [src]="videosrc"></video>`
    })
    export default class Home {

        videosrc: string;
        constructor(){

            //setTimeout(() => {}, 2000);

            navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
            navigator.getUserMedia({video: true},(stream) => {
                this.videosrc= URL.createObjectURL(stream);
            }, (err) => console.log(err));  
        }
    }

从“angular2/angular2”导入{组件、视图、引导程序}；
@组成部分({
选择器：“主页”，
})
@看法({
模板：``
})
导出默认类主页{
videosrc：字符串；
构造函数（）{
//setTimeout（（）=>{}，2000）；
navigator.getUserMedia=navigator.getUserMedia | | navigator.mozGetUserMedia | | navigator.webkitGetUserMedia；
getUserMedia（{video:true}，（流）=>{
this.videosrc=URL.createObjectURL（流）；
}，（err）=>console.log（err））；
}
}

它只有在添加行“setTimeout（（）=>{}，2000）；”之后才起作用

---

设置src url后，需要触发更改检测。 将getUserMedia调用包装成承诺将解决您的问题。您还应该能够手动调用Lifecycle.tick（）

var promise= new Promise<string>((resolve, reject)=>{
          navigator.getUserMedia({video: true},(stream) => {
            resolve(stream);
          }, (err) => reject(err));  
        }).then((stream)=>{
            this.videosrc= URL.createObjectURL(stream);
        }).catch((error)=>{
          console.log(error);
        });

var承诺=新承诺（（解决、拒绝）=>{
getUserMedia（{video:true}，（流）=>{
解决（流）；
}，（err）=>拒绝（err））；
})。然后（（流）=>{
this.videosrc=URL.createObjectURL（流）；
}).catch（（错误）=>{
console.log（错误）；
});

---

请参阅更新的plunker:

设置src url后需要触发更改检测。 将getUserMedia调用包装成承诺将解决您的问题。您还应该能够手动调用Lifecycle.tick（）

var promise= new Promise<string>((resolve, reject)=>{
          navigator.getUserMedia({video: true},(stream) => {
            resolve(stream);
          }, (err) => reject(err));  
        }).then((stream)=>{
            this.videosrc= URL.createObjectURL(stream);
        }).catch((error)=>{
          console.log(error);
        });

var承诺=新承诺（（解决、拒绝）=>{
getUserMedia（{video:true}，（流）=>{
解决（流）；
}，（err）=>拒绝（err））；
})。然后（（流）=>{
this.videosrc=URL.createObjectURL（流）；
}).catch（（错误）=>{
console.log（错误）；
});

---

查看更新的plunker:

我们应该看到什么？我看到plnkr出现了一个

navigator UserMediaError

和一个黑屏，但超时似乎解决不了任何问题。你说得对，我没有解释，它应该使用“navigator.getUserMedia”并从网络摄像头获取视频流。所以你必须有一个网络摄像头来测试它。我们应该看到什么？我看到plnkr出现了一个

navigator UserMediaError

和一个黑屏，但超时似乎解决不了任何问题。你说得对，我没有解释，它应该使用“navigator.getUserMedia”并从网络摄像头获取视频流。所以你必须有一个网络摄像头来测试它。