2021年3月21日 星期日

[筆記]使用NAS實現RTSP to Web的方法 可用於IPcam (linux,golang)

最近的案子要將"hikvision"海康的IPcam影像直播串流到網頁上
由於Flash Player已經被淘汰，因此以前的VLC擴充元件已不適用。
另外還有手機、電腦可不裝擴充元件撥放的需求，因此採用HTML5可撥放m3u8的特性。
花了將近兩個禮拜時間，找尋方法。終於試到一個適用於我的方案。

首先說明一下架設的環境，IPcam的影像經由NAS的監控軟體(Surveillance Station)做接收，
接著利用內建的RTSP網址，傳送給RTSPtoWeb的proxy Server，
最後在網頁上找到m3u8的網址，再使用Html5的方式撥放出來。

整體而言，相當複雜。如有更好的方法，歡迎在底下留言給我，謝謝。

其中核心套件「RTSPtoWeb」是整個的重點。


一、安裝Golang
1.由於該套件需要於Golang的環境中執行，因此必須要安裝Golang。[1]

Golang有CPU版本的差異，先至官網(https://golang.org/dl/)查詢適合的版本。
以我的為例子(Armv8)，連入NAS的SSH後，下載Go並安裝:

wget https://golang.org/dl/go1.16.2.linux-arm64.tar.gz

2.將tar解壓縮
tar -C /var/XXXXX -xzf go1.16.2.linux-arm64.tar.gz
※其中XXXXX為你要的路徑

3.設定PATH路徑參數
export -p
export PATH=$PATH:/XXXXX/Go/bin

4.使用Nano編輯Profile檔案
sudo nano /etc/profile
進入後將這兩行貼到下面
export GOROOT=/XXXXX/go
export PATH=$PATH:$GOROOT/bin

5.存檔完後建議重開機

6.開完機輸入
go version
如果有版本資料跑出來，即表示安裝完成。


二、下載RstpToWeb

1.到Github將此套件下載下來，或是用git的方式下載

2.放到xxxxx/go/src/後，cd進入xxxxx/go/src/github.com/deepch/RTSPtoWeb/

3.要執行時只要打
sudo go run *.go &
其中發現，如無打&時，不會背景執行，將ssh關閉後服務隨即被關閉。
為了可以再背景中執行，找了很久的方法發現，只要最後面加上&即可。[2]

4.如執行成功，於網頁瀏覽器輸入「http://NAS的IP:8083」，應該可看到下圖畫面。

5.確認有之後，在右上角有個「Add stream」將影像串流加入。
(1)Stream name:任你取名
(2)Stream url: rstp串流網址
(3)Stream type:串流方式
此處建議選On demand，比較不吃資源

6.串流網址取得方式，如為群輝NAS，請參考：分享串流路徑
上面的RTSP是我們所要的網址，下方的是其他用途的(但是我不知道How to use)。
如果有大神了解下方的用法，麻煩留個言，謝謝!

7.輸入完畢後按下「Save stream」即可。



三、提取m3u8串流網址
播放視窗裡面有個"HLS"選項，這種撥放格式採m3u8的方式串流。

原作者於Github上提供的API為http://127.0.0.1:8083/stream/{STREAM_ID}/channel/{CHANNEL_ID}/hls/live/index.m3u8

實際使用F12抓到的網址是
先將這個網址記錄下來，待會會用到。

四、使用Html5顯示畫面

作者寫了一個http-streaming的JS，可參考[4]

(2021/03/24更新:以下為舊版程式，作者乙停止更新，請使用[4]最新版)
--------
參考了別人的作法[3]，將網址簡化為

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RTSP播放</title>
    <link href="./css/video-js-cdn.min.css" rel="stylesheet">
</head>
<body>

<video id="hls-video" width="400" height="240" class="video-js vjs-default-skin"
       playsinline webkit-playsinline
       autoplay controls preload="auto"
       x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
    <!-- 直播訊號源 -->
    <source src="http://IP位置:8083/stream/XXXX/channel/XXXXX/hls/live/index.m3u8" type="application/x-mpegURL">
</video>
<!--For mobile-->
<script src="./js/video.js"></script>
<!--For PC-->
<script src="./js/videojs-contrib-hls.js"></script>
<script>    
    var player = videojs('hls-video');
    player.play();
</script>
</body>
</html>

存成html並下載對應之css即js後，即可撥放。



參考資料：
[1]golang&linux群暉NAS環境安裝
https://www.youtube.com/watch?v=aGDjm5hUDaw&ab_channel=EricHo

[2]golang 另类方法后台运行程序（linux、windows）
https://blog.csdn.net/CodyGuo/article/details/53939291

[3]Web 前端如何播放 HLS(.m3u8) 视频
https://gist.github.com/ufologist/1ec2b820738a95b25cf7d805ed615949

[4]http-streaming
https://github.com/videojs/http-streaming
張貼者： 張貼時間：
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)