erraticgenerator/p5js-mp4-export-2.html

## p5js-mp4-export-2.html
<!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>
	<!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>