diff --git a/src/KonvaApp/Engine.ts b/src/KonvaApp/Engine.ts index 8ce085b7dd..6956e5395b 100644 --- a/src/KonvaApp/Engine.ts +++ b/src/KonvaApp/Engine.ts @@ -50,7 +50,7 @@ export class Engine { this.setupStage(); } - public setupStage() { + public async setupStage() { var textNode = new Konva.Text({ x: 0, y: 0, @@ -84,7 +84,7 @@ export class Engine { this.renderEngine.addNodes(videoNode); // Call this when - this.renderEngine.startProcessing(); + //await this.renderEngine.startProcessing(); //videoNode.simulatedLoading(); diff --git a/src/KonvaApp/Nodes/VideoNode.ts b/src/KonvaApp/Nodes/VideoNode.ts index b7ba1f87fd..baaade119d 100644 --- a/src/KonvaApp/Nodes/VideoNode.ts +++ b/src/KonvaApp/Nodes/VideoNode.ts @@ -48,7 +48,7 @@ export class VideoNode extends NetworkedNodeContext { "https://images-ng.pixai.art/images/orig/56dcbb5f-7a31-4328-b4ea-1312df6e77a0", "https://videos.pixai.art/f7df019d-79a2-4ed2-bb99-775c941f7ec6", ]; - private frameDidFinishSeeking: (() => void) | undefined; + private frameDidFinishSeeking: Promise; constructor( uuid: string = uuidv4(), offScreenCanvas: OffscreenCanvas, @@ -76,7 +76,7 @@ export class VideoNode extends NetworkedNodeContext { this.videoComponent = document.createElement("video"); - this.frameDidFinishSeeking = undefined; + this.frameDidFinishSeeking = new Promise(() => {}); this.videoComponent.onloadedmetadata = (event: Event) => { console.log("Loaded Metadata"); @@ -93,7 +93,7 @@ export class VideoNode extends NetworkedNodeContext { // reimplement using the function // ensure that this doesn't race. if (this.frameDidFinishSeeking) { - this.frameDidFinishSeeking(); + this.frameDidFinishSeeking.then(() => {}); } }; @@ -315,10 +315,10 @@ export class VideoNode extends NetworkedNodeContext { } // use sub milisecond for frames. - seek(second: number, doneSeeking: () => void) { + async seek(second: number) { // prevent interaction - console.log(`${this.didFinishLoading}`); + //console.log(`${this.didFinishLoading}`); if (this.didFinishLoading === false) { console.log("Didn't finish loading so cannot seek"); return; @@ -330,14 +330,22 @@ export class VideoNode extends NetworkedNodeContext { return; } console.log("Setting"); - this.frameDidFinishSeeking = doneSeeking; // should trigger the next frame. + this.videoComponent.currentTime = second; - this.videoComponent.seeking; + + this.frameDidFinishSeeking = new Promise((resolve, reject) => { + this.videoComponent.onseeked = (event: Event) => { + console.log("Seeked Finished"); + // reimplement using the function + // ensure that this doesn't race. + + resolve(); + }; + }); + + await this.frameDidFinishSeeking; } else { console.log("Video Not Seekable"); } } - - // grab frames - async render() {} } diff --git a/src/KonvaApp/RenderEngine.ts b/src/KonvaApp/RenderEngine.ts index 3917ffc3f4..c4a7bceffc 100644 --- a/src/KonvaApp/RenderEngine.ts +++ b/src/KonvaApp/RenderEngine.ts @@ -67,7 +67,7 @@ export class RenderEngine { // find the longest video const numberOfFrames = this.findLongestVideoLength(); - this.processFrame(); + await this.processFrame(); } public stopProcessing() { @@ -82,7 +82,9 @@ export class RenderEngine { private async processFrame() { if (!this.isProcessing) return; - this.videoNodes.forEach((videoNode: VideoNode) => { + for (let j = 0; j < this.videoNodes.length; j++) { + const videoNode = this.videoNodes[j]; + videoNode.stop(); const numberOfFrames = videoNode.getNumberFrames(); @@ -94,31 +96,31 @@ export class RenderEngine { console.log(videoNode.duration); if (frameTime < videoNode.duration) { - videoNode.seek(frameTime, () => { - this.offScreenCanvas.width = videoNode.node.getSize().width; - this.offScreenCanvas.height = videoNode.node.getSize().height; + await videoNode.seek(frameTime); + this.offScreenCanvas.width = videoNode.node.getSize().width; + this.offScreenCanvas.height = videoNode.node.getSize().height; - if (this.context) { - this.context.drawImage( - videoNode.videoComponent, - 0, - 0, - this.offScreenCanvas.width, - this.offScreenCanvas.height, - ); - this.frames.push(this.offScreenCanvas.transferToImageBitmap()); - // this.offScreenCanvas.convertToBlob().then((blob) => { - // // Save or process the blob as needed - // console.log("Frame saved as blob:", blob); - // this.blobToFile(blob); - // }); - } - }); // end of seek + if (this.context) { + this.context.drawImage( + videoNode.videoComponent, + 0, + 0, + this.offScreenCanvas.width, + this.offScreenCanvas.height, + ); + console.log("Pushing"); + this.frames.push(this.offScreenCanvas.transferToImageBitmap()); + // this.offScreenCanvas.convertToBlob().then((blob) => { + // // Save or process the blob as needed + // console.log("Frame saved as blob:", blob); + // this.blobToFile(blob); + // }); + } } // end of if } // end of for. - }); + } - console.log(frames); + console.log(this.frames); } private blobToFile(blob: Blob) {