videojs-contrib-hlsは音ズレする
hlsライブストリーミング配信を行いたいと思います。今まではRTMPで配信video.jsを利用していました。ただ、最近ChromeではRTMPに対して制限がきつくなっているなどがあり、hlsへの切り替えを行いました。
そこでvideojs のvideojs-contrib-hlsを利用して配信したところ、長時間配信していると音ズレが目立つようになり、どうしても調整ができません。
VLC Playerではずれない
VLC Playerでm3u8ファイルを開き受信していると、特に音がずれる事はないのですが、videojs-contrib-hlsを利用して映像を長時間受信していると、だんだんと口の動きと、音声がずれてしまうのです。長時間受信すればするほどずれはひどくなります。
そこで、色々なwebプレーヤーを試しています。
今回のhls.jsは最高に素晴らしいパフォーマンスを持っている事が分かりました。
hls.jsを試すのは非常に簡単
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
webサーバにこのHTMLを貼り付けるだけ。あとは、
hls.loadSource
video.src
部分のm3u8 URLを自分の流したい映像に書き換えるだけで始める事ができます。
また、
if(Hls.isSupported()) {
により、JavaScript hls.jsがサポートされているか、機能するかを確認し、機能するようであれば、hls.jsスクリプトにより表示、サポートされていなければ、ブラウザが持っているHLS再生サポートを利用します。
機能も満載
オプションのマニュアルはこちらです。
[browser-shot url=”https://github.com/video-dev/hls.js/blob/master/docs/API.md” width=”600″ height=”450″ target=”_blank”]
画面サイズの調整
上記サンプルのまま利用すると、ビットレートにより自動調整され、配信映像の解像度によって、画面を占有して表示されます。小さいビットレート、小さい解像度で受信すると、小さい窓で映像が表示され、大きいビットレート、大きい解像度で映像を受信すると、その大きさで映像が流れます。
小さい解像度で受信しても画面一杯に広げて映像を受信したいです。その時はHTML5のVIDEOタグの方で調整します。
<video id="video" controls width="1280" height="720"></video>
サンプルのvideoタグをこのように書き換えると、サイズ1280×720で表示されます。また、controlsを表示しているので、画面最大化も可能です。その他、音量調整、m3u8に掲載されている範囲での早送り、巻き戻しも可能になります。
ビットレートの調整
hls.jsは、クオリティコントロール標準装備です。
帯域が狭いと小さいビットレートで映像を受信し、帯域が大きいと判断されるとその帯域に合わせてビットレートが調整され、最適な画質で映像再生が可能です。
その代わり、マニュアルで画質を選択する事は出来ません。
hls.js恐るべし
今まで、flowplayer や、HDPlayerなどを転々とめぐり、video.jsにたどりついたわけですが、hls.jsはそのベースになるソースコードであり、ビットレートの調整も自動で行われるところから、私の利用環境では最高に素晴らしいパフォーマンスです。
無料でここまでの事ができるので、お金を払って他何をするんだろうなって感じです。
hls.jsのインストール
自前の環境にhls.jsを置きたい場合はこのようにします。
git clone https://github.com/video-dev/hls.js.git npm install npm run build cd hls.js/dist/ mkdir /usr/local/nginx/html/live/hlsjs cp hls.min.js /usr/local/nginx/html/live/hlsjs/
これでhls.min.jsの準備が整いましたので、後はsrc=設定をhttps://cdn.jsdelivr.net/npm/hls.js@latestから変更すればＯＫです。hls.jsとhls.min.jsは同じもので、minがついているのは余計な改行などが省かれて最小ファイルサイズになっています。
<script src="../hlsjs/hls.min.js"></script>
<video id="video" controls width="1280" height="720"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://cloud.hanako.jp/hls/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://cloud.hanako.jp/hls/stream.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>ボリュームコントロール
ミュート機能は標準でついていますが、プレーヤーごとにボリュームコントロールしたい場合があります。その際には、少し追記してあげる必要があります。
<script src="../hlsjs/hls.min.js"></script>
<video id="video" controls width="1280" height="720"></video>
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://cloud.hanako.jp/hls/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://cloud.hanako.jp/hls/stream.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
<script>
function SetVolume(val)
{
var player = document.getElementById('video');
console.log('Before: ' + player.volume);
player.volume = val / 100;
console.log('After: ' + player.volume);
}
</script>これを追記する事で、ボリュームコントロールのスクロールバーが表示されます。
