apps/streamana
1
0
Fork 0
mirror of https://github.com/davedoesdev/streamana.git synced 2025-10-13 01:03:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add fallback to MP4 for Safari

Browse Source
This commit is contained in:
David Halls
2021-05-29 08:37:37 +01:00
parent 82cfefec84
commit d157db2729
3 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
site/example.js
View File

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

7
site/gl-canvas.js
View File

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

24
site/hls-worker.js
View File

@@ -1,3 +1,6 @@
const audioBitsPerSecond = 128 * 1000;
const videoBitsPerSecond = 2500 * 1000;
export class HlsWorker extends EventTarget { export class HlsWorker extends EventTarget {
constructor(stream, ingestion_url, ffmpeg_lib_url) { constructor(stream, ingestion_url, ffmpeg_lib_url) {
super(); super();
@@ -11,11 +14,22 @@ export class HlsWorker extends EventTarget {
// set up video recording from the stream // set up video recording from the stream
// note we don't start recording until ffmpeg has started (below) // note we don't start recording until ffmpeg has started (below)
const recorder = new MediaRecorder(stream, { let recorder;
mimeType: 'video/webm;codecs=H264', try {
audioBitsPerSecond: 128 * 1000, recorder = new MediaRecorder(stream, {
videoBitsPerSecond: 2500 * 1000 mimeType: 'video/webm;codecs=H264',
}); 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; recorder.onerror = onerror;
// push encoded data into the ffmpeg worker // push encoded data into the ffmpeg worker