diff --git a/dev/mux.html b/dev/mux.html
index 7afcc7b..54023ea 100644
--- a/dev/mux.html
+++ b/dev/mux.html
@@ -34,8 +34,8 @@
}
const canvas = document.createElement('canvas');
- canvas.width = 640;
- canvas.height = 480;
+ canvas.width = 1920;
+ canvas.height = 1080;
const context = canvas.getContext('2d');
let format = new Mediabunny.MkvOutputFormat({ streamable: false });
@@ -193,12 +193,17 @@ Testing... <00:17.350>One... <00:18.125>Two...
//subtitleSource.add(simpleWebvttFile);
//subtitleSource.close();
+
+ const p = document.createElement('p');
+ document.body.append(p);
for (let i = 0; i < 100; i++) {
context.fillStyle = ['red', 'green', 'blue', 'yellow'][i % 4];
context.fillRect(canvas.width * Math.random(), canvas.height * Math.random(), canvas.width * Math.random(), canvas.height * Math.random());
await videoSource.add(i / 10, 1 / 10);
+
+ p.textContent = i;
}
let audioContext = new AudioContext();
@@ -211,5 +216,5 @@ Testing... <00:17.350>One... <00:18.125>Two...
await output.finalize();
console.log(target);
- download(new Blob([target.buffer]), 'test' + format.fileExtension);
+ //download(new Blob([target.buffer]), 'test' + format.fileExtension);
\ No newline at end of file
diff --git a/src/media-source.ts b/src/media-source.ts
index 625348f..2ca13a2 100644
--- a/src/media-source.ts
+++ b/src/media-source.ts
@@ -380,8 +380,8 @@ class VideoEncoderWrapper {
}
if (this.splitter) {
- const alphaFrame = this.splitter.extractAlpha(videoFrame);
const colorFrame = this.splitter.extractColor(videoFrame);
+ const alphaFrame = this.splitter.extractAlpha(videoFrame);
this.alphaFrameQueue.push(alphaFrame);
this.encoder.encode(colorFrame, finalEncodeOptions);
@@ -910,13 +910,17 @@ class ColorAlphaSplitter {
assert(yuv[width * height] === 128); // Where chroma data starts
assert(yuv[yuv.length - 1] === 128); // Assert the YUV data has been fully written
- return new VideoFrame(yuv, {
- format: 'I420',
+ // Defining this separately because TypeScript doesn't know `transfer` and I can't be bothered to do declaration
+ // merging right now
+ const init = {
+ format: 'I420' as const,
codedWidth: width,
codedHeight: height,
timestamp: sourceFrame.timestamp,
duration: sourceFrame.duration ?? undefined,
- });
+ transfer: [yuv.buffer],
+ };
+ return new VideoFrame(yuv, init);
}
close() {