原理

流程如下：

1.資料採集：
攝像機及拾音器收集視訊及音訊資料，此時得到的為原始資料
涉及技術或協議：
攝像機：CCD、CMOS
拾音器：聲電轉換裝置（咪頭）、音訊放大電路
2.前處理：
主要處理美顏、水印、模糊等效果。美顏功能幾乎是直播的標配功能
3.資料編碼：
使用相關硬體或軟體對音視訊原始資料進行編碼處理（數字化）及加工（如音視訊混合、打包封裝等），得到可用的音視訊資料
涉及技術或協議
編碼方式：
⑴：CBR
⑵：VBR
編碼格式：
⑴：視訊：H.265、H.264、MPEG-4等，封裝容器有TS、MKV、AVI、MP4等
⑵：音訊：G.711μ、AAC、Opus等，封裝有MP3、OGG、AAC等
4.解碼資料：

所用協議介紹：
1、RTMP(Real Time Messaging Protocol，實時訊息傳送協議)
2、RTSP(Real Time Streaming Protocol，實時流傳輸協議)
3、RTP(Real-time Transport Protocol，實時傳輸協議)

特別說明：以上是視訊直播的一個大概技術開發介紹，本文不介紹上面的技術與協議，只介紹如何在通過第三方直播雲平臺（如京東直播雲平臺，阿里雲直播雲平臺）獲取到已經處理好的rtmp資料流後在web前端展示

開發

技術選擇：video.js（這裡選擇v5.18.4版本，6.0版本以上就不支援flash了，所以不能用6.0以上版本）
傳輸流協議選擇：rtmp

1.靜態顯示

html：

<script src="./custom/video/video.min.js"></script>
<link href="./custom/video/video-js.css" rel
 
="stylesheet">



<video id="my-video" class="video-js" controls preload="auto" width="640" height="300"  
 poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}">  
    <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">  
    <p class="vjs-no-js">播放視訊需要啟用 JavaScript，推薦使用支援HTML5的瀏覽器訪問。  
      To view this video please enable JavaScript, and consider upgrading to a web browser that  
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>  
    </p>  
 </video>  

2.動態顯示

html：

<script src="./custom/video/video.min.js"></script>
<link href="./custom/video/video-js.css" rel="stylesheet">

<video id="container" class="video-js vjs-big-play-centered"  width="700" height="450" controls preload="auto"></video>

js：

//初始化視訊
let player = videojs('container',{
  //像data-setup那樣設定的引數
},function onPlayerReady(){
  //視訊播放器初始化完畢，就會呼叫這個回撥函式
  this.src({
    src: "rtmp流地址",
    type:'rtmp/flv'
  });
});

3.動態重新整理與過載

//重新整理時需要先登出video.js，很重要，否則會報錯
if($("#container").length > 0) {
    let player = videojs('container');
    player.dispose();
  }


//過載
let player =  videojs("container");  //初始化視訊
//重置video的src
player.src({
  src: "新的rtmp流地址",
  type:'rtmp/flv'
});
player.load();
player.play();

參考