瀏覽器無插件播放rtsp流解決方案

1. 安裝 FFmpeg

參考 CentOS下安裝FFmpeg，特別詳細。

我遇到的錯誤和解決辦法：

• 缺少lame ffmpeg+libmp3lame庫源碼安裝教程（CentOS）

• make ffmpeg 時報acc相關，版本太高，安裝低版本
  Linux下FFmpeg安裝配置好后，使用中的一些問題

• make 時報if(x264_bit_depth>8) 錯誤，重裝新版本ffmpeg 帶有x264的ffmpeg編譯出現小錯誤

• 安裝新版本 FFmpeg 后，./configure 參數去掉 --enable-libnut

• 缺少 pkg-config 則需要安裝 Linux CentOS安裝pkg-config

• 編譯后的庫需要加環境變量，否則ffmpeg打不開，庫編譯后的默認地址在 /usr/local/lib。 export LD_LIBRARY_PATH 的使用

2. 安裝NGINX （帶rtmp模塊）

安裝和配置參考 使用nginx+nginx-rtmp-module+ffmpeg搭建流媒體服務器筆記（一） 。

/usr/sbin/nginx 是 docker nginx
/usr/local/nginx/sbin/nginx 是單獨新裝的nginx

完成之后使用博主的命令：

ffmpeg -i rtsp://admin:password@183.2.2.2:9204 -rtsp_transport tcp -acodec aac -strict experimental -ar 44100 -ac 2 -b:a 96k -r 25 -b:v 500k -s 640*480 -f flv rtmp://127.0.0.1:1935/myapp/test1

啟動失敗。報錯UDP timeout, retrying with TCP [rtsp @ 0x1431700] method PAUSE failed: 551 Option not supported。UDP 讀取超時，加 -rtsp_transport tcp 強制使用tcp讀取rtsp流 https://github.com/datarhei/restreamer/issues/3 。

命令： ffmpeg -rtsp_transport tcp -i rtsp://admin:password@183.2.2.2:9204 -c copy -f flv rtmp://127.0.0.1:1935/myapp/test1 成功運行之后，通過外網地址 rtmp://118.1.2.3:1935/myapp/test1 即可看到rtmp流。（外網端口需開啟訪問）

3. 轉換 hls

參考 使用nginx+nginx-rtmp-module+ffmpeg搭建流媒體服務器筆記（二），修改nginx配置，將rtmp流定向到文件中。

使用 ffmpeg 命令：ffmpeg -rtsp_transport tcp -i rtsp://admin:password@183.2.2.2:9204 -vcodec copy -acodec copy -vbsf h264_mp4toannexb -f flv rtmp://127.0.0.1:1935/hls/test2

http://118.1.2.3:81/hls/test2.m3u8 即可查看流。

4. 失敗的嘗試：h5播放m3u8

https://www.zhihu.com/question/21087379 使用了videojs封裝的 https://github.com/huangyaoxin/hLive 還是特別慢，瀏覽器一直打不開。VLC也特別慢。

5. 試試通過 websocket 的解決方案

本來計划嘗試

瀏覽器播放rtsp流媒體解決方案？

把rtsp轉換websocket再用video標簽就可以播放，可以參考mse技術方案
SpecForge/html5_rtsp_player

嘗試未果，放棄。

---

誤打誤撞，修改 nginx 配置，hls_fragment 1s; 頁面不再黑屏可以播放出來。

又發現了 chunk_size 設置分段大小 https://www.cnblogs.com/tinywan/p/6292357.html

偶爾可以播出來，繼續用 websocket 方法。

參考：html5播放rtsp方案，使用jsmpeg, 服務器端只有一個js文件websocket-relay.js（使用 node.js 將 ffmpeg 生成的mpeg數據轉到 websocket 服務）；客戶端展示使用一個js jsmpeg.min.js和 html view-stream.html 文件（js用來打開ws，並繪制canvas到頁面）。

最終顯示效果 +ie

命令: ffmpeg -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9204 -q 0 -f mpegts -b 50 -r 20 -ss 3 -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234 還是有點卡（請忽略里面奇怪的參數設置，為了傳輸的數據小，就亂試一些參數）， 而且沒聲音，但是證明了直接使用 websocket 方案可行。

6. 優化視頻傳輸速度

好好研究一下 FFmpeg 的參數。就是要找到使傳輸數據最小的參數。FFmpeg中文文檔 - 其實就是翻譯了FFmpeg的man手冊。

發現-q 參數，使用固定的質量品質(VBR)，其中值q取值在0.01-255,越小質量越好，拿來設置-q 200 視頻立馬就糊了，但是每秒都能動了。設置為-q 1（每次的bitrate=5800kbits/s 左右，導致傳輸太慢）

-q 50 比特率大小則為300+k

需要找個一個平衡點，優先正常傳輸（視頻大小）的最大清晰度（圖像質量）。-q 8時，大小在1000k/s，質量也可接受。有點卡的話可調成-q 9, 比特率維持在890k。

記錄當前命令：

ffmpeg -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9204 -f mpegts -r 20 -q 9 -an -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234

其中：-an 禁止音頻（因為當前不需要音頻，如果需要）, -r 20 幀率, -s 800/600 屏幕尺寸

7. 多路視頻傳輸

參考 html5播放rtsp方案 作者的 RtspWebSocket，修改了(https://github.com/phoboslab/jsmpeg) 中的js，使多個流對應到多個 websocket 服務。

最終配置和命令如下：

• node.js 啟動：node websocket-relay.js 1234 1936 82 監聽 mpeg 流的端口1936, ws 服務端口82

• 后台啟動 ffmpeg 轉視頻格式為 mpeg 到 1936 端口：

nohup ffmpeg  -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9201 -f mpegts  -r 20 -q 15 -an -s 800/600  -codec:v mpeg1video  http://127.0.0.1:1936/1234/1 &

nohup ffmpeg  -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9204 -f mpegts  -r 20 -q 15 -an -s 800/600  -codec:v mpeg1video  http://127.0.0.1:1936/1234/4 &

注：轉 m3u8 不需要 -rtsp_transport tcp 參數 ffmpeg -re -i http://v.warcraft.com/openlive/1a4ccf5dc3af4dc7a3c400f953fad089.m3u8 -f mpegts -r 20 -q 15 -an -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234/5

• 前台查看 （注：博客園可能會過濾script標簽，導致不能正常顯示代碼，所以script前加了空格）

  <canvas id="video-canvas"></canvas>
  < script type="text/javascript" src="jsmpeg.min.js"></script>
  < script type="text/javascript">
  var canvas = document.getElementById('video-canvas');
  var url = 'ws://118.1.2.3:82/4';
  var player = new JSMpeg.Player(url, {canvas: canvas});
  < /script>