JS MediaRecorderイベントにAngular2メソッドを割り当てるとondataavailableはAngular2コンポーネント変数のスコープを失います

Question

私のAngular2アプリでこのwebRTCの例https://webrtc.github.io/samples/src/content/getusermedia/record/ を実行しようとしています。ソースはこちらのギターにもありますhttps://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/record。

これは、すべてのコードが含まれている1つのバニラmain.JSファイルを1つの簡単なHTMLページで構成されています。私はplnkrのデモを作成しようとしましたが、navigator.GetUserMediaコールをサポートしないため、以下で説明するように最善を尽くします。

これをAngular2コンポーネントに変換しようとしました。私は以下を持っています：

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

@Component({ 
    selector: "my-web-rtc-recording", 
    templateUrl: 'app/test.web.rtc.recording.component.html' 
}) 
export class TestWebRtcRecordingComponent implements OnInit { 

    // -- private variables -- 
    startStop: string = "Start"; 
    mediaSource: MediaSource = new MediaSource(); 
    mediaRecorder: MediaRecorder; 
    recordedBlobs: Blob[]; **// <<== This is the variable in question** 
    sourceBuffer: any; 

    gumVideo: HTMLVideoElement; 
    recordedVideo: HTMLVideoElement; 
    recordButton: HTMLButtonElement; 
    playButton: HTMLButtonElement; 
    downloadButton: HTMLButtonElement; 

プライベート変数recordedBlobsに注目してください。これは、登録する必要があるMediaRecorderイベントondataavailableイベントで設定されます。問題がある場合は、イベントに登録できますが、コンポーネントのプライベート変数は範囲外です。

私はビデオストリームをつかむたら、私は次のようにします。

this.recordedBlobs = []; 
this.mediaRecorder = new MediaRecorder(window.stream); 

その後、私はイベントに角度メソッドを割り当てます。

this.mediaRecorder.ondataavailable = this.handleDataAvailable; 

私は、これは正しい構文であるかわからないが、イベントは火を行い、データが正しく送信されます。

handleDataAvailable(event) { 
    // debugger; 

    if (event.data && event.data.size > 0) { 
     // Note: It is undefined here because it is a different scope? 
     // I'm trying to figure this out why these are 2 sep variables 
     // My hunch is they are being updated in different processes 
     if (this.recordedBlobs == undefined) 
     { 
      console.log('this.recordedBlobs is undefined'); 
      this.recordedBlobs = []; 
     } 
     // Add each recorded data event to our array of blobs  
     if (event.data != undefined) 
      this.recordedBlobs.push(event.data); 
     console.log('Recorded Blob Count = ', this.recordedBlobs.length); 
    } 
} 

だから、問題はthis.recordedBlobsに私の参照は、もはや私のコンポーネントのプライベート変数への参照であるということではありません。

は、実際にはこれは私が未定義のためにチェックし、それを初期化しなければならなかった理由ですmediaRecorderオブジェクトではなく、私のコンポーネントを参照しています。それで私はここで何が欠けているのですか？

これは別のゾーンまたはスレッドで発生しますが、Angular2コンポーネントのスコープ変数にアクセスできません。私は変数を設定することができなければならないので、録音が完了したらrecordedBlobsを参照することができます。これはonclick()のようなあらかじめ定義されたDOMイベントではないので、それを処理するためにAngularのために何か特別な処理が必要ですか？

いただければ幸いです他に何しようとする上の任意のアイデア....

ケビン

Answer 1

私は最終的にそれを解決...ドキュメントを掘り、複数のサンプルプロジェクトを見て、数日後...私はJSプロパティのサンプルがオンザフライで追加されているのを見たときに、プロパティを公開しようとMediaRecorderオブジェクトの周りにJSラッパーを作成していました。

mediaRecordイベントが発生し、ローカルに割り当てられたAngle "handleDataAvailable"メソッドが呼び出され、 "this"変数のスコープがMediaRecorderオブジェクトに変更され、もはや参照していない場合、スコープの問題です。角成分したがって、コンポーネント変数は範囲外です。 Angularは、コンポーネントに定義されているため、イベントハンドラコードのプライベートコンポーネント変数にアクセスするための方法を提供していません。

しかし、それは修正は簡単ですが判明し、私はちょうどMediaRecordオブジェクトにオンザフライプロパティを追加して、両方の場所でそれを参照することができます。

this.mediaRecorder = new MediaRecorder(window.stream); 
this.mediaRecord.blobs = []; <== This adds a new .blobs property on-the-fly 

次に、この新しいmediaRecorder.blobsプロパティをイベントハンドラコードで参照しました。

// Add each recorded data event to our array of blobs  
if (event.data != undefined) 
    this.blobs.push(event.data); <== Now referencing the new .blobs property I added. 

そして、私はハンドラから戻ったとき、私はthis.mediaRecorder.blobsプロパティを参照することができ、それがイベントハンドラに割り当てられたデータを持っています。

これでコンポーネントとイベントハンドラの両方のスコープにプロパティがありました。これは必要なものです。問題は、次の課題に解決！

ケビン