使用手機(jī)攝像頭實(shí)現(xiàn)視頻監(jiān)控實(shí)時(shí)播放
一、概述
視頻監(jiān)控實(shí)時(shí)播放的原理與目前較為流行的直播是一致的，所以采用直播的架構(gòu)實(shí)現(xiàn)視頻監(jiān)控實(shí)時(shí)播放，流程圖如下：
目前實(shí)時(shí)視頻流的傳輸協(xié)議有以下幾種：RTSP、RTMP、HLS、Http-flv。
安卓APP開發(fā)使用HBuilder，而HBuilder內(nèi)置了LivePusher直播推流控件，該控件使用了RTMP協(xié)議，所以暫時(shí)選擇使用RTMP協(xié)議
| 協(xié)議 | RTSP | RTMP | HLS | Http-flv |
|---|---|---|---|---|
| 實(shí)時(shí)預(yù)覽 | √ | √ | √ | √ |
| 實(shí)時(shí)回放 | √ | √ | √ | √ |
| 定位 | √ | √ | √ | × |
| 暫?；謴?fù) | √ | √ | √ | × |
| 視頻加密 | √ | × | √ | √ |
| 視頻格式 | H264/H265 | H264/H265 | H264 | H264/H265 |
| 音頻格式 | G711u, G711a, G726, MP2L2, AAC | AAC | AAC | AAC |
| 首屏?xí)r間 | 1秒 | 1秒 | 3~4秒 | 1秒 |
| 播放延遲 | 1秒 | 1秒 | 3~4秒 | 1秒 |
二、RTMP服務(wù)器搭建
RTMP服務(wù)器使用nginx+rtmp模塊搭建，linux下可以下載nginx源代碼+nginx-rtmp-module模塊重新編譯，windows下nginx編譯較為麻煩，可以下載nginx 1.7.11.3 Gryphon，然后再下載nginx-rtmp-module模塊進(jìn)行配置即可
相關(guān)軟件下載地址
nginx地址：https://github.com/nginx/nginx
nginx-rtmp-module地址：https://github.com/arut/nginx-rtmp-module/
nginx 1.7.11.3 Gryphon地址：http://nginx-win.ecsds.eu/download/nginx 1.7.11.3 Gryphon.zip
ffmpeg地址：https://ffmpeg.org/download.html
服務(wù)器搭建步驟
- 下載nginx 1.7.11.3 Gryphon后解壓到任意目錄，注意目錄中盡量不帶中文字符和空格
- 下載nginx-rtmp-module（直接從github clone或下載zip壓縮包），將nginx-rtmp-module目錄放到nginx的根目錄下，與conf目錄同級(jí)
- 將conf/nginx-win.conf復(fù)制一份，改名為nginx.conf
- 配置nginx.conf文件，增加rtmp的server，同時(shí)給http的server中增加路徑映射
- 啟動(dòng)nginx
- 打開http://localhost/stat查看狀態(tài)
- 使用ffmpeg進(jìn)行直播測(cè)試
nginx配置
在http段之前增加以下內(nèi)容：
rtmp {
server {
listen 1935;
application live {
live on;
record off;
publish_notify on;
#on_publish http://localhost:8080/newsweb/api/v1/rtmp/on_publish;
#on_publish_done http://localhost:8080/newsweb/api/v1/rtmp/on_publish_done;
#on_play http://localhost:8080/newsweb/api/v1/rtmp/on_play;
#on_play_done http://localhost:8080/newsweb/api/v1/rtmp/on_play_done;
}
application hls {
live on;
hls on; #是否開啟hls
hls_path temp/hls; #本地切片路徑
hls_fragment 8s; #本地切片長(zhǎng)度
publish_notify on;
#on_publish http://localhost:8080/newsweb/api/v1/rtmp/on_publish;
#on_publish_done http://localhost:8080/newsweb/api/v1/rtmp/on_publish_done;
#on_play http://localhost:8080/newsweb/api/v1/rtmp/on_play;
#on_play_done http://localhost:8080/newsweb/api/v1/rtmp/on_play_done;
}
}
}
在http->server下，location /段之前增加以下內(nèi)容：
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root nginx-rtmp-module/;
}
#HLS配置開始,這個(gè)配置為了`客戶端`能夠以http協(xié)議獲取HLS的拉流
location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
expires -1;
}
注：其中rtmp段中的on_publish、on_publish_done、on_play、on_play_done是事件觸發(fā)，當(dāng)直播開始、直播結(jié)束、觀看開始、觀看結(jié)束時(shí)，會(huì)觸發(fā)指定的URL，并將推流和觀看時(shí)的相關(guān)參數(shù)傳遞到相關(guān)URL上，如果HTTP返回的狀態(tài)碼不是200時(shí)表示鑒權(quán)失敗，會(huì)直接阻斷下一步的操作
直播測(cè)試
- 本地找一個(gè)mp4文件
- 使用在ffmpeg\bin目錄下執(zhí)行推流命令
- 使用ffplayer播放視頻
#推流地址解釋：rtmp://localhost:1935/live/home?p=v
#rtmp://為協(xié)議名
#localhost是域名
#1935為端口號(hào)，rtmp默認(rèn)為1935端口
#live為nginx.conf中配置的rtmp標(biāo)記
#home為指定字符串，生產(chǎn)環(huán)境中可以設(shè)置為設(shè)備ID或用戶ID
#?p=v是附加參數(shù)，用于鑒權(quán)和記錄直播開始使用
#ffmpeg推流測(cè)試：
ffmpeg.exe -re -i c:\ffmpeg\inputfile.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/live/home
#ffmpeg 拉流測(cè)試：
ffplay.exe rtmp://localhost:1935/live/home
三、安卓APP推流
安卓APP推流使用HBuilder的LivePusher直播推流控件，代碼如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-402399.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Video Example</title>
<script type="text/javascript">
var pusher = null;
// H5 plus事件處理
function plusReady(){
// 創(chuàng)建直播推流控件
pusher = new plus.video.LivePusher('pusher',{
url:'rtmp://172.16.70.182:1935/live/phone',
mode:'SD',
muted:false,
});
pusher.preview();
// 監(jiān)聽(tīng)狀態(tài)變化事件
pusher.addEventListener('statechange', function(e){
console.log('statechange: '+JSON.stringify(e));
}, false);
}
document.addEventListener('plusready', plusReady, false);
// 設(shè)置推流服務(wù)器
function updatePusher() {
var url= document.getElementById('pushurl').value;
pusher.setOptions({
url:url
});
}
// 開始推流
function startPusher() {
console.log(pusher)
pusher.start();
}
// 切換攝像頭
function switchCamera() {
pusher.switchCamera();
}
</script>
</head>
<body style="margin:0;padding:0;text-align:center;">
<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<input type="text" id="pushurl" value="rtmp://172.16.70.182:1935/live/phone" style="width: 500px;"/> <br><br>
<button onclick="updatePusher()">更新推流服務(wù)器</button>
<br/><br>
<button onclick="startPusher()">開始推流</button>
<br><br>
<button onclick="switchCamera()">切換攝像頭</button>
<br/><br/>
</body>
</html>
四、客戶端觀看直播
目前暫時(shí)使用VLC進(jìn)行視頻播放
VLC下載地址：https://www.videolan.org/vlc/文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-402399.html
到了這里，關(guān)于使用手機(jī)攝像頭實(shí)現(xiàn)視頻監(jiān)控實(shí)時(shí)播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
