typescript Angular 2 和带有 html 5 视频的相机流的实例化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40131772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 and instantiation of a camera stream with html 5 video
提问by TWok
I'm new to Angular 2.
我是 Angular 2 的新手。
If I have a video tag, like :
如果我有视频标签，例如：
<video width="480" height="480" autoplay></video>
And a javascript example snippet to open the camera stream :
还有一个用于打开相机流的 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();
});
}
In Angular 2 + Typescript I suppose I can access the video tag like :
在 Angular 2 + Typescript 中，我想我可以访问视频标签，如：
@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 ??
}
}
How can I access the media device and instantiate the stream like illustrated in the javascript snippet ?
如何访问媒体设备并像 javascript 代码段中所示那样实例化流？
回答by Jose Marfil
In your template you can include the video directive like this:
在您的模板中，您可以像这样包含视频指令：
<video #video width="640" height="480" autoplay></video>
then in your component:
然后在您的组件中：
@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();
})
}
}
see this on stackblitz: https://stackblitz.com/edit/live-video
在 stackblitz 上看到这个：https://stackblitz.com/edit/live-video
