最近公司有個項目，要可以看各個設備的實時視頻，本來在兩天內找了一些參考材料寫了一下，里面的鏈接都是對我開發很有啟發的帖子
方案來源參考
方案一: html5 + websocket_rtsp_proxy 實現視頻流直播
- 服務器安裝streamedian服務器
- 客戶端通過video標簽播放
缺點：收費的，免費版有很多限制
暫未嘗試
方案2 VLC插件
放棄，chrome不支持
方案3：ffmpeg + nginx + videojs，rtsp轉rtmp播放
rtmp的播放嚴重依賴flash，而由於flash本身的安全，現代瀏覽器大多禁用flash
所以需要結合nginx 作為流媒體服務器，在接收rtmp流的同時 轉發 flv 格式流出來
方案4 ffmpeg + video，rtsp轉hls播放
以下主要介紹一下我嘗試方案3和方案4的過程
方案 3 過程
nginx安裝
nginx-http-flv-module 模塊
nginx配置
可以通過nginx服務同時分發rtmp流和http-flv流。
rtmp {
server {
listen 1935;
application live {
live on;
}
application history {
live on;
}
application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 8s;
}
}
}
http {
......
server {
listen 8080;
server_name localhost;
location /live {
flv_live on;
chunked_transfer_encoding on; #open 'Transfer-Encoding: chunked' response
add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header 'Cache-Control' 'no-cache';
}
}
......
}
安裝ffmpeg
yum安裝
下載安裝
在window平台安裝nginx模塊
這個比較復雜，我還沒去嘗試，因為已經確定服務會部署在 centos 7 上
window安裝ffmpeg
https://zhuanlan.zhihu.com/p/118362010
Path添加環境變量
bin目錄下執行 ffmpeg –version 驗證安裝成功
ffmpeg推流 將rtsp轉為rtmp
1
我試了沒有成功
ffmpeg -i "rtsp://admin:a1234567@192.168.33.3:554" -vcodec copy -acodec copy -f flv "rtmp://127.0.0.1:1935/live/"
2
我試了沒有成功
ffmpeg -rtsp_transport tcp -i rtsp://admin:a1234567@192.168.33.3:554 -f flv -r 25 -s 1920*1080 -an rtmp://localhost:1935/live/
3
執行下面推流成功！ 讓他視頻轉rtmp
ffmpeg -rtsp_transport tcp -i rtsp://admin:a1234567@192.168.33.3:554 -vcodec h264 -f flv -an rtmp://localhost:1935/live/room
rtmp://localhost:1935/live/room
使用VLC測試可以正常播放
http部分配置
和上面的nginx.conf一樣，這個部分作用主要是轉發flv
location /live { flv_live on; chunked_transfer_encoding on; #open 'Transfer-Encoding: chunked' response add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; add_header 'Cache-Control' 'no-cache'; }
訪問可以下載無后綴類型文件
使用 flv.js 實現網頁播放
flv.js 構建出錯
直接下載js
問題：
使用 flv.js 過程產生的常見問題
使用flv
問題：
chrome自動播放失敗解決
flv.js 不支持rtmp視頻流
videojs播放rtmp流
提示 No compatible source was found for this video
解決方案：
1.將文件放到服務器上，就是別用本地文件的方式打開
方案 4 過程
該方案只要ffmpeg ,不需要nginx代理 http-flv ,但是播放端不好處理
ffmpeg 推流
ffmpeg -i "rtsp://admin:a1234567@192.168.33.3:554" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "C:/Users/HLF/Desktop/videojs/hls/test.m3u8"
VLC可以播放，但是播放完片段會暫停
問題：播放完片段后會卡住，不知道要怎么使它連續播放
視頻大小
25幀 360p （480x360）
1分鍾視頻大小 接近 3M