Angular - 如何从 navigator.getUserMedia 设置视频 src？答案

【问题标题】：Angular - How can I set the video src from navigator.getUserMedia?Angular - 如何从 navigator.getUserMedia 设置视频 src？
【发布时间】：2015-09-18 06:56:59
【问题描述】：

我正在尝试为 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));  
        }
    }

它只有在添加行“setTimeout(() => {}, 2000);”后才能工作。

Plunker

【问题讨论】：

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

标签： javascript html angular

【解决方案1】：

设置 src url 后，需要触发更改检测。将 getUserMedia 调用包装成 Promise 将解决您的问题。您还应该能够手动调用 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);
        });

查看更新的插件：http://plnkr.co/edit/G9Y4Rk17pNP5XwHzDNko?p=preview

【讨论】：