index.html


<!doctype html>
<!DOCTYPE html>
<html>
<head>
  <title>WebCodec MP4 Transcoding Demo</title>
  <meta http-equiv="origin-trial" content="Aje8D+7PG97BFcl3a9WSQvpbg81wM2U1tqT5a6fBp/eikjy/c/sJiZIb8grxqxpFJdeV8Xsujz8+oTBeHQZK5gUAAABdeyJvcmlnaW4iOiJodHRwczovL3RndWlsYmVydC1nb29nbGUuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJDb2RlY3MiLCJleHBpcnkiOjE2MDgwNTgwMTJ9" />
</head>
<body>
  <p>
   Example of transcoding an MP4, derived from https://tguilbert-google.github.io/webcodecs/mp4/index.html
  </p>
  <p>
    Frames extracted: <span id="frameCount"></span>
  </p>
  <canvas></canvas>

<!-- This version of mp4box.js has the fix to: https://github.com/gpac/mp4box.js/issues/200 -->
<!-- It is a forked build until this PR lands https://github.com/gpac/mp4box.js/pull/206 -->
<script src="mp4box.all.min.js"></script>

<script type="module">
  import {MP4Demuxer} from "./mp4_demuxer.js";
  let demuxer = new MP4Demuxer("bbb.mp4");

  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext('2d');
  document.body.appendChild(canvas);

  var frameCount = 0;

  async function onFrame(frame) {

    const cloneFrame = frame.clone();
    encoder.encode(cloneFrame, { keyFrame : (frameCount % 30) == 0 } );

    var img = await frame.createImageBitmap();
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    img.close();
    frame.destroy();

    ++frameCount;
    document.getElementById("frameCount").innerText = frameCount;
  }

  function onChunk(chunk){
    console.log(chunk);
    console.log(`hurray, I encoded a chunk!`);
  }

  let encoder = new VideoEncoder({
    output: onChunk,
    error: e => console.log(`Encoding error: ${e}`)
  });

  encoder.configure({
    codec : 'avc1.4d401e',
    width : 640,
    height : 360,
    bitrate : 1000000,
    framerate : 30
  });

  let decoder = new VideoDecoder({
    output: onFrame,
    error: e => console.error(e),
  });

  demuxer.getConfig().then((config) => {
    canvas.height = config.codedHeight;
    canvas.width = config.codedWidth;

    decoder.configure(config);
    demuxer.start((chunk) => {
      decoder.decode(chunk);
    })
  });

  window.decoder = decoder;
  window.encoder = encoder;


</script>


</body>
</html>