brooke/hls-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
Brooke Vibber 2023-03-30 11:46:39 -07:00
parent 10358547c9
commit 27d798f8a3
3 changed files with 98 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
fmp4-alt.html Normal file
View file

@ -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>

12
make-fmp4.sh
View file

@ -45,8 +45,8 @@ set -e
# Note use duration, not keyframe interval, for fragments,
# because all are keyframes!
ffmpeg -i $INFILE -an $VIDEO_MJPEG $AUDFLAGS -y fmp4.120p.mjpeg.mp4
ffmpeg -i $INFILE -an $VIDEO_MJPEG $AUDFLAGS -y fmp4.120p.mjpeg.mov
#ffmpeg -i $INFILE -an $VIDEO_MJPEG $AUDFLAGS -y fmp4.120p.mjpeg.mp4
#ffmpeg -i $INFILE -an $VIDEO_MJPEG $AUDFLAGS -y fmp4.120p.mjpeg.mov
# Playlist processing
php extract-playlist.php fmp4.audio.mpeg.mp3 > fmp4.audio.mpeg.mp3.m3u8
@ -68,7 +68,15 @@ MPEG_TRACK=audio.mpeg.mp3
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.vp9.mp4 > fmp4.vp9.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 480p.h264.mp4 > fmp4.h264.m3u8
php meta-playlist.php --lie fmp4 audio.opus.mp4 $MPEG_TRACK 480p.mpeg4.mp4 > fmp4.mpeg4.m3u8
php meta-playlist.php --lie=mp4v fmp4 audio.opus.mp4 $MPEG_TRACK 480p.mpeg4.mp4 > fmp4.mpeg4.mp4v.m3u8
php meta-playlist.php --lie=mp4v.20 fmp4 audio.opus.mp4 $MPEG_TRACK 480p.mpeg4.mp4 > fmp4.mpeg4.mp4v.20.m3u8
php meta-playlist.php --lie=mp4v.20.9 fmp4 audio.opus.mp4 $MPEG_TRACK 480p.mpeg4.mp4 > fmp4.mpeg4.mp4v.20.9.m3u8
php meta-playlist.php --lie fmp4 audio.opus.mp4 $MPEG_TRACK 288p.h263.3gp > fmp4.h263.3gp.m3u8
php meta-playlist.php --lie=h263 fmp4 audio.opus.mp4 $MPEG_TRACK 288p.h263.3gp > fmp4.h263.3gp.h263.m3u8
php meta-playlist.php --lie=s263 fmp4 audio.opus.mp4 $MPEG_TRACK 288p.h263.3gp > fmp4.h263.3gp.s263.m3u8
php meta-playlist.php --lie=3gp fmp4 audio.opus.mp4 $MPEG_TRACK 288p.h263.3gp > fmp4.h263.3gp.3gp.m3u8
php meta-playlist.php --lie=3gpp fmp4 audio.opus.mp4 $MPEG_TRACK 288p.h263.3gp > fmp4.h263.3gp.3gpp.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 120p.mjpeg.mp4 > fmp4.mjpeg.m3u8
php meta-playlist.php fmp4 audio.opus.mp4 $MPEG_TRACK 120p.mjpeg.mov > fmp4.mjpeg.mov.m3u8
php meta-playlist.php --lie fmp4 audio.opus.mp4 $MPEG_TRACK 120p.mjpeg.mp4 > fmp4.mjpeg.lie.m3u8

12
meta-playlist.php
View file

@ -3,7 +3,11 @@
$argv = $_SERVER['argv'];
$self = array_shift( $argv );
if ( ( $argv[0] ?? '' ) === '--lie') {
$lie = array_shift( $argv );
array_shift( $argv );
$lie = 'avc1.42e00a';
} elseif ( preg_match( '/^--lie=(.*)$/', $argv[0] ?? '', $matches ) ) {
array_shift( $argv );
$lie = $matches[1];
} else {
$lie = false;
}
@ -33,9 +37,9 @@ $videoCodecs = [
if ( $lie ) {
// These lies work on iOS 10 and iOS 16 too
$videoCodecs['mjpeg'] = 'avc1.42e00a';
$videoCodecs['h263' ] = 'avc1.42e00a';
$videoCodecs['mpeg4'] = 'avc1.42e00a';
$videoCodecs['mjpeg'] = $lie;
$videoCodecs['h263' ] = $lie;
$videoCodecs['mpeg4'] = $lie;
}