rtmp流媒體協議播放遇到的坑


前提:前端網頁是不能直接播放rtmp或rtsp直播流的。

項目中需要播放工場倉儲物流的實時監控攝像頭。經過各種調研,發現video.min.js+videojs-flash.min.js,再加上瀏覽器安裝了adobe flash播放器,則能完美實時播放rtmp視頻了。

但是用video.min.js也踩了個嚴重的坑,很多Bug都是這樣,不大,但愁人!

上次看一有趣的前端Bug,說一個前端開發人員一個Bug找了一個晚上,竟不知啥原因。描述是這樣,是個地圖項目,卻發現地圖怎么都出不來,就一個藍色背景,找了好久的原因百思不得姐阿,結果不小心拿水杯時碰到了鼠標滾輪,發現有了地圖區域,於是再滾再滾,地圖出來了,原來是后端人員隨便給了個定位點(0,0)導致放大定位到了大西洋,全是海,尼瑪真是一片藍!~

言歸正傳,今天遇到的播放rtmp流的坑,所以記錄下來。

上代碼:

changeRtmpUrl(data: any) {
  let src = data.src;
  if(this.player == null){
    this.player = window['videojs']('#asn_video', {
      fill: true
    });
   }
  //$('#asn_video source').attr('src', src);
   //this.player.src(src);
   this.player.src({ type : "rtmp/mp4", src : src });
  this.player.load();
  this.player.play();
}
 
我的是動態切換后台給返回的rtmp流地址,結果怎么切換不能播放,於是發現,看代碼紅色部分this.player.src(src);直接設置src函數的值為流地址是不行的,src函數中要設置為object,里面需要有流地址的src地址源,再加上type屬性則完美呈現。。。
 
后記:關於流媒體還沒有完,rtmp流創建了還是及時銷毀掉,否則會引起其他頁面的錯誤,有時間了再補充銷毀的文章了,希望對相關問題上的朋友有所幫助。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM