Load MP4Box from npm with correct typescript definitions.

player/package.json

@@ -12,5 +12,8 @@
     "@types/dom-webcodecs": "^0.1.6",
     "parcel": "^2.8.0",
     "typescript": ">=3.0.0"
+  },
+  "dependencies": {
+    "mp4box": "^0.5.2"
   }
 }

player/src/audio/decoder.ts

@@ -109,7 +109,7 @@ export class Decoder {
             box.set(atom)
 
             // and for some reason we need to modify the underlying ArrayBuffer with offset
-            let buffer = box.buffer as MP4.ArrayBufferOffset
+            let buffer = box.buffer as MP4.ArrayBuffer
             buffer.fileStart = offset
 
             // Parse the data

player/src/audio/source/index.ts

@@ -56,7 +56,7 @@ export default class Source {
     }
 
     emit(frame: AudioData) {
-        for (let i = 0; i < frame.channels; i += 1) {
+        for (let i = 0; i < frame.numberOfChannels; i += 1) {
             const ring = this.channels[i]
             ring.set(frame, i)
         }

player/src/mp4/index.ts

@@ -1,87 +1,11 @@
-// Wrapper around MP4Box to play nicely with MP4Box.
-// I tried getting a mp4box.all.d.ts file to work but just couldn't figure it out
-import { createFile, ISOFile, DataStream, BoxParser } from "./mp4box.all"
-
 // Rename some stuff so it's on brand.
-export { createFile as New, ISOFile as File, DataStream as Stream, BoxParser as Parser }
-
-export type ArrayBufferOffset = ArrayBuffer & {fileStart: number};
-
-export interface MediaTrack {
-	id: number;
-	created: Date;
-	modified: Date;
-	movie_duration: number;
-	layer: number;
-	alternate_group: number;
-	volume: number;
-	track_width: number;
-	track_height: number;
-	timescale: number;
-	duration: number;
-	bitrate: number;
-	codec: string;
-	language: string;
-	nb_samples: number;
-}
-
-export interface VideoData {
-	width: number;
-	height: number;
-}
-
-export interface VideoTrack extends MediaTrack {
-	video: VideoData;
-}
-
-export interface MP4AudioData {
-	sample_rate: number;
-	channel_count: number;
-	sample_size: number;
-}
-
-export interface AudioTrack extends MediaTrack {
-	audio: MP4AudioData;
-}
-
-export type Track = VideoTrack | AudioTrack;
-
-export interface Info {
-	duration: number;
-	timescale: number;
-	fragment_duration: number;
-	isFragmented: boolean;
-	isProgressive: boolean;
-	hasIOD: boolean;
-	brands: string[];
-	created: Date;
-	modified: Date;
-	tracks: Track[];
-	mime: string;
-	videoTracks: Track[];
-	audioTracks: Track[];
-}
-
-export interface Sample {
-	number: number;
-	track_id: number;
-	timescale: number;
-	description_index: number;
-	description: any;
-	data: ArrayBuffer;
-	size: number;
-	alreadyRead: number;
-	duration: number;
-	cts: number;
-	dts: number;
-	is_sync: boolean;
-	is_leading: number;
-	depends_on: number;
-	is_depended_on: number;
-	has_redundancy: number;
-	degration_priority: number;
-	offset: number;
-	subsamples: any;
-}
+export {
+	createFile as New,
+	MP4File as File,
+	MP4ArrayBuffer as ArrayBuffer,
+	MP4Info as Info,
+	DataStream as Stream,
+	Sample,
+} from "mp4box"
 
 export { Init, InitParser } from "./init"

player/src/mp4/init.ts

@@ -1,7 +1,7 @@
 import * as MP4 from "./index"
 
 export interface Init {
-	raw: MP4.ArrayBufferOffset;
+	raw: MP4.ArrayBuffer;
 	info: MP4.Info;
 }
 
@@ -9,7 +9,7 @@ export class InitParser {
 	mp4box: MP4.File;
 	offset: number;
 
-	raw: MP4.ArrayBufferOffset[];
+	raw: MP4.ArrayBuffer[];
 	info: Promise<MP4.Info>;
 
 	constructor() {
@@ -42,7 +42,7 @@ export class InitParser {
 		box.set(data)
 
 		// and for some reason we need to modify the underlying ArrayBuffer with fileStart
-		let buffer = box.buffer as MP4.ArrayBufferOffset
+		let buffer = box.buffer as MP4.ArrayBuffer
 		buffer.fileStart = this.offset
 
 		// Parse the data

player/src/mp4/mp4box.d.ts

@@ -0,0 +1,148 @@
+// https://github.com/gpac/mp4box.js/issues/233
+
+declare module "mp4box" {
+    interface MP4MediaTrack {
+        id: number;
+        created: Date;
+        modified: Date;
+        movie_duration: number;
+        layer: number;
+        alternate_group: number;
+        volume: number;
+        track_width: number;
+        track_height: number;
+        timescale: number;
+        duration: number;
+        bitrate: number;
+        codec: string;
+        language: string;
+        nb_samples: number;
+    }
+
+    interface MP4VideoData {
+        width: number;
+        height: number;
+    }
+
+    interface MP4VideoTrack extends MP4MediaTrack {
+        video: MP4VideoData;
+    }
+
+    interface MP4AudioData {
+        sample_rate: number;
+        channel_count: number;
+        sample_size: number;
+    }
+
+    interface MP4AudioTrack extends MP4MediaTrack {
+        audio: MP4AudioData;
+    }
+
+    type MP4Track = MP4VideoTrack | MP4AudioTrack;
+
+    export interface MP4Info {
+        duration: number;
+        timescale: number;
+        fragment_duration: number;
+        isFragmented: boolean;
+        isProgressive: boolean;
+        hasIOD: boolean;
+        brands: string[];
+        created: Date;
+        modified: Date;
+        tracks: MP4Track[];
+        mime: string;
+        audioTracks: MP4AudioTrack[];
+        videoTracks: MP4VideoTrack[];
+    }
+
+    export type MP4ArrayBuffer = ArrayBuffer & {fileStart: number};
+
+    export interface MP4File {
+        onMoovStart?: () => void;
+        onReady?: (info: MP4Info) => void;
+        onError?: (e: string) => void;
+        onSamples?: (id: number, user: any, samples: Sample[]) => void;
+
+        appendBuffer(data: MP4ArrayBuffer): number;
+        start(): void;
+        stop(): void;
+        flush(): void;
+
+        setExtractionOptions(id: number, user: any, options: ExtractionOptions): void;
+    }
+
+    export function createFile(): MP4File;
+
+    export interface Sample {
+        number: number;
+        track_id: number;
+        timescale: number;
+        description_index: number;
+        description: any;
+        data: ArrayBuffer;
+        size: number;
+        alreadyRead: number;
+        duration: number;
+        cts: number;
+        dts: number;
+        is_sync: boolean;
+        is_leading: number;
+        depends_on: number;
+        is_depended_on: number;
+        has_redundancy: number;
+        degration_priority: number;
+        offset: number;
+        subsamples: any;
+    }
+
+    export interface ExtractionOptions {
+        nbSamples: number;
+    }
+
+    const BIG_ENDIAN: boolean;
+    const LITTLE_ENDIAN: boolean;
+
+    export class DataStream {
+        constructor(buffer: ArrayBuffer, byteOffset?: number, littleEndian?: boolean);
+        getPosition(): number;
+
+        get byteLength(): number;
+        get buffer(): ArrayBuffer;
+        set buffer(v: ArrayBuffer);
+        get byteOffset(): number;
+        set byteOffset(v: number);
+        get dataView(): DataView;
+        set dataView(v: DataView);
+
+        seek(pos: number): void;
+        isEof(): boolean;
+
+        mapUint8Array(length: number): Uint8Array;
+        readInt32Array(length: number, littleEndian: boolean): Int32Array;
+        readInt16Array(length: number, littleEndian: boolean): Int16Array;
+        readInt8(length: number): Int8Array;
+        readUint32Array(length: number, littleEndian: boolean): Uint32Array;
+        readUint16Array(length: number, littleEndian: boolean): Uint16Array;
+        readUint8(length: number): Uint8Array;
+        readFloat64Array(length: number, littleEndian: boolean): Float64Array;
+        readFloat32Array(length: number, littleEndian: boolean): Float32Array;
+
+        readInt32(littleEndian: boolean): number;
+        readInt16(littleEndian: boolean): number;
+        readInt8(): number;
+        readUint32(littleEndian: boolean): number;
+        readUint16(littleEndian: boolean): number;
+        readUint8(): number;
+        readFloat32(littleEndian: boolean): number;
+        readFloat64(littleEndian: boolean): number;
+
+        endianness: boolean;
+
+        memcpy(dst: ArrayBufferLike, dstOffset: number, src: ArrayBufferLike, srcOffset: number, byteLength: number): void;
+
+        // TODO I got bored porting the remaining functions
+    }
+
+    export { };
+}

player/src/transport/index.ts

@@ -8,8 +8,6 @@ import Video from "../video"
 // @ts-ignore bundler embeds data
 import fingerprint from 'bundle-text:./fingerprint.hex';
 
-///<reference path="./types/webtransport.d.ts"/>
-
 export interface PlayerInit {
 	url: string;
 	canvas: HTMLCanvasElement;

player/tsconfig.json

@@ -7,9 +7,5 @@
     "module": "es2022",
     "moduleResolution": "node",
     "strict": true,
-    "typeRoots": [
-      "src/types"
-    ],
-    "allowJs": true
   }
 }

player/yarn.lock

@@ -1196,6 +1196,11 @@ micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mp4box@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/mp4box/-/mp4box-0.5.2.tgz#6a2d36fdd0e2d3f2f2bee446d2067edf0b3871bc"
+  integrity sha512-zRmGlvxy+YdW3Dmt+TR4xPHynbxwXtAQDTN/Fo9N3LMxaUlB2C5KmZpzYyGKy4c7k4Jf3RCR0A2pm9SZELOLXw==
+
 msgpackr-extract@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-3.0.2.tgz#e05ec1bb4453ddf020551bcd5daaf0092a2c279d"