由於國內網絡環境十分惡劣,各大廠商都不同程度的對video標籤進行了劫持,比如騰訊的所謂X5內核,UC更是一塌糊塗.使安卓和IOS系統環境下原本已經完美的video播放視頻流成了很頭疼的問題.
特別是安卓環境,基本上是沒有一個瀏覽器支持用video播放直播視頻流,有也是諸多問題.
爲了兼容這些瀏覽器.無需app也能觀看直播,所以在各種比較下,jsmpeg脫穎而出.
將mpeg-ts解碼至canvas,但同樣不兼容的還是uc這個越來越惡劣的瀏覽器.
打開jsmpeg的demo頁,你會覺得很流暢很完美,實際上這是個錯覺,因爲視頻頁使用的服務器上已存在的ts文件,播放時通過流方式加載到瀏覽器,和普通看視頻沒有任何區別.
但是,但是,但是!
直播不同點播,我們需要用websocket,因爲它只支持mpeg-1 ts解碼,這意味着常見的flv hls rtmp等等協議方案都不支持.
然而websocket意味着數據是片段進出,觀看也會斷斷續續一卡一頓的!
不信且看demo代碼:
網頁端:
<!DOCTYPE html>
<html>
<head>
<title>測試</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="/demo/jsmpeg.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('video-canvas');
var url = 'ws://0.0.0.0(你服務器ip):8082';
var player = new JSMpeg.Player(url, {canvas: canvas});
//下方爲了移動端出聲音
function onUnlocked () {
player.volume = 1
document.removeEventListener('touchstart', onTouchStart)
}
function onTouchStart () {
player.audioOut.unlock(onUnlocked)
document.removeEventListener('touchstart', onTouchStart)
}
// try to unlock immediately
player.audioOut.unlock(onUnlocked)
// try to unlock by touchstart event
document.addEventListener('touchstart', onTouchStart, false)
</script>
<a href='javascript:onUnlocked()'>播放</a>
</body>
</html>
服務器端:直接用jsmpeg自帶的
node websocket-relay.js test 8081 8082
推流就用ffmpeg推最方便:
fmpeg -i /test/123.mp4 -f mpegts -codec:v mpeg1video -bf 0 -codec:a mp2 -q 4 http://localhost:8081/test
最後在移動端播放的時候,簡直是回到了2G看視頻網站的時代…
所以爲了避免像我一樣鑽研十天半月兼容方案的,特意寫了本文.
看到這裏,你以爲結束了.
實際上,纔剛開始.因爲我正要對jsmpeg源碼動手.將視頻流無縫處理,實現與demo頁上直接播放ts文件一樣的流暢效果.
實際上,作爲中國開發者,非常的不容易.搜點東西還得翻牆也就罷了,各種技術文檔還是同一篇文章到處轉載甚至連作者版權都不聲明.