如何在Angular 2中使用webrtc？

Question

我试图在Angular 2打字稿中使用webrtc并得到错误:navigation.getUserMedia不是一个函数.

这是我的代码:[

ngOnInit(): void {
    navigator.getUserMedia(this.constraints,
      stream => {
        var track: MediaStreamTrack = stream.getTracks()[0];
        console.log('label:' + track.label);
        console.log('ended:' + track.readyState);
        track.onended = (event:Event) => console.log('Track ended');
        var objectUrl = URL.createObjectURL(stream);
      },
      error => {
        console.log('Error message: ' + error.message);
        console.log('Error name: ' + error.name);
      });
  }

] Plunker代码

谁能帮我？

Answer 1

你应该包括adapter.js：https : //github.com/webrtc/adapter

基本上，您可以使用另一个答案中的代码：

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

尽管如此，在这种情况下，还有更多的 WebRTC 功能仍然无法访问。因此，包含adapter.js 是更正确的方法。此外，它由 Google（最大的 WebRTC 贡献者之一）维护和更新。

Answer 2

以下是我在Angular 4中使用webrtc的方法 - >

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild('hardwareVideo') hardwareVideo: any;

  _navigator = <any> navigator;
  localStream;

  ngOnInit() {

    const video = this.hardwareVideo.nativeElement;
    this._navigator = <any>navigator;

    this._navigator.getUserMedia = ( this._navigator.getUserMedia || this._navigator.webkitGetUserMedia
    || this._navigator.mozGetUserMedia || this._navigator.msGetUserMedia );

    this._navigator.mediaDevices.getUserMedia({video: true})
      .then((stream) => {
        this.localStream = stream;
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });

  }

  stopStream() {
    const tracks = this.localStream.getTracks();
    tracks.forEach((track) => {
      track.stop();
    });
  }

}

模板:

<div style="text-align:center">
  <h1>
    Welcome to my webRTC demo app!
  </h1>
  <button (click)="stopStream()">Stop Streaming</button>
  <video #hardwareVideo autoplay></video>
</div>

Answer 3

你犯了几个错误：

1)getUserMedia交付了一个 Promise，缺少一个.then

2）使用navigator.mediaDevices.getUserMedia代替navigator.getUserMedia

3）线路video = document.querySelector('video');需要在里面ngOnInit

4) 由于 3) 你需要video: HTMLVideoElement;在第一部分声明。

5)this.video.srcObject = stream用于将流放在 HTMLVideoElement 上

当你把所有东西放在一起时，你会得到以下代码：

import {Component,OnInit} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <h1>Realtime communication with WebRTC</h1>
    <video autoplay></video>
  `
})
export class App {

  video: HTMLVideoElement;
  constraints = { audio: false, video: true };

  constructor() {}

  ngOnInit(): void {
    this.video = document.querySelector('video');
    navigator.mediaDevices.getUserMedia(this.constraints).then(
      stream => {
        this.video.srcObject = stream
      },
      error => {
        console.log('Error: ' + error);
      });
  }
}