2

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

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

Plunker

Graham
  • 7,431
  • 18
  • 59
  • 84
Roni Hacohen
  • 313
  • 5
  • 16
  • What should we see? I see the plnkr failing with a `NavigatorUserMediaError` and a black screen, but the timeout doesn't seem to solve anything – Eric Martinez Sep 19 '15 at 00:28
  • You are right I didnt explain, it should use 'navigator.getUserMedia' and and get video stream from a webcam. So you must have a webcam attached to test it. – Roni Hacohen Sep 19 '15 at 05:34

1 Answers1

-1

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

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

cghislai
  • 1,751
  • 15
  • 29