wip

2023-03-30 11:46:39 -07:00 · 2023-03-30 11:46:39 -07:00 · 27d798f8a3
commit 27d798f8a3
parent 10358547c9
3 changed files with 98 additions and 6 deletions
--- a/fmp4-alt.html
+++ b/fmp4-alt.html
@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset=utf-8>
+        <title>HLS VP9/fMP4 test</title>
+        <link rel=stylesheet type=text/css href=video-js/video-js.css>
+    </head>
+    <body>
+        <h1>HLS VP9/fMP4 test</h1>
+
+        <h2>Caminandes - Llamigos</h2>
+
+        <ul>
+            <li><a href="fmp4-codecs.html">see codec variants</a></li>
+            <li><a href="fmp4-tracks.html">see component track list</a></li>
+        </ul>
+
+        <h3>With fallbacks</h3>
+
+        <p>HLS with VP9 (.mp4)/MJPEG (.mov) video tracks and Opus/MP3 audio tracks. Custom MSE wrapper enabled to provide HLS-over-MSE for Mac Safari/Chrome/Firefox.</p>
+        <div>
+            <video controls width=640 height=360>
+                <source type=application/vnd.apple.mpegurl src=fmp4.vp9-mjpeg.mov.m3u8>
+            </video>
+        </div>
+
+        <script type="text/javascript">
+            if (typeof MediaSource !== 'undefined') {
+
+                async function process(video) {
+                    let vp9 = 'video/mp4; codecs="vp09.00.41.08"';
+                    let opus = 'audio/mp4; codecs="opus"';
+                    let mp3 = 'audio/mpeg';
+
+                    // Temporary hack, just load the full tracks
+                    let videoTracks = [
+                        { type: vp9, src: 'fmp4.480p.vp9.mp4' },
+                    ];
+                    let audioTracks = [
+                        { type: opus, src: 'fmp4.audio.opus.mp4' },
+                        { type: mp3, src: 'fmp4.audio.mpeg.mp3' },
+                    ];
+
+                    let videoTrack = videoTracks.filter(({type}) => MediaSource.isTypeSupported(type))[0];
+                    let audioTrack = audioTracks.filter(({type}) => MediaSource.isTypeSupported(type))[0];
+                    
+                    if (!videoTrack || !audioTrack) {
+                        throw new Error('error no tracks');
+                    }
+                    console.log(videoTrack);
+                    console.log(audioTrack);
+
+                    let videoBytes = await (await fetch(videoTrack.src)).arrayBuffer();
+                    // hackhack
+                    videoBytes = videoBytes.slice(0, 878148 + 779);
+                    let audioBytes = await (await fetch(audioTrack.src)).arrayBuffer();
+
+                    let source = new MediaSource();
+                    source.addEventListener("sourceopen", (event) => {
+                        source.duration = 150; // hack
+                        let videoBuffer = source.addSourceBuffer(videoTrack.type);
+                        let audioBuffer = source.addSourceBuffer(audioTrack.type);
+                        videoBuffer.appendBuffer(videoBytes);
+                        audioBuffer.appendBuffer(audioBytes);
+                        console.log('appended.');
+                    });
+                    video.addEventListener('error', (event) => {
+                        console.log('video error?', video.error);
+                    });
+                    video.src = URL.createObjectURL(source);
+                    console.log('opening...');
+                }
+
+                for (let video of document.querySelectorAll('video')) {
+                    process(video);
+                }
+            }
+        </script>
+    </body>
+</html>