微信小程序直播怎么開(kāi)發(fā),本篇教程帶你了解小程序直播開(kāi)發(fā)中的秘密。
大家有沒(méi)有發(fā)現(xiàn),小程序直播的方式在我們身邊的會(huì)議、客戶服務(wù)、約會(huì)中應(yīng)用得越來(lái)越多……看到這些,不少開(kāi)發(fā)者就著急了:怎樣才能開(kāi)發(fā)出例如小程序直播、小程序在線語(yǔ)音客服、小程序視頻會(huì)議等等服務(wù)?
其實(shí),這些玩得很6的小程序直播,都少不了它的支持——
2017年下半年,微信6.5.21版本支持在線音視頻功能。開(kāi)發(fā)者可以通過(guò)兩個(gè)音視頻組件<live-pusher>和 <live-player>實(shí)現(xiàn)實(shí)時(shí)地在線直播、視頻通話、語(yǔ)音通話等功能。
本期小程序課,微信開(kāi)發(fā)哥將詳細(xì)為大家介紹一下音視頻組件在線直播和視頻通話這兩個(gè)應(yīng)用場(chǎng)景。
在線直播該怎么做?
1、在線直播的應(yīng)用場(chǎng)景有哪些?
在游戲直播、遠(yuǎn)程授課、以及企業(yè)內(nèi)部的培訓(xùn)分享等場(chǎng)景中,都可能會(huì)用到在線直播功能,直播的應(yīng)用場(chǎng)景可以遍及各行各業(yè)。
比如微信電競(jìng)是一款游戲直播產(chǎn)品,以小程序?yàn)楫a(chǎn)品呈現(xiàn)方式。
比如在醫(yī)療行業(yè),專家醫(yī)師往往需要全國(guó)各地飛進(jìn)行學(xué)術(shù)交流和培訓(xùn),出差本身耽誤了醫(yī)生大量時(shí)間,在線遠(yuǎn)程授課能大大減少這里的時(shí)間耗用。
小程序中的 <live-pusher> 和 <live-player> 兩個(gè)組件 ,都有一個(gè)叫做live ( <live-pusher> 中對(duì)應(yīng) mode 屬性為 SD, HD, FHD)的模式,專門(mén)為在線直播而設(shè)計(jì),通過(guò)小程序的音視頻接口的live 模式,可以實(shí)現(xiàn)上述應(yīng)用場(chǎng)景。
2、在線直播的內(nèi)部原理是什么?
主播端使用 <live-pusher> ,它在微信小程序的內(nèi)部是一個(gè)推流引擎,它負(fù)責(zé)對(duì)手機(jī)攝像頭和麥克風(fēng)的數(shù)據(jù)進(jìn)行采集和編碼,并通過(guò) url 參數(shù)指定的 rtmp 推流地址上傳到云端。
云端的作用類似信號(hào)放大器,它負(fù)責(zé)將來(lái)自主播端的一路音視頻流數(shù)據(jù)進(jìn)行放大,將數(shù)據(jù)實(shí)時(shí)并且無(wú)差異的負(fù)責(zé)并擴(kuò)散到全國(guó)各地,從而解決主播和觀眾端之間距離太遠(yuǎn)(比如,跨地區(qū)和跨運(yùn)營(yíng)商)的問(wèn)題。
觀眾端使用 <live-player> 進(jìn)行播放,它在小程序的內(nèi)部是一個(gè)在線播放器,負(fù)責(zé)從云端實(shí)時(shí)拉取音視頻數(shù)據(jù)并進(jìn)行解碼和渲染。由于云端的放大效應(yīng),每一個(gè)觀眾都能在離自己比較近的云服務(wù)器上拉取到實(shí)時(shí)且流暢的音視頻流。
3、我怎么用小程序?qū)崿F(xiàn)在線直播?
step1:開(kāi)通一個(gè)云直播服務(wù)(比如 騰訊云 ),或者自己搭建一個(gè)rtmp服務(wù)器(例如 nginx-rtmp 服務(wù))。
step2:生成推流 url ,推流地址一般以 “rtmp://” 打頭,比如 rtmp://8888.livepush.myqcloud.com/live/8888_test 就是一個(gè)典型 rtmp 推流 Url。
step3:為你的小程序增加一個(gè) <live-pusher> 標(biāo)簽,并將 url 參數(shù)指定為你在 step2 中生成的推流 url。
step4:生成推流 url 和播放地址,推流一般都是 rtmp:// 打頭的 url,而播放地址則有兩種選擇,分別是 “rtmp://” 開(kāi)頭的 rtmp 播放協(xié)議,“http://” 打頭和“.flv”結(jié)尾的的 http-flv 播放協(xié)議,推薦使用后者,因?yàn)檫@種播放地址各個(gè)云廠商都優(yōu)化的比較好。
step5:為你的小程序增加一個(gè) <live-player> 標(biāo)簽 ,并將 src 參數(shù)指定為你在 step4 中生成的播放 url。同時(shí), <live-player> 的 mode 參數(shù)請(qǐng)指定為 live, orientation 和 object-fit 屬性可以用于調(diào)整畫(huà)面布局, min-cache 和 max-cache 則可以用于控制觀眾跟主播之間的延時(shí)大小,推薦的設(shè)置是 min-cache = 2, max-cache = 5。
關(guān)于在線直播,你會(huì)有這樣的疑問(wèn)
1、時(shí)延太高是怎么回事?
在線直播的延時(shí)跟播放協(xié)議和播放器參數(shù)有很大的關(guān)系, <live-player> 的 min-cache 和 max-cache 用于控制播放器端的最小時(shí)延和最大時(shí)延。其中,這里所說(shuō)的“最小”和“最大”是根據(jù)觀眾端當(dāng)時(shí)的網(wǎng)絡(luò)情況而定的,如果網(wǎng)絡(luò)情況比較好,那么播放器的時(shí)延就會(huì)趨向于 min-cache,而如果網(wǎng)絡(luò)情況比較差,那么播放器的時(shí)延就會(huì)趨向于 max-cache。
另外,rtmp 協(xié)議 和 http-flv 協(xié)議的播放地址延時(shí)一般比較低,而 hls(m3u8)協(xié)議的延時(shí)則相對(duì)較高。
2、主播網(wǎng)絡(luò)不好怎么辦?
在一場(chǎng)直播過(guò)程中,如果觀眾端的網(wǎng)絡(luò)不好,那么觀看體驗(yàn)僅僅影響到當(dāng)前觀眾;如果主播的網(wǎng)絡(luò)不好,那么所有觀眾的觀看體驗(yàn)都會(huì)很糟糕。因此主播的上行網(wǎng)絡(luò)質(zhì)量很重要,如果主播的上行網(wǎng)絡(luò)質(zhì)量不理想,比如時(shí)好時(shí)壞,或者上行小水管,不足以支持基本的直播需求,有兩種辦法可以解決問(wèn)題:
一種辦法是設(shè)置 <live-pusher> 的 min-bitrate 參數(shù),比如 400kbps, 這樣一來(lái),當(dāng)主播網(wǎng)絡(luò)不給力的時(shí)候, <live-pusher> 就會(huì)給主播的編碼器發(fā)送降低畫(huà)質(zhì)的命令,通過(guò)降低編碼器吐出的數(shù)據(jù)量來(lái)給主播的網(wǎng)絡(luò)減負(fù)。但這種辦法產(chǎn)生的副作用也非常明顯,就是主播的畫(huà)質(zhì)會(huì)變差。
另一種方法則是借助 <live-pusher> 的 NET_BUSY 通知進(jìn)行 UI 上的告警提示, <live-pusher> 在主播上行網(wǎng)速不給力時(shí)會(huì)通過(guò) onPushEvent 通知拋出 PUSH_WARNING_NET_BUSY(1101) 事件,這個(gè)時(shí)候你可以提示主播通過(guò)靠近路由器或者切換 4G 的方法來(lái)改善當(dāng)前的網(wǎng)絡(luò)質(zhì)量。
3、HLS(m3u8)協(xié)議為什么播放不了?
微信小程序在最早期的版本中就集成了 <video> 標(biāo)簽,該標(biāo)簽即可播放 HLS(m3u8)協(xié)議的播放地址,但是此種播放協(xié)議的時(shí)延一般都在 20 秒以上,所以如果對(duì)時(shí)延要求較高,則推薦使用 <live-player> 標(biāo)簽播放 http-flv 協(xié)議的直播地址。
視頻通話,你也能開(kāi)發(fā)
1、小程序 + 視頻通話有什么優(yōu)勢(shì)?
我們可以發(fā)現(xiàn)目前保險(xiǎn)行業(yè)會(huì)通過(guò)現(xiàn)場(chǎng)定損的方式處理車(chē)險(xiǎn)理賠,這種方式需要派定損員驅(qū)車(chē)前往事發(fā)地點(diǎn)進(jìn)行損傷判定,每次的出車(chē)成本非常高。
如果要采用遠(yuǎn)程電話解決,保險(xiǎn)公司無(wú)法簡(jiǎn)單通過(guò)語(yǔ)音溝通確認(rèn)損傷程度,而且照片采集很難規(guī)避定車(chē)騙保的可能,所以**實(shí)時(shí)的視頻通話**可以解決這種問(wèn)題。
小程序中 <live-pusher> 和 <live-player> 兩個(gè)組件 ,都有一個(gè)叫做 RTC 的模式,通過(guò)這種模式,可以在小程序?qū)崿F(xiàn)實(shí)時(shí)視頻通話。
2、視頻通話的內(nèi)部原理是什么?
<live-pusher> 和 <live-player> 兩個(gè)組件的 RTC 模式,主要是實(shí)現(xiàn)端到端能夠以很低的時(shí)延傳輸音視頻數(shù)據(jù)。
這樣一來(lái),視頻通話的雙方 A 和 B 就可以各自拉通一路方向相反的音視頻鏈路,從而實(shí)現(xiàn) A 和 B 之間的雙向低延時(shí)的音視頻數(shù)據(jù)傳輸。與此同時(shí),RTC 模式還會(huì)開(kāi)啟內(nèi)置的 AEC (回聲抑制),避免通話的雙方會(huì)因?yàn)楸镜佧溈孙L(fēng)對(duì)播放器的聲音進(jìn)行二次采集而引起的回聲問(wèn)題。
3、我怎么用小程序?qū)崿F(xiàn)視頻通話?
step1:開(kāi)通一個(gè)云直播服務(wù)(比如 騰訊云 ),或者自己搭建一個(gè)rtmp服務(wù)器(例如 nginx-rtmp 服務(wù))。
step2:生成兩對(duì) rtmp 推拉流 url :一對(duì)是用于 A 端推流的 push_url_a 和 用于播放 A 端視頻的 play_url_a;另一對(duì)是用于 B 端推流的 push_url_b 和 用于播放 B 端視頻的 play_url_b;
step3:A端添加一個(gè) <live-pusher> 標(biāo)簽,指定 mode 為 RTC,并將 url 輸定設(shè)定為 push_url_a。
step4:A端添加一個(gè) <live-player> 標(biāo)簽,指定 mode 為 RTC,并將 src 輸定設(shè)定為 play_url_b。
step5:B端添加一個(gè) <live-pusher> 標(biāo)簽,指定 mode 為 RTC,并將 url 輸定設(shè)定為 push_url_b。
step6:B端添加一個(gè) <live-player> 標(biāo)簽,指定 mode 為 RTC,并將 src 輸定設(shè)定為 play_url_a。
關(guān)于視頻通話,你會(huì)有這樣的疑問(wèn)
1、通話時(shí)延太高了怎么辦?
小程序的 RTC 模式解決了雙向或者多人實(shí)時(shí)音視頻通話在終端所需要的各項(xiàng)技術(shù)組件,但是通話線路本身可能也會(huì)引入很高的延時(shí),所以要確保視頻通話的 A 和 B 雙方所使用的 rtmp 線路要有很低的時(shí)延。
如果是自己搭建rtmp服務(wù)器(例如 nginx-rtmp 服務(wù)),請(qǐng)檢查 nginx-rtmp 的服務(wù)端參數(shù)設(shè)置,確保不要在服務(wù)器端引入太多音視頻數(shù)據(jù)緩存。
如果是使用騰訊云的超低延時(shí)線路,那么要注意給 RTC 模式下的 <live-player> 傳遞帶防盜鏈簽名的播放 url。
對(duì)比項(xiàng)目 | 示例 | 時(shí)延 |
普通直播URL | rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc | >2s |
超低延時(shí) URL | rtmp://3891.liveplay.myqcloud.com/live/3891_test_clock_for_rtmpacc?bizid=bizid&txTime=5FD4431C&txSerect=20e6d865f462dff61ada209d53c71cf9 | < 500ms |
2、感覺(jué)畫(huà)面很卡應(yīng)該如何處理?
小程序的 RTC 模式主要用于視頻通話,由于這類場(chǎng)景以交流為重,所以小程序會(huì)有限保證聲音的流暢,相應(yīng)的,視頻數(shù)據(jù)的發(fā)送會(huì)被放在第二優(yōu)先級(jí)上。因此,如果網(wǎng)絡(luò)有波動(dòng),小程序會(huì)舍棄尚未發(fā)送出去的視頻數(shù)據(jù),優(yōu)先保障音頻數(shù)據(jù)的發(fā)送。
所以如果在 RTC 模式下,建議不要給 <live-pusher> 設(shè)置太高的畫(huà)質(zhì),也就是不要將 min-bitrate 和 max-bitrate 設(shè)置的太大,一般而言,推薦 min-bitrate 設(shè)置為 300kbps, max-bitrate 設(shè)置為 800kbps,即可滿足常規(guī)視頻通話的需求。