視頻流

1.直播與點(diǎn)播

• 點(diǎn)播:從后端請(qǐng)求到MP4視頻,前端把地址放在video的src中實(shí)現(xiàn)播放
• 直播:1.獲取的是流數(shù)據(jù)2.要求實(shí)時(shí)性
  

2.視頻流形式

1. RTSP轉(zhuǎn)RTMP

底層基于 TCP，在瀏覽器端依賴 Flash,但是從2020底年開(kāi)始,谷歌已經(jīng)帶頭不支持flash插件了

2. RTSP轉(zhuǎn)HLS
   1. 后端將視頻轉(zhuǎn)成HLS流，以m3u8后綴結(jié)尾。通過(guò)瀏覽器用video.js可以正常播放，但是致命缺點(diǎn)是延遲高（10~30 秒），不符合項(xiàng)目的實(shí)時(shí)性需求，所以有實(shí)時(shí)視頻的需求不建議用HLS流播放。
3. RTSP轉(zhuǎn)FLV
   1. flv 分為 HTTP-FLV 和 WebSocket-FLV ,兩種方式都可,具體看需求
      

3.flv.js與mpegts.js

經(jīng)過(guò)以上的分析,現(xiàn)階段最適合最直播業(yè)務(wù)的為flv流,而它的缺點(diǎn)是前端 video 標(biāo)簽不能直接播放，需要經(jīng)過(guò)處理才行。不過(guò)沒(méi)關(guān)系,我們有flv.js!
flv.js是一個(gè)較成熟的前端處理flv格式的插件庫(kù)，是B站視頻的開(kāi)源插件。下面為示例代碼:

import flvjs from 'flv.js'
if (flvjs.isSupported()) {
  var videoPlayer = document.getElementById('video')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://test.stream.com/fetch-media.flv'
  })
  flvPlayer.attachMediaElement(videoPlayer)
  flvPlayer.load()
  flvPlayer.play()
}

但是flv依舊存在很多問(wèn)題,比如瀏覽器兼容性問(wèn)題,flv只支持包含 Chrome, FireFox, Safari 10, IE11, Edge版本的瀏覽器,對(duì)于Safari更高版本的瀏覽器是不提供支持的,且不能再ios上播放,而且對(duì)于實(shí)時(shí)性要求更高的需求,flv延遲還是顯得高了些,所以flv的作者xqq在后續(xù)推出了mpegts.js,是在flv的基礎(chǔ)上進(jìn)行了優(yōu)化,最佳情況下能達(dá)到 1 秒的極低延遲,且支持 Chrome、FireFox、Safari、Edge（舊版或 Chromium）或任何基于 Chromium 的瀏覽器,api也可以沿用flv.js的文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-581114.html

<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
    if (mpegts.getFeatureList().mseLivePlayback) {
        var videoElement = document.getElementById('videoElement');
        var player = mpegts.createPlayer({
            type: 'mse',  // could also be mpegts, m2ts, flv
            isLive: true,
            url: 'http://example.com/live/livestream.ts'
        });
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }
</script>

4.異常處理

// 監(jiān)聽(tīng)錯(cuò)誤事件
flvPlayer.on(flvjs.Events.ERROR, (err, errdet) => {
  // 參數(shù) err 是一級(jí)異常，errdet 是二級(jí)異常
  if (err == flvjs.ErrorTypes.MEDIA_ERROR) {
    console.log('媒體錯(cuò)誤')
    if(errdet == flvjs.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED) {
      console.log('媒體格式不支持')
    }
  }
  if (err == flvjs.ErrorTypes.NETWORK_ERROR) {
    console.log('網(wǎng)絡(luò)錯(cuò)誤')
    if(errdet == flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {
      console.log('http狀態(tài)碼異常')
    }
  }
  if(err == flvjs.ErrorTypes.OTHER_ERROR) {
    console.log('其他異常：', errdet)
  }
})

到了這里，關(guān)于Video(flv,mpegts)視頻流解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！