videojs / mux.js

Lightweight utilities for inspecting and manipulating video container formats.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

There was a problem using the instance mpeg2-ts to fMP4 Transmuxer

wangmings opened this issue · comments

#Problem description:
When using the following example! I'm in:
segments = [
"segment-0.ts",
"segment-1.ts",
"segment-2.ts",
"segment-3.ts" #An error occurred when this line was added too often
];

#Error reporting code segment:
transmuxer.on('data', (segment) => {
sourceBuffer.appendBuffer(new Uint8Array(segment.data));
})

#Error reporting questions:
Uncaught (in promise) DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer is still processing an 'appendBuffer' or 'remove' operation.

#How should this problem solve excuse me!

<title>Basic Transmuxer Test</title> <script src="https://github.com/videojs/mux.js/releases/latest/download/mux.js"></script> <script> // Create array of TS files to play segments = [ "segment-0.ts", "segment-1.ts", "segment-2.ts", ];
  // Replace this value with your files codec info
  mime = 'video/mp4; codecs="mp4a.40.2,avc1.64001f"';

  let mediaSource = new MediaSource();
  let transmuxer = new muxjs.mp4.Transmuxer();

  video = document.querySelector('video');
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", appendFirstSegment);

  function appendFirstSegment(){
    if (segments.length == 0){
      return;
    }

    URL.revokeObjectURL(video.src);
    sourceBuffer = mediaSource.addSourceBuffer(mime);
    sourceBuffer.addEventListener('updateend', appendNextSegment);

    transmuxer.on('data', (segment) => {
      let data = new Uint8Array(segment.initSegment.byteLength + segment.data.byteLength);
      data.set(segment.initSegment, 0);
      data.set(segment.data, segment.initSegment.byteLength);
      console.log(muxjs.mp4.tools.inspect(data));
      sourceBuffer.appendBuffer(data);
    })

    fetch(segments.shift()).then((response)=>{
      return response.arrayBuffer();
    }).then((response)=>{
      transmuxer.push(new Uint8Array(response));
      transmuxer.flush();
    })
  }

  function appendNextSegment(){
    // reset the 'data' event listener to just append (moof/mdat) boxes to the Source Buffer
    transmuxer.off('data');
    transmuxer.on('data', (segment) =>{
      sourceBuffer.appendBuffer(new Uint8Array(segment.data));
    })

    if (segments.length == 0){
      // notify MSE that we have no more segments to append.
      mediaSource.endOfStream();
    }

    segments.forEach((segment) => {
      // fetch the next segment from the segments array and pass it into the transmuxer.push method
      fetch(segments.shift()).then((response)=>{
        return response.arrayBuffer();
      }).then((response)=>{
        transmuxer.push(new Uint8Array(response));
        transmuxer.flush();
      })
    })
  }
</script>