How to use webrtc in Angular 2?

Question

I tried to use webrtc in Angular 2 typescript and get the error: 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

Can anyone help me?

Answer 1

You should include 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 (one of the biggest WebRTC contributors).

Answer 2

following is how I used webrtc in 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();
    });
  }

}

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>

Answer 3

You have made a couple of mistakes:

1) getUserMedia delivers a Promise, there is lack of a .then

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

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

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

5) Use this.video.srcObject = stream to put the stream on the 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);
      });
  }
}