Bug showcase: decode video frames in reverse order

src/video-element.ts

@@ -53,6 +53,9 @@ const decodeQueueHwm = 30;
 
 const DEBUG = false;
 
+// Bug showcases
+const BUG_DECODE_VIDEO_IN_REVERSE = false;
+
 export class BabyVideoElement extends HTMLElement {
  readonly #canvas: HTMLCanvasElement;
  readonly #canvasContext: CanvasRenderingContext2D;
@@ -89,6 +92,7 @@ export class BabyVideoElement extends HTMLElement {
  #nextDecodedVideoFramePromise: Deferred<void> | undefined = undefined;
  #lastRenderedFrame: number | undefined = undefined;
  #nextRenderFrame: number = 0;
+ #needKeyFrame: boolean = true;
 
  readonly #audioDecoder: AudioDecoder;
  #lastAudioDecoderConfig: AudioDecoderConfig | undefined = undefined;
@@ -711,17 +715,31 @@ export class BabyVideoElement extends HTMLElement {
  ) {
  this.#videoDecoder.configure(codecConfig);
  this.#lastVideoDecoderConfig = codecConfig;
+ this.#needKeyFrame = true;
+ }
+ if (BUG_DECODE_VIDEO_IN_REVERSE) {
+ frames.reverse();
+ }
+ if (this.#needKeyFrame) {
+ // Remove non-keyframes
+ const firstKeyFrame = frames.findIndex((x) => x.type === "key");
+ if (firstKeyFrame > 0) {
+ frames.splice(0, firstKeyFrame);
+ }
  }
  for (const frame of frames) {
+ if (this.#needKeyFrame && frame.type === "key") {
+ this.#needKeyFrame = false;
+ }
  this.#videoDecoder.decode(frame);
  this.#decodingVideoFrames.push(frame);
  }
  // The "furthest decoded frame" depends on the rendering order,
  // since we must decode the frames in their original order.
- if (direction == Direction.FORWARD) {
- this.#furthestDecodingVideoFrame = frames[frames.length - 1];
- } else {
+ if (direction === Direction.BACKWARD && !BUG_DECODE_VIDEO_IN_REVERSE) {
  this.#furthestDecodingVideoFrame = frames[0];
+ } else {
+ this.#furthestDecodingVideoFrame = frames[frames.length - 1];
  }
  }
 
@@ -847,6 +865,7 @@ export class BabyVideoElement extends HTMLElement {
  this.#lastRenderedFrame = undefined;
  this.#decodingVideoFrames.length = 0;
  this.#decodedVideoFrames.length = 0;
+ this.#needKeyFrame = true;
  this.#videoDecoder.reset();
  }