Функция SourceBuffer завершается с ошибкой в ​​appendBuffer и не добавляет ArrayBuffer

Question

Не знаю, где я ошибаюсь с этой строкой кода:

    this.sourceBuffer.appendBuffer(this.arrayBuffer);

this.arrayBuffer is an ArrayBuffer:

    ArrayBuffer(612916) {}
    [[Int8Array]]: Int8Array(612916) [0, 26, 1, 115, -59, -121, 63, -73, 46, -83, 11, -43, 101, -125, …]
    [[Int16Array]]: Int16Array(306458) [6656, -8379, -24669, -31166, 385, -2238, 385, -3518, 1153, -3262, 2177, -32190, 30596, 25189, …]
    [[Int32Array]]: Int32Array(153229) [0, -2068476447, 8403783, 1644265887, -1373601436, 42063785, 47865 -2092334464, …]
    [[Uint8Array]]: Uint8Array(612916) [0, 111 …]
    byteLength: (...)
    __proto__: ArrayBuffer 

, но когда javascript попадает в строку:

    this.sourceBuffer.appendBuffer(this.arrayBuffer);

Я получаю сообщение об ошибке:

ОШИБКА TypeError: Невозможно прочитать свойство 'appendBuffer' с неопределенным

Вот полная строка кода

    declare var MediaRecorder: any;
    @Component({
      selector: 'app-webrtc',
      templateUrl: './webrtc.component.html',
      styleUrls: ['./webrtc.component.scss']
    })
    export class WebrtcComponent implements AfterViewInit, OnInit {
      constraints; video; recordedVideo; mediaRecorder; options;
      arrayBuffer: ArrayBuffer;
      sourceBuffer: any;
      mediaSource: MediaSource;

      constructor(private signalHub: WebRTCServiceService) {
        this.constraints = { audio: true, video: true };
      }

      ngOnInit() {
        this.signalHub.getHubStream().subscribe(data => {
        });
        this.signalHub.currentarrBuffer.subscribe(data => {
          this.arrayBuffer = data;
        });
        this.recordedVideo = document.getElementsByClassName('other-video')[0];
      }

      ngAfterViewInit() {
      }

      getStream() {
        this.signalHub.getStream();
      }

      startExternalVideo(){
        //this.mediaSource = this.mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
        console.log(this.arrayBuffer);
        this.sourceBuffer.appendBuffer(this.arrayBuffer);
        console.log(this.arrayBuffer);
        console.log(this.sourceBuffer);
        this.recordedVideo.srcObject = this.sourceBuffer;
        this.recordedVideo.play();
      }
    }

Используя Angular, используя socket.ioчтобы получить ArrayBuffer с сервера узлов.

Сначала я попытался использовать MediaSource для создания источника мультимедиа.Но как я могу использовать MediaSource и затем добавить SourceBuffer, если я не могу преобразовать ArrayBuffer в SourceBuffer, в первую очередь?

EDIT:

Попытка использовать Blob вместо Buffer.

this.blob = new Blob([new Uint8Array(this.arrayBuffer)] , {'type' : 'audio/ogg; codecs=opus'});
this.recordedVideo.srcObject = window.URL.createObjectURL(this.blob);

Но я получаю сообщение об ошибке:

ОШИБКА TypeError: Не удалось установить свойство 'srcObject' для 'HTMLMediaElement': предоставленное значение не относится к типу 'MediaStream '.

Какой BLOB-объект является приемлемым типом для MediaStream.

ОБНОВЛЕНИЕ:

Ранее я изменил эту строку кода this.recordedVideo.srcObject на this.recordedVideo.src .На Chrome я получил эту ошибку:

Uncaught (in promise) DOMException

Но на Firefox я получаю эту ошибку:

Media resource blob:http://localhost:4200/95ebabf2-ed01-45db-b3fc-a91a19c90ee8 could not be decoded. localhost:4200
NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.
Media resource blob:http://localhost:4200/95ebabf2-ed01-45db-b3fc-a91a19c90ee8 could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)