Add fallback to MP4 for Safari

site/example.js

@@ -1,4 +1,5 @@
-import { InvisibleGlCanvas } from './gl-canvas.js';
+//import { InvisibleGlCanvas } from './gl-canvas.js';
+import { safari_hack_InvisibleGlCanvas } from './gl-canvas.js';
 import { HlsWorker } from './hls-worker.js';
 import shader from './greyscale-shader.js';
 
@@ -101,7 +102,8 @@ async function start() {
         // use glsl-canvas to make managing webgl stuff easier
         // because it's not visible, client dimensions are zero so we
         // need to substitute actual dimensions instead
-        gl_canvas = new InvisibleGlCanvas(document);
+        //gl_canvas = new InvisibleGlCanvas(document);
+        gl_canvas = new (await safari_hack_InvisibleGlCanvas())(document);
 
         // as an example, greyscale the stream
         gl_canvas.load(shader);
@@ -133,7 +135,6 @@ async function start() {
                         console.log(msg);
                         cleanup();
                     } else {
-                        console.error(msg);
                         cleanup(msg);
                     }
                 });

site/gl-canvas.js

@@ -1,8 +1,11 @@
 // Use glsl-canvas to make managing webgl stuff easier.
 import importUMD from './import-umd.js';
+//const { Canvas } = await importUMD('./glsl-canvas.min.js');
+export async function safari_hack_InvisibleGlCanvas() {
+
 const { Canvas } = await importUMD('./glsl-canvas.min.js');
 
-export class InvisibleGlCanvas extends Canvas {
+/*export*/ class InvisibleGlCanvas extends Canvas {
     constructor(document) {
         // Create a canvas for doing webgl
         const canvas = document.createElement('canvas');
@@ -42,3 +45,5 @@ export class InvisibleGlCanvas extends Canvas {
     }
 }
 
+return InvisibleGlCanvas; }
+

site/hls-worker.js

@@ -1,3 +1,6 @@
+const audioBitsPerSecond = 128 * 1000;
+const videoBitsPerSecond = 2500 * 1000;
+
 export class HlsWorker extends EventTarget {
     constructor(stream, ingestion_url, ffmpeg_lib_url) {
         super();
@@ -11,11 +14,22 @@ export class HlsWorker extends EventTarget {
 
         // set up video recording from the stream
         // note we don't start recording until ffmpeg has started (below)
-        const recorder = new MediaRecorder(stream, {
+        let recorder;
+        try {
+            recorder = new MediaRecorder(stream, {
                 mimeType: 'video/webm;codecs=H264',
-            audioBitsPerSecond:  128 * 1000,
-            videoBitsPerSecond: 2500 * 1000
+                audioBitsPerSecond,
+                videoBitsPerSecond
             });
+        } catch (ex) {
+            // on Safari only MP4 is available, assume ffmpeg.js has been configured for it
+            console.warn('Failed to record WebM, falling back to MP4');
+            recorder = new MediaRecorder(stream, {
+                mimeType: 'video/mp4',
+                audioBitsPerSecond,
+                videoBitsPerSecond
+            });
+        }
         recorder.onerror = onerror;
 
         // push encoded data into the ffmpeg worker