Video export from p5.js sketch 2 (draw loop)
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| /* | |
| library used: https://github.com/TrevorSundberg/h264-mp4-encoder | |
| a simple example exporting mp4 with p5js. | |
| record video while animation is being played. | |
| */ | |
| let cwidth = 640 | |
| let cheight = 360 | |
| let button | |
| let encoder | |
| const frate = 30 // frame rate | |
| const numFrames = 100 // num of frames to record | |
| let recording = false | |
| let recordedFrames = 0 | |
| let count = 0 | |
| // make sure encoder is ready before use | |
| function preload() { | |
| HME.createH264MP4Encoder().then(enc => { | |
| encoder = enc | |
| encoder.outputFilename = 'test' | |
| encoder.width = cwidth | |
| encoder.height = cheight | |
| encoder.frameRate = frate | |
| encoder.kbps = 50000 // video quality | |
| encoder.groupOfPictures = 10 // lower if you have fast actions. | |
| encoder.initialize() | |
| }) | |
| } | |
| function setup() { | |
| createCanvas(cwidth, cheight) | |
| frameRate(frate) | |
| button = createButton('record') | |
| button.mousePressed(() => recording = true) | |
| } | |
| function draw() { | |
| background(220) | |
| textSize(128) | |
| textAlign(CENTER, CENTER) | |
| text(count, width / 2, height / 2) | |
| count++ | |
| // keep adding new frame | |
| if (recording) { | |
| console.log('recording') | |
| encoder.addFrameRgba(drawingContext.getImageData(0, 0, encoder.width, encoder.height).data); | |
| recordedFrames++ | |
| } | |
| // finalize encoding and export as mp4 | |
| if (recordedFrames === numFrames) { | |
| recording = false | |
| recordedFrames = 0 | |
| console.log('recording stopped') | |
| encoder.finalize() | |
| const uint8Array = encoder.FS.readFile(encoder.outputFilename); | |
| const anchor = document.createElement('a') | |
| anchor.href = URL.createObjectURL(new Blob([uint8Array], { type: 'video/mp4' })) | |
| anchor.download = encoder.outputFilename | |
| anchor.click() | |
| encoder.delete() | |
| preload() // reinitialize encoder | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment