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首先创建媒体源。但是，如果我不能首先将ArrayBuffer转换为SourceBuffer，该如何使用MediaSource然后添加SourceBuffer？

编辑：

尝试使用Blob而不是Buffer。

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

但是我收到一个错误消息：

错误TypeError：无法在'HTMLMediaElement'上设置'srcObject'属性：提供的值不是'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)

SourceBuffer函数在appendBuffer处失败，并且不会追加ArrayBuffer

0 个答案: