您好,登錄后才能下訂單哦!
小程序升級(jí)實(shí)時(shí)音視頻錄制及播放能力,開(kāi)放 Wi-Fi、NFC(HCE) 等硬件連接功能。同時(shí)提供按需加載、自定義組件和更多訪問(wèn)層級(jí)等新特性,增強(qiáng)了第三方平臺(tái)的能力,以滿足日趨豐富的業(yè)務(wù)需求。
為更高效地連接用戶與商家,小程序提供了實(shí)時(shí)音視頻錄制及播放組件。符合類(lèi)目要求的小程序自助開(kāi)通后,可自建或使用云服務(wù),實(shí)現(xiàn)單向、雙向甚至多向的音視頻功能,如在線授課、遠(yuǎn)程咨詢、視頻客服,以及多人會(huì)議等。
2017-12-26微信小程序推送了這樣一條消息,文檔,代碼也是簡(jiǎn)單的一筆帶過(guò),用戶需要自建或使用云服務(wù),實(shí)現(xiàn)單向、雙向甚至多向的音視頻功能。目前僅支持 flv, rtmp 格式。
本篇博客通過(guò)介紹使用nginx的rtmp模塊來(lái)使nginx服務(wù)支持rtmp協(xié)議,可以完成推流和播放的功能。
Linux (centos7),Nginx (openresty),nginx-rtmp-module
由于之前已經(jīng)安裝過(guò)了openresty,詳見(jiàn)博文。這里我們只需要安裝nginx-rtmp-module模塊即可。
下載并解壓模塊:
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
unzip master.zip
停止原來(lái)的Nginx服務(wù):
nginx -s stop
配置并編輯:
./configure --add-module=/home/nginx-rtmp-module-master
make
復(fù)制Nginx:
## 路徑根據(jù)自己軟件路徑自行配置
cp /home/openresty/build/nginx-1.11.2/objs/nginx /usr/local/openresty/nginx/sbin
配置rtmp服務(wù):
rtmp { #RTMP服務(wù)
server {
listen 1935; #//服務(wù)端口
chunk_size 4096; #//數(shù)據(jù)傳輸塊的大小
application vod {
play /opt/video; #//視頻文件存放位置。
}
application live{ #直播
live on;
}
}
}
檢查并啟動(dòng)服務(wù):
nginx -t
nginx
上傳一個(gè)視頻文件test.flv至/opt/video目錄。
下載一個(gè)VLC media player,工具欄-媒體-打開(kāi)網(wǎng)絡(luò)串流-網(wǎng)絡(luò),然后偶輸入網(wǎng)絡(luò)URL(rtmp://ip:port/vod/test.flv),點(diǎn)擊播放。
實(shí)時(shí)回看視頻服務(wù)器的配置:
events {
use epoll;# 選擇epoll模型可以達(dá)到最佳的IO性能
worker_connections 1024;
}
rtmp { #RTMP服務(wù)
server {
listen 1935; #//服務(wù)端口
chunk_size 4096; #//數(shù)據(jù)傳輸塊的大小
application vod {
play /opt/video; #//視頻文件存放位置。
}
application live{ #直播
live on;
hls on; #這個(gè)參數(shù)把直播服務(wù)器改造成實(shí)時(shí)回放服務(wù)器。
wait_key on; #對(duì)視頻切片進(jìn)行保護(hù),這樣就不會(huì)產(chǎn)生馬賽克了。
hls_path /opt/video/hls; #切片視頻文件存放位置。
hls_fragment 600s; #設(shè)置HLS片段長(zhǎng)度。
hls_playlist_length 10m; #設(shè)置HLS播放列表長(zhǎng)度,這里設(shè)置的是10分鐘。
hls_continuous on; #連續(xù)模式。
hls_cleanup on; #對(duì)多余的切片進(jìn)行刪除。
hls_nested on; #嵌套模式。
}
}
}
HTTP服務(wù):
server {
listen 80;
server_name rtmp.52itstyle.com;
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /home/nginx-rtmp-module-master/;
}
location / {
root html;
index index.html index.htm;
}
location /live { #這里也是需要添加的字段。
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /opt/video/hls;
expires -1;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
<live-pusher webviewId="push" url="rtmp://ip:port/live/itstyle"
mode="HD"
autopush ="true"
bindstatechange="statechange"
beauty = "10"
whiteness="10"
/>
手機(jī)打開(kāi)小程序頁(yè)面,進(jìn)行視頻推流服務(wù),稍后我們會(huì)在/opt/video/hls/itstyle 目錄下發(fā)現(xiàn)一些ts文件和index.m3u8文件。
注意 url中的itstyle可以隨便定義,相當(dāng)于一個(gè)房間標(biāo)識(shí)。
PC 直播是在 PC(windows/mac)上借助安裝的推流軟件 OBS(推薦)或者 XSplit 向RTMP視頻云的推流地址,推送經(jīng)過(guò)壓縮編碼現(xiàn)場(chǎng)活動(dòng)、教學(xué)、投影或者游戲等畫(huà)面,同時(shí)觀眾可以通過(guò)和推流地址相對(duì)應(yīng)的播放地址收看實(shí)時(shí)畫(huà)面。
PC 直播流程非常簡(jiǎn)單,主要步驟:
推薦閱讀:第三方推流工具使用指南
xiaozhibo.html:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>小直播</title>
<meta name="keywords" content="">
<meta name="description" content="小直播——直播分享">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no">
<script src="http://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
</head>
<body>
<div id="id_test_video" ></div>
<script type="text/javascript">
var player = new TcPlayer('id_test_video', {
"m3u8": "http://rtmp.52itstyle.com/live/itstyle002/index.m3u8",
"autoplay" : true,//iOS下safari瀏覽器,以及大部分移動(dòng)端瀏覽器是不開(kāi)放視頻自動(dòng)播放這個(gè)能力的
"coverpic" : "https://blog.52itstyle.com/usr/uploads/2017/12/2652725976.jpg",
"width" : '480',//視頻的顯示寬度,請(qǐng)盡量使用視頻分辨率寬度
"height" : '320'//視頻的顯示高度,請(qǐng)盡量使用視頻分辨率高度
});
</script>
</body>
</html>
跨域問(wèn)題crossdomain.xml放置在網(wǎng)站根目錄:
<cross-domain-policy>
<allow-access-from domain="*.qq.com" secure="false"/>
</cross-domain-policy>
測(cè)試訪問(wèn)地址:http://rtmp.52itstyle.com/xiaozhibo.html
參考文檔:
http://www.cnblogs.com/zx-admin/p/5783523.html
https://cloud.tencent.com/document/product/267
https://github.com/arut/nginx-rtmp-module/wiki/Directives#rtmp
作者: 小柒
出處: https://blog.52itstyle.com
分享是快樂(lè)的,也見(jiàn)證了個(gè)人成長(zhǎng)歷程,文章大多都是工作經(jīng)驗(yàn)總結(jié)以及平時(shí)學(xué)習(xí)積累,基于自身認(rèn)知不足之處在所難免,也請(qǐng)大家指正,共同進(jìn)步。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。