2.19.4

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.19.3",
+	"version": "2.19.4",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

q5.d.ts

@@ -2645,15 +2645,20 @@ function draw() {
 	/** 🎞️
 	 * Creates a recorder. Simply hit record to start recording!
 	 * 
-	 * `quality` is set to "high" by default.
+	 * `format` is set to "H.264" by default. Encoding in "VP9" may not
+	 * be possible on some devices.
 	 * 
-	 * `format` is set automatically based on the height of the canvas.
+	 * `bitrate` is a number in megabits per second (mbps). Its default
+	 * value is determined by the height of the canvas. Increasing the
+	 * bitrate will increase the quality and file size of the recording.
 	 * 
+	 * These properties can be set via the recorder UI or programmatically.
 	 * @returns {HTMLElement} a recorder, q5 DOM element
 	 * @example
 createCanvas(200);
 
-createRecorder();
+let rec = createRecorder();
+rec.bitrate = 10;
 
 function draw() {
 	circle(mouseX, randomY(), 10);

q5.js

@@ -3441,7 +3441,7 @@ Q5.PerlinNoise = class extends Q5.Noise {
 	}
 };
 Q5.modules.record = ($, q) => {
-	let rec, btn0, btn1, timer, formatSelect, qualitySelect;
+	let rec, btn0, btn1, timer, formatSelect, bitrateInput;
 
 	$.recording = false;
 
@@ -3476,6 +3476,7 @@ Q5.modules.record = ($, q) => {
 
 .rec button,
 .rec select,
+.rec input,
 .rec .record-timer {
 	font-family: sans-serif;
 	font-size: 14px;
@@ -3541,43 +3542,29 @@ Q5.modules.record = ($, q) => {
 		formatSelect.title = 'Video Format';
 		rec.append(formatSelect);
 
-		let qMult = {
-			min: 0.1,
-			low: 0.25,
-			mid: 0.5,
-			high: 0.75,
-			ultra: 0.9,
-			max: 1
-		};
-
-		qualitySelect = $.createSelect('quality');
-		for (let name in qMult) {
-			qualitySelect.option(name, qMult[name]);
-		}
-		qualitySelect.title = 'Video Quality';
-		rec.append(qualitySelect);
+		bitrateInput = $.createInput();
+		bitrateInput.title = 'Video Bitrate';
+		bitrateInput.style.width = '48px';
+		rec.append(bitrateInput);
 
 		rec.encoderSettings = {};
 
 		function changeFormat() {
 			rec.encoderSettings.mimeType = formatSelect.value;
 		}
 
-		function changeQuality() {
-			rec.encoderSettings.videoBitsPerSecond = maxVideoBitRate * qualitySelect.value;
+		function changeBitrate() {
+			rec.encoderSettings.videoBitsPerSecond = 1000000 * bitrateInput.value;
 		}
 
 		formatSelect.addEventListener('change', changeFormat);
-		qualitySelect.addEventListener('change', changeQuality);
+		bitrateInput.addEventListener('change', changeBitrate);
 
-		Object.defineProperty(rec, 'quality', {
-			get: () => qualitySelect.selected,
+		Object.defineProperty(rec, 'bitrate', {
+			get: () => bitrateInput.value,
 			set: (v) => {
-				v = v.toLowerCase();
-				if (qMult[v]) {
-					qualitySelect.selected = v;
-					changeQuality();
-				}
+				bitrateInput.value = v;
+				changeBitrate();
 			}
 		});
 
@@ -3592,15 +3579,10 @@ Q5.modules.record = ($, q) => {
 			}
 		});
 
-		let h = $.canvas.height;
-
-		if (h >= 1440 && rec.formats.VP9) rec.format = 'VP9';
-		else rec.format = 'H.264';
+		rec.format = 'H.264';
 
-		let maxVideoBitRate =
-			(h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 36 : h >= 1080 ? 28 : h >= 720 ? 22 : 16) * 1000000;
-
-		rec.quality = 'high';
+		let h = $.canvas.height;
+		rec.bitrate = h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 50 : h >= 1080 ? 32 : h >= 720 ? 26 : 16;
 
 		btn0.addEventListener('click', () => {
 			if (!$.recording) start();

src/q5-record.js

@@ -1,5 +1,5 @@
 Q5.modules.record = ($, q) => {
-	let rec, btn0, btn1, timer, formatSelect, qualitySelect;
+	let rec, btn0, btn1, timer, formatSelect, bitrateInput;
 
 	$.recording = false;
 
@@ -34,6 +34,7 @@ Q5.modules.record = ($, q) => {
 
 .rec button,
 .rec select,
+.rec input,
 .rec .record-timer {
 	font-family: sans-serif;
 	font-size: 14px;
@@ -99,43 +100,29 @@ Q5.modules.record = ($, q) => {
 		formatSelect.title = 'Video Format';
 		rec.append(formatSelect);
 
-		let qMult = {
-			min: 0.1,
-			low: 0.25,
-			mid: 0.5,
-			high: 0.75,
-			ultra: 0.9,
-			max: 1
-		};
-
-		qualitySelect = $.createSelect('quality');
-		for (let name in qMult) {
-			qualitySelect.option(name, qMult[name]);
-		}
-		qualitySelect.title = 'Video Quality';
-		rec.append(qualitySelect);
+		bitrateInput = $.createInput();
+		bitrateInput.title = 'Video Bitrate';
+		bitrateInput.style.width = '48px';
+		rec.append(bitrateInput);
 
 		rec.encoderSettings = {};
 
 		function changeFormat() {
 			rec.encoderSettings.mimeType = formatSelect.value;
 		}
 
-		function changeQuality() {
-			rec.encoderSettings.videoBitsPerSecond = maxVideoBitRate * qualitySelect.value;
+		function changeBitrate() {
+			rec.encoderSettings.videoBitsPerSecond = 1000000 * bitrateInput.value;
 		}
 
 		formatSelect.addEventListener('change', changeFormat);
-		qualitySelect.addEventListener('change', changeQuality);
+		bitrateInput.addEventListener('change', changeBitrate);
 
-		Object.defineProperty(rec, 'quality', {
-			get: () => qualitySelect.selected,
+		Object.defineProperty(rec, 'bitrate', {
+			get: () => bitrateInput.value,
 			set: (v) => {
-				v = v.toLowerCase();
-				if (qMult[v]) {
-					qualitySelect.selected = v;
-					changeQuality();
-				}
+				bitrateInput.value = v;
+				changeBitrate();
 			}
 		});
 
@@ -150,15 +137,10 @@ Q5.modules.record = ($, q) => {
 			}
 		});
 
-		let h = $.canvas.height;
-
-		if (h >= 1440 && rec.formats.VP9) rec.format = 'VP9';
-		else rec.format = 'H.264';
+		rec.format = 'H.264';
 
-		let maxVideoBitRate =
-			(h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 36 : h >= 1080 ? 28 : h >= 720 ? 22 : 16) * 1000000;
-
-		rec.quality = 'high';
+		let h = $.canvas.height;
+		rec.bitrate = h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 50 : h >= 1080 ? 32 : h >= 720 ? 26 : 16;
 
 		btn0.addEventListener('click', () => {
 			if (!$.recording) start();