Angular - 如何从navigator.getUserMedia设置视频src？ [英] Angular - How can I set the video src from navigator.getUserMedia?

问题描述

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

I am trying to set up a webcam stream for a video element in 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）;。

Its working only after adding the line "setTimeout(() => {}, 2000);".

Plunker

推荐答案

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

Changes detection needs to be triggered once you set the src url. Wrapping the getUserMedia call into a Promise will solve your issue. You should also be able to call Lifecycle.tick() manually.

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

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

See the updated plunker: http://plnkr.co/edit/G9Y4Rk17pNP5XwHzDNko?p=preview

这篇关于Angular - 如何从navigator.getUserMedia设置视频src？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！