Decoding and rendering works, with a few bugs of course.

This commit is contained in:
Luke Curley 2023-03-28 10:30:35 +09:00
parent 805f6ca392
commit 8e1c8d13e2
2 changed files with 30 additions and 11 deletions

View File

@ -46,19 +46,26 @@ export class Decoder {
} }
}); });
decoder.configure({
codec: video.codec,
codedHeight: video.track_height,
codedWidth: video.track_width,
// optimizeForLatency: true
})
const input = MP4.New(); const input = MP4.New();
input.onSamples = (id: number, user: any, samples: MP4.Sample[]) => { input.onSamples = (id: number, user: any, samples: MP4.Sample[]) => {
for (let sample of samples) { for (let sample of samples) {
const timestamp = sample.dts / (1000 / info.timescale) // milliseconds const timestamp = 1000 * sample.dts / sample.timescale // milliseconds
console.log(sample)
if (sample.is_sync) {
// Configure the decoder using the AVC box for H.264
const avcc = sample.description.avcC;
const description = new MP4.Stream(new Uint8Array(avcc.size), 0, false)
avcc.write(description)
decoder.configure({
codec: video.codec,
codedHeight: video.track_height,
codedWidth: video.track_width,
description: description.buffer?.slice(8),
// optimizeForLatency: true
})
}
decoder.decode(new EncodedVideoChunk({ decoder.decode(new EncodedVideoChunk({
data: sample.data, data: sample.data,

View File

@ -46,7 +46,8 @@ export class Renderer {
let frame = this.queue[0] let frame = this.queue[0]
if (frame.timestamp > target) { if (frame.timestamp > target) {
// nothing to render yet // nothing to render yet, wait for the next animation frame
this.render = self.requestAnimationFrame(this.draw.bind(this))
return return
} }
@ -59,14 +60,25 @@ export class Renderer {
break break
} }
console.log("dropping frame")
frame.close()
this.queue.shift() this.queue.shift()
frame = next frame = next
} }
const ctx = this.canvas.getContext("2d"); const ctx = this.canvas.getContext("2d");
ctx?.drawImage(frame, 0, 0) // TODO aspect ratio ctx?.drawImage(frame, 0, 0, this.canvas.width, this.canvas.height) // TODO aspect ratio
this.last = frame.timestamp; this.last = frame.timestamp;
frame.close() frame.close()
if (this.queue.length > 0) {
this.render = self.requestAnimationFrame(this.draw.bind(this))
} else {
// Break the loop for now
this.render = 0
}
} }
} }