基于微信的HTML5直播

基礎(chǔ)溫習(xí)

大家可以先看一下我原來的一篇博文Red5-server流媒體服務(wù)器搭建及轉(zhuǎn)HLS格式這樣就很好理解我接下來的直播環(huán)境搭建了。

功能模塊概述

通過obs客戶端推流到nginx流媒體服務(wù)器上,對(duì)流媒體用ffmpeg將流剪切為若干段ts流文件并保存到臨時(shí)目錄中,通過訪問m3u8格式拼接ts流文件段來觀看直播。

推流端

采用開源工具OBS客戶端進(jìn)行推流

  • 根據(jù)項(xiàng)目的推流地址,填入OBS客戶端(下載地址)中,并設(shè)置場(chǎng)景,保存后重啟,便可開始推流。
    為更加穩(wěn)定的推流,建議使用以上鏈接中的v0.625穩(wěn)定版本,按提示安裝完成后,打開設(shè)定.在廣播設(shè)定中,伺服器統(tǒng)一填寫我們項(xiàng)目的流媒體接收流地址:
    rtmp://127.0.0.1:1935/hls/
    以上這幾個(gè)數(shù)據(jù)都是可以更改的。
    127.0.0.1——你的流媒體服務(wù)器ip
    1935——你的rtmp端口號(hào)
    hls——你的直播nginx配置模塊
    具體在下文中也有詳細(xì)介紹
    配置地址

回到主界面,右鍵來源,選擇添加視頻捕捉設(shè)備或獲取窗口等(相關(guān)設(shè)置默認(rèn)即可),點(diǎn)擊開始串流,便可開始直播。

添加場(chǎng)景

圖為添加視頻捕捉設(shè)備后的直播畫面:

直播中

流媒體服務(wù)器

  • Nginx接收推流模塊
rtmp_auto_push on;
rtmp {
    server {
        listen 1935; 
application hls {
            live on; 
            hls on; 
            hls_path /tmp/hls; 
            on_publish http://公網(wǎng)ip的項(xiàng)目地址/liveOnPublish; 
            on_publish_done http://公網(wǎng)ip的項(xiàng)目地址/liveOnDone; 
            notify_method get;
        }
}
}

配上我在word上的注解

注解1
  • Nginx處理直播流模塊
http {
server {
        listen  80; 
        server_name  localhost;
   location /hls  {
            secure_link $arg_st,$arg_e;
            secure_link_md5 key$arg_e; 
            subs_filter .ts '.ts?st=$arg_st&e=$arg_e&clentip=$remote_addr';
            subs_filter_types application/vnd.apple.mpegurl; 
            if ($secure_link = "") {
                 return 402;
            } 
            if ($secure_link = "0") {
                 return 403;
            } 
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp; 
            add_header Cache-Control no-cache;
        }
}
}
注解2

項(xiàng)目部署服務(wù)器

流媒體服務(wù)器不通過項(xiàng)目服務(wù)器,整個(gè)直播過程的推流和處理流都在流媒體服務(wù)器上進(jìn)行。項(xiàng)目服務(wù)器主要進(jìn)行直播地址加密處理意見推流開始和結(jié)束觸發(fā)的方法(liveOnPublish(),liveOnDone())已及對(duì)直播地址加密.

播放端

直接通過HTML5中的<video>標(biāo)簽設(shè)置src來播放直播流。如:

<video src="http://127.0.0.1/pro/live.m3u8?st=UM/L8jdfTlY2b1j1F6XSxA==&e=1468548530
" controls="controls"></video>

存在的問題

  • 延遲待測(cè)試(不科學(xué)的數(shù)據(jù)是安卓手機(jī)普遍在30-40s,蘋果手機(jī)在20-30s)
  • 并發(fā)待測(cè)試
  • 掉幀待測(cè)試(網(wǎng)速影響大,網(wǎng)絡(luò)好幾乎不掉幀,網(wǎng)絡(luò)差掉一半,用戶體驗(yàn)差)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容