web-dev-qa-db-fra.com

Comment utiliser webrtc dans Angular 2?

J'ai essayé d'utiliser webrtc dans Angular 2 TypeScript et obtenir l'erreur suivante: navigation.getUserMedia n'est pas une fonction.

Ceci est mon 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);
      });
  }

] Code Plunker

Quelqu'un peut-il m'aider?

typescriptangularwebrtc
7
Giang Đỗ Hoàng

Vous devez inclure adapter.js: https://github.com/webrtc/adapter

En gros, vous pouvez simplement utiliser le code d’une autre réponse:

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

Cependant, il y a encore plus de fonctions WebRTC qui resteraient inaccessibles dans ce cas. Donc, y compris adapter.js est plus correct. De plus, il est mis à jour et mis à jour par Google (l’un des plus gros contributeurs au WebRTC).

3
fycth

voici comment j'ai utilisé webrtc dans Angular 4 ->

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

}

modèle:

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

Vous avez commis quelques erreurs:

1) getUserMedia livre une promesse, il manque un .then

2) Utilisez navigator.mediaDevices.getUserMedia au lieu de navigator.getUserMedia

3) La ligne video = document.querySelector('video'); doit être à l'intérieur ngOnInit

4) En conséquence de 3), vous devez déclarer video: HTMLVideoElement; dans la première section.

5) Utilisez this.video.srcObject = stream pour placer le flux sur le HTMLVideoElement

Lorsque vous mettez tout ensemble, vous obtiendrez le code suivant:

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);
      });
  }
}
4
Herman Fransen

Avant d'appeler cette fonction, commencez par ceci:

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
0
AngJobs on Github