H5超級播放器+FFmpeg實現攝像頭線上檢視

RiverYoung發表於2020-11-12
H5播放器

一、H5播放器，使用騰訊雲 Web 超級播放器 TCPlayerLite

       TCPlayerLite 是為了解決在手機瀏覽器和 PC 瀏覽器上播放音視訊流的問題，它使的視訊內容可以不依賴使用者安裝 App，就能在朋友圈和微博等社交平臺進行傳播。

基礎知識

對接前需要了解如下基礎知識：

    • 直播和點播
      直播視訊源是實時的，一旦主播停播，直播地址就失去意義，而且由於是實時直播，所以播放器在播直播視訊的時候是沒有進度條的。
      點播視訊源是某個伺服器上的檔案，只要檔案沒有被提供方刪除，就可以隨時播放， 而且由於整個視訊都在伺服器上，所以播放器在播點播視訊的時候是有進度條的。

    • 協議支援
      TCPlayerLite 的視訊播放能力本身不是網頁程式碼實現的，而是靠瀏覽器支援，所以其相容性不像我們想象的那麼好，因此，不是所有的手機瀏覽器都能有符合預期的表現。一般用於網頁直播的視訊源地址是以 M3U8 結尾的地址，我們稱其為 HLS (HTTP Live Streaming)，這是蘋果推出的標準，目前各種手機瀏覽器產品對這種格式的相容性也最好，但它有個問題：延遲比較大，一般是20s - 30s左右的延遲。

    • 對於 PC 瀏覽器，因為其目前還沒有拋棄 Flash 控制元件，而 Flash 控制元件支援的視訊源格式較多，並且瀏覽器上的 Flash 控制元件都是 Adobe 自己研發，所以相容性很好。

      視訊協議用途URL 地址格式PC 瀏覽器移動瀏覽器
      HLS（M3U8） 可用於直播 http://xxx.liveplay.myqcloud.com/xxx.m3u8 支援 支援
      HLS（M3U8） 可用於點播 http://xxx.vod.myqcloud.com/xxx.m3u8 支援 支援
      FLV 可用於直播 http://xxx.liveplay.myqcloud.com/xxx.flv 支援 不支援
      FLV 可用於點播 http://xxx.vod.myqcloud.com/xxx.flv 支援 不支援
      RTMP 只適用直播 rtmp://xxx.liveplay.myqcloud.com/live/xxx 支援 不支援
      MP4 只適用點播 http://xxx.vod.myqcloud.com/xxx.mp4 支援 支援

 

二、（直播推流）

從視訊直播的通訊協議可以看出，適合做直播的只有HLS 和 FLV格式。

這裡我們選擇海康的網路攝像頭進行是實戰。

海康的網路攝像頭支援（RTSP）推流，推流地址如下：

1、老版本

URL規定：

rtsp://username:password@<ipaddress>/<videotype>/ch<number>/<streamtype>

注：VLC可以支援解析URL裡的使用者名稱密碼，實際發給裝置的RTSP請求不支援帶使用者名稱密碼。

 

 

 

 

舉例說明：

DS-9016HF-ST的IP通道01主碼流：

rtsp://admin:12345@172.6.22.106:554/h264/ch33/main/av_stream

DS-9016HF-ST的模擬通道01子碼流：

rtsp://admin:12345@172.6.22.106:554/h264/ch1/sub/av_stream

DS-9016HF-ST的零通道主碼流（零通道無子碼流）：

rtsp://admin:12345@172.6.22.106:554/h264/ch0/main/av_stream

DS-2DF7274-A的第三碼流：

 rtsp://admin:12345@172.6.10.11:554/h264/ch1/stream3/av_stream


2、新版本

URL規定：

rtsp://username:password@<address>:<port>/Streaming/Channels/<id>(?parm1=value1&parm2-=value2…)

注：VLC可以支援解析URL裡的使用者名稱密碼，實際發給裝置的RTSP請求不支援帶使用者名稱密碼。

 

詳細描述：

舉例說明：

DS-9632N-ST的IP通道01主碼流：

rtsp://admin:12345@172.6.22.234:554/Streaming/Channels/101?transportmode=unicast

DS-9016HF-ST的IP通道01主碼流：

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/1701?transportmode=unicast

DS-9016HF-ST的模擬通道01子碼流：

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/102?transportmode=unicast

(單播)

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/102?transportmode=multicast

(多播)

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/102 (?後面可省略，預設單播)

DS-9016HF-ST的零通道主碼流（零通道無子碼流）：

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/001

DS-2DF7274-A的第三碼流：

rtsp://admin:12345@172.6.10.11:554/Streaming/Channels/103

 

注：前面老URL，NVR（>=64路的除外）的IP通道從33開始；新URL，通道號全部按

順序從1開始。

三、下載FFmepg

 
（ffmpeg官網快捷通道：http://ffmpeg.org/）下載地址一：https://github.com/BtbN/FFmpeg-Builds/releases
   ffmpeg 命令參考：https://www.cnblogs.com/eguid/p/10195559.html
下載完成後，解壓，直接在資料夾地址輸入cmd ，如下圖：

1、m3u8 模式輸出，直接輸出到指定目錄（IIS 站點目錄），如下在cmd介面輸入命令：

ffmpeg -rtsp_transport tcp -i "rtsp://admin:密碼@192.168.11.64:554/h264/ch33/main/av_stream" -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -s 216x384 -b 1024k -y C:\Users\xxxx\Desktop\KB\channel101.m3u8

　　

 

2、執行成功後，ffmepg會對rstp推流進行切片儲存（命令說明請自行百度ffmepg說明文件）效果如下：

 

 在目錄生成HLS直播檔案（檔案如何使用，後續說明）如下，至此，攝像頭rtsp轉hls流完成。

 

 

 3、同樣，rtsp轉flv，執行如下命令即可：

ffmpeg -i rtsp://admin:密碼@192.168.11.64:554/h264/ch33/main/av_stream -vcodec h264 -f flv -acodec aac -ac 2 C:\Users\xxx\Desktop\KB\eguid.flv

效果如下，指令會在目錄生成flv流檔案

 

 

 至此：視訊轉換完成，下面，讓我們開始起飛，讓視訊流能夠通過web播放器輸出。

 

 四、web播放器檢視視訊流

1、（前面的視訊流媒體檔案已經輸出到IIS目錄，當然IIS裡面已經新增flv,m3u8 的mime型別）

 

 2、IIS目錄建立index.html 插入如下程式碼：

TCPlayerLite 播放器的具體用法，請點自行檢視：https://cloud.tencent.com/document/product/454/7503

<body style="margin:0;padding:0">
    <script src="jquery-1.8.3.min.js" charset="utf-8"></script>
    <script src="TcPlayer-2.3.3.js" charset="utf-8"></script>
    <div id="id_test_video"></div>

    <script type="text/javascript">

        

        $(document).ready(function () {
            //var w = $(this).width();
            //var h = $(this).height();
            //$("#id_test_video").css({ style: "width:" + w + "px;height:" + h + "px;" });
            var player = new TcPlayer('id_test_video', {
                "live": true,
                listener: function (e) {
                    console.log(e);
                    if (e.type == 'error' || e.type == 'ended') {
                        window.setTimeout(function () {
                            player.load();//進行重連
                            player.play();
                        }, 3000);
                    }
                },
                "controls": "none",
                "m3u8": "http://192.168.11.122:808/channel101.m3u8?t="+Math.random(),
                //"flv": "http://192.168.11.122:808/eguid.flv", //增加了一個 flv 的播放地址，用於PC平臺的播放 請替換成實際可用的播放地址
                //"autoplay" : true,      //iOS 下 safari 瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的
                "poster": { "style": "cover", "src": "start.png" },
                width: 695,
                height:391
            });
            $(this).click(function () {
                player.play();
            });
        });
    </script>

</body>

3、瀏覽器，或者手機瀏覽器輸入地址，期待已久的畫面出現了，一切完美！

 

 4、至此，幾十行程式碼，輕鬆搞定網路攝像頭H5播放；當然，離商業應用還有很長道路要走！

 

 

 

 

 

相關文章