typescript 如何在 Angular 2 中使用 webrtc？

How to use webrtc in Angular 2?

提问by Giang ?? Hoàng

I tried to use webrtc in Angular 2 typescript and get the error: navigation.getUserMedia is not a function.

我尝试在 Angular 2 打字稿中使用 webrtc 并得到错误：navigation.getUserMedia is not a function。

This is my code: [

这是我的代码：[

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 Code

] Plunker 代码

Can anyone help me?

谁能帮我？

采纳答案by fycth

You should include adapter.js: https://github.com/webrtc/adapter

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

Basically, you could just use the code from another answer:

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

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

Although, there are even more WebRTC-functions that would remain inaccessible in that case. So, including adapter.js is more correct way. Moreover, it is maintained and updated by Google (on of biggest WebRTC contributors).

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

回答by liron_hazan

following is how I used webrtc in Angular 4 -->

以下是我如何在 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();
    });
  }

}

template:

模板：

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

回答by Herman Fransen

You have made a couple of mistakes:

你犯了几个错误：

1) getUserMediadelivers a Promise, there is lack of a .then

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

2) Use navigator.mediaDevices.getUserMediainstead of navigator.getUserMedia

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

3) The line video = document.querySelector('video');needs to be inside ngOnInit

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

4) As a consequence of 3) you need to declare video: HTMLVideoElement;in the first section.

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

5) Use this.video.srcObject = streamto put the stream on the HTMLVideoElement

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

When you put everything together you will get the following code:

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

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

回答by AngJobs on Github

Before calling that function do this first:

在调用该函数之前先执行以下操作：

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