角度2和使用html 5视频的摄像机流的实例化 [英] Angular 2 and instantiation of a camera stream with html 5 video

问题描述

我是Angular 2的新手。

I'm new to Angular 2.

如果我有视频标签，例如：

If I have a video tag, like :

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

用于打开相机流的javascript示例代码段：

And a javascript example snippet to open the camera stream :

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

在Angular 2 + Typescript中我想我可以访问视频标签，如：

In Angular 2 + Typescript I suppose I can access the video tag like :

@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片段中所示？

How can I access the media device and instantiate the stream like illustrated in the javascript snippet ?

推荐答案

在您的模板中，您可以包含以下视频指令：

In your template you can include the video directive like this:

<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/

see this plunker: https://embed.plnkr.co/Vwaz5oklrV0llzohhnOo/

这篇关于角度2和使用html 5视频的摄像机流的实例化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！