web-dev-qa-db-ja.com

Angular 2でwebrtcを使用する方法は？

Angular 2 TypeScriptで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);
      });
  }

] プランカーコード

誰か助けてもらえますか？

typescriptangularwebrtc
8
Giang Đỗ Hoàng

Adapter.jsを含める必要があります： https://github.com/webrtc/adapter

基本的に、別の回答のコードを使用することができます。

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

ただし、その場合はアクセスできないままになるWebRTC関数がさらにあります。したがって、adapter.jsを含める方が正しい方法です。さらに、それはグーグル（最大のWebRTC貢献者）によって維持され更新されています。

4
fycth

以下は、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>
6
lironn

あなたはいくつかの間違いを犯しました：

1）getUserMediaは約束を提供しますが、_.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);
      });
  }
}
_
4
Herman Fransen

その関数を呼び出す前に、まずこれを行ってください。

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