Угловой 2 и конкретизация потока камеры с HTML 5 видео

Question

Я новичок в угловой 2.

Если у меня есть видео тег, например:

<video width="480" height="480" autoplay></video>  

И Javascript пример фрагмент код, чтобы открыть поток камеры:

var video = document.getElementById('video'); 
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { 
     video.src = window.URL.createObjectURL(stream); 
     video.play(); 
    }); 
} 

В Угловой 2 + машинописи Я предполагаю, что я могу получить доступ к видео тега как:

@Component({ 
    selector: 'video-component', 
    template: ` 
    <video #videoplayer autoplay></video> 
    ` 
}) 
export class Video { 
@ViewChild('videoplayer') videoPlayer; 
    ngAfterViewInit() { 
    let video = document.getElementById('video'); 

    // How to access the mediadevice ?? 

    } 
} 

Как я могу получить доступ к медиа-устройству и создать экземпляр потока, как показано в фрагменте javascript?

Answer 1

В шаблоне вы можете включить видео директиву так:

<video #video width="640" height="480" autoplay></video> 

затем в компоненте:

@ViewChild('video') video:any; 
// note that "#video" is the name of the template variable in the video element 

ngAfterViewInit() { 
    let _video=this.video.nativeElement; 
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
    navigator.mediaDevices.getUserMedia({ video: true }) 
          .then(stream => { 
          _video.src = window.URL.createObjectURL(stream); 
          _video.play(); 
          }) 
    } 
} 

увидеть этот plunker: https://embed.plnkr.co/Vwaz5oklrV0llzohhnOo/