欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

如何落地H5小程序直播開(kāi)發(fā) - 新聞資訊 - 云南小程序開(kāi)發(fā)|云南軟件開(kāi)發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開(kāi)發(fā)/軟件開(kāi)發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

如何落地H5小程序直播開(kāi)發(fā)

發(fā)表時(shí)間：2021-1-4

發(fā)布人：葵宇科技

瀏覽次數(shù)：51

大前端這幾年算是一個(gè)熱詞，對(duì)于前段來(lái)說(shuō)如果不是大前端，技術(shù)相對(duì)來(lái)說(shuō)就已經(jīng)算是落后了。如果還停留在對(duì)ES6，Vue這些基本技能的學(xué)習(xí)只能說(shuō)處于一個(gè)及格線。

如果想做的卓越必須必備另一些大前端技能，比如說(shuō)NodeJS，express.js, koaJs服務(wù)類，或者three.js這類3d數(shù)據(jù)圖像，還有二維圖像處理，比如d3,raphael, echart, 最后hls, flv視頻行業(yè)。

如果只會(huì)ES6,Vue，React, Webpack這只能算是前端，大前端是至少要掌握上面的一項(xiàng)技能的。這篇文章就是介紹大前端領(lǐng)域中的視頻直播。

本文主要講述的是H5前端部分，視頻音頻采集部分后面會(huì)但開(kāi)篇章來(lái)講。首先帶領(lǐng)大家快速實(shí)現(xiàn)一個(gè)直播系統(tǒng)，然后再講解其中的重要概念，話不多說(shuō)，直接開(kāi)擼。

工具安裝

這里主要講述mac系統(tǒng)的操作方法，windows系統(tǒng)會(huì)盡快補(bǔ)齊。

server是推流工具，tools里面有下面需要安裝的工具。

Mac安裝ffmpeg
  1. 首先需要安裝YASM，如果沒(méi)有安裝yasm的話，會(huì)報(bào)FFmpeg yasm/nasm not found or too old. Use --disable-yasm for a crippledbuild這個(gè)問(wèn)題，如果沒(méi)有安裝sdl的話，安裝完FFmpeg之后，bin目錄下沒(méi)有ffplay這個(gè)文件。

下載yasm;

// 可以在h5live中找到y(tǒng)asm
cd /h5live/tools/yasm-1.3.0
// 配置
./configure
// 編譯 & 安裝
 make
 sudo make install
復(fù)制代碼

下載sdl;

// 切可以在h5live中找到sdl目錄
cd /h5live/tools/SDL2-2.0.8
// 配置
./configure
// 編譯 & 安裝
make -j 16
sudo make install
復(fù)制代碼
// 切可以在h5live中找到ffmpeg，prefix為要安裝到的位置
cd /h5live/tools/ffmpeg-4.3
// 配置
./configure --prefix=/usr/local/ffmpeg --enable-debug=3 --enable-shared --disable-static
// 編譯 & 安裝
make -j 4 
sudo make install
復(fù)制代碼

設(shè)置ffmpeg軟連接, 相當(dāng)于環(huán)境變量，目的是為了在任何目錄都可以使用ffmpeg命令，/usr/local/ffmpeg-4.3/ffmpeg是安裝的路徑

ln -s /usr/local/ffmpeg-4.3/ffmpeg /usr/local/bin/ffmpeg
復(fù)制代碼
2.啟動(dòng)server

很簡(jiǎn)單，進(jìn)入h5live中server所在的目錄，運(yùn)行server程序即可。

cd /h5live/server
open server
復(fù)制代碼

可以看到這里提供了三種協(xié)議的路徑，分別是rtmp協(xié)議的1935接口，http-flv協(xié)議的7001端口和hls的7002端口。

3.執(zhí)行推流

找一個(gè)mp4格式的視頻文件，假設(shè)這個(gè)文件叫1.mp4，可以在1.map所在的文件夾下執(zhí)行下面的命令。

ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://127.0.0.1:1935/live/movie
復(fù)制代碼

出現(xiàn)下圖的效果就表示1.MP4這個(gè)視頻開(kāi)始進(jìn)行流推送了。

4.視頻驗(yàn)證

上面我們已經(jīng)說(shuō)了server工具提供三種協(xié)議的視頻流，分別是rtmp，http-flv以及hls。

可以使用VLC播放器驗(yàn)證rtmp協(xié)議的視頻流。

在里面粘貼入rtmp://127.0.0.1:1935/live/movie

然后就可以看到直播的效果了。

hls協(xié)議的流媒體可以使用蘋果瀏覽器直接打開(kāi)觀看。我們可以直接把http://127.0.0.1:7002/live/movie.m3u8放到蘋果瀏覽器的地址欄中查看效果。

至此我們的推流就做完了，在H5的直播開(kāi)發(fā)中，這些工作都是服務(wù)器，我們之所以演示這些是為了在實(shí)際的開(kāi)發(fā)中我們可以懂得直播的過(guò)程，可以快速的給出直播的解決方案。最主要的在服務(wù)還沒(méi)有開(kāi)發(fā)完成之前我們可以通過(guò)這樣的方式快速搭建一個(gè)推流系統(tǒng)，前端先開(kāi)發(fā)起來(lái)。

// RTMP，可以使用VLC播放器
rtmp://127.0.0.1:1935/live/movie
// FLV
http://127.0.0.1:7001/live/movie.flv
// HLS 可以使用蘋果瀏覽器訪問(wèn)
http://127.0.0.1:7002/live/movie.m3u8
復(fù)制代碼

H5端播放器

這里才是前端真正需要關(guān)心的部分，主要介紹我們?nèi)绾斡胘s去寫一個(gè)直播的播放器，選擇一些已有的最佳實(shí)踐是最穩(wěn)妥的，這樣可以快速的滿足業(yè)務(wù)需求，這里我們會(huì)介紹三款播放器，以及他們的使用。同樣這些代碼我也傳到了github上。

video.js是國(guó)外比較流行的視頻框架，他的特長(zhǎng)是做了非常好的自定義ui，符合線上成品的場(chǎng)景，除了自定義ui，還提供了很多插件，比如彈幕，快捷鍵，hls支持等等。他是一個(gè)比較完整的js框架，點(diǎn)播、直播都很合適，缺點(diǎn)是文件較大。

hls.js適合做hls協(xié)議的一款小巧的框架，同樣也是點(diǎn)播直播都可以。缺點(diǎn)是需要自己書(shū)寫UI樣式。video.js可以支持hls也是因?yàn)椴寮腔趆ls.js

flv.js是B站開(kāi)源的flv格式的播放器，如果是http-flv協(xié)議的直播用它是非常合適的。

至于rtmp在H5的直播中是不常用的，所以這里就不講了。

使用videojs開(kāi)發(fā)

在github找到videojshttps://github.com/videojs/video.js, 可以在這個(gè)網(wǎng)址中找到下面的兩個(gè)文件，下載下來(lái)放在我們本地。

在Video.js的插件文檔中存在大量的插件，我們可以從中找到自己需要的。https://videojs.com/plugins/

videojs-contrib-hls是一個(gè)支持hls直播的video插件。我們找到cdn, 將js保存到本地。使用方式很簡(jiǎn)單，只需要把插件的js引入進(jìn)來(lái)就可以了。

將video.min.js和videojs-contrib-hls.js以及video-js.min.css引入到頁(yè)面中，source標(biāo)簽的地址寫上我們hls的m3u8后綴地址。就可以了。

注意這里需要在服務(wù)器環(huán)境查看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
        <source
           src="http://127.0.0.1:7002/live/movie.m3u8"
           type="application/x-mpegURL">
      </video>
    <script src="video.min.js"></script>
    <script src="videojs-contrib-hls.js"></script>
    <script>
        var player = videojs('example-video');
        player.play();
    </script>
</body>
</html>
復(fù)制代碼

可以看到videojs幫我們處理好了ui問(wèn)題。是一款可以快速使用礦建。

使用hls.js開(kāi)發(fā)直播頁(yè)面

需要下載對(duì)應(yīng)hls代碼，可以去github中尋找，https://github.com/video-dev/hls.js。

使用方式也很簡(jiǎn)單，因?yàn)閔ls.js并沒(méi)有為我們提供UI樣式，所以我們只需要引入js即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video id="video" controls width="400" height="300"></video>
    <script src="hls.js"></script>
    <script>
        var video = document.getElementById('video');
        var videoSrc = http://www.wxapp-union.com/'http://127.0.0.1:7002/live/movie.m3u8';
        if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = http://www.wxapp-union.com/videoSrc;
        }
    </script>
</body>
</html>
復(fù)制代碼

HTTP-FLV

flv.js是B站開(kāi)源的一款flv播放器，可以說(shuō)是國(guó)人的驕傲，同樣使用起來(lái)非常簡(jiǎn)單。也是引入flv.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="flv.js"></script>
    <video id="videoElement" controls width="400" height="300"></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://127.0.0.1:7001/live/movie.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>
復(fù)制代碼

微信小程序直播

這里講述的是小程序的直播，默認(rèn)我這里認(rèn)為大家是有小程序開(kāi)發(fā)經(jīng)驗(yàn)的，所以如何創(chuàng)建小程序，安裝開(kāi)發(fā)者工具，調(diào)試等內(nèi)容就不說(shuō)了。

微信小程序直播使用的是媒體組件的live-player，并且他僅支持flv或者rtmp格式，這一點(diǎn)在前后端確認(rèn)技術(shù)方案時(shí)尤為重要。還有就是他只針對(duì)對(duì)應(yīng)行業(yè)開(kāi)放?？梢圆榭催@里連接https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

符合上述類目的小程序開(kāi)放，需要先通過(guò)類目審核，再在小程序管理后臺(tái)，「開(kāi)發(fā)」-「接口設(shè)置」中自助開(kāi)通該組件權(quán)限。

打開(kāi)這個(gè)權(quán)限之后，我們就可以使用小程序的live-player組件進(jìn)行直播開(kāi)發(fā)了。他的使用也非常簡(jiǎn)單。

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
復(fù)制代碼
Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})
復(fù)制代碼

這里需要注意的是，開(kāi)發(fā)者工具不能進(jìn)行直播調(diào)試，只能使用遠(yuǎn)程調(diào)試。連接我們的手機(jī)查看效果。live-player 默認(rèn)寬度300px、高度225px，可通過(guò)wxss設(shè)置寬高。

至此H5和小程序的直播開(kāi)發(fā)我們就說(shuō)完了，以上內(nèi)容已經(jīng)足夠大家完成工作中的直播開(kāi)發(fā)任務(wù)和可能出現(xiàn)的直播業(yè)務(wù)了。

接著我們會(huì)介紹一下直播的流程、協(xié)議以及基于nginx搭建一個(gè)直播服務(wù)。后面的內(nèi)容偏理論和服務(wù)。和前端關(guān)系不大可以跳過(guò)。

直播的流程

對(duì)于一個(gè)直播流程來(lái)說(shuō)首先是視頻音頻等媒體的采集，一般采集方有三種，PC端，安卓端以及IOS端，他們的工作也都是依賴攝像頭和麥克風(fēng)的。一般直播的人會(huì)選擇購(gòu)買專業(yè)的攝像頭和麥克風(fēng)。這里收集到的數(shù)據(jù)是流的格式，也就是二進(jìn)制的數(shù)據(jù)，這里的數(shù)據(jù)會(huì)經(jīng)過(guò)socket或者h(yuǎn)ttp上傳至服務(wù)器。

信息源采集之后第一個(gè)步驟是進(jìn)行編碼，因?yàn)椴杉降脑剂魇遣荒苤苯颖豢蛻舳诉M(jìn)行播放的，必須采用一定的協(xié)議去做編碼，一般視頻編碼采用H.264，音頻編碼一般是AAC。這兩種是直播行業(yè)最常見(jiàn)的編碼格式。

編碼之后一般可能會(huì)伴隨著字幕的疊加，當(dāng)然這個(gè)是不必須的是一個(gè)可有可無(wú)的過(guò)程。這里要說(shuō)的其實(shí)是對(duì)視頻的一些處理，可能添加水印之類的二次加工。

視頻和音頻處理之后就要進(jìn)行推流，也就是把視頻和音頻推送到服務(wù)器中，也就是我們上面使用ffmpeg將1.mp4推送的過(guò)程。

工作中服務(wù)器會(huì)將推送過(guò)來(lái)的流媒體經(jīng)過(guò)部署再把資源推到CDN上，一般我們靜態(tài)的資源或者多媒體資源都會(huì)發(fā)布到CDN來(lái)保證用戶體驗(yàn)和拉取的速度。

對(duì)于客戶端來(lái)說(shuō)是直接訪問(wèn)CDN的地址的，同樣這里的客戶端可能是PC, 安卓或者IOS的播放器。

以上就是一個(gè)簡(jiǎn)單的直播處理過(guò)程。

視頻的格式

一般我們常見(jiàn)的視頻格式是mp4，他的兼容性非常好，谷歌，火狐，蘋果，IE等瀏覽器都是支持的。webm是一種流式的視頻格式，常見(jiàn)于youtube網(wǎng)站，但是這種格式只有谷歌和火狐瀏覽器支持。

hls嚴(yán)格來(lái)說(shuō)他不是視頻格式，他是一種視頻協(xié)議，他的視頻格式是ts，為了好分辨一般我們叫他hls，這種格式是蘋果自身研究出來(lái)的，所以蘋果瀏覽器可直接支持，上面我們演示的時(shí)候hls是直接放在蘋果瀏覽器的地址欄可以直接播放的。

flv是早期flash的一種視頻格式，B站早起就采用的這種格式，即使現(xiàn)在B站也是支持H5播放器和flash播放器的。

直播協(xié)議

直播目前最常用的三種協(xié)議是HLS協(xié)議，RTMP協(xié)議和HTTP-FLV協(xié)議。HLS對(duì)應(yīng)的是hls格式的視頻也就是.ts。RTMP和HTTP-FLV都是對(duì)應(yīng)的flv格式的視頻。

HLS協(xié)議是最簡(jiǎn)單的也是最常用的，他是蘋果推出的一個(gè)直播協(xié)議，他的工作原理比較簡(jiǎn)單，H5一般通過(guò)video標(biāo)簽，從客戶端獲取一個(gè)M3U8索引文件，這個(gè)M3U8會(huì)直接放在video的src路徑中。

因?yàn)镸3U8是一個(gè)索引文件，他會(huì)被解析成很多的.ts片段，每一個(gè)片段就是一個(gè)直播流的分段。

瀏覽器的video標(biāo)簽在某個(gè)時(shí)間會(huì)再次請(qǐng)求m3u8，獲取新的直播流片段，這樣就實(shí)現(xiàn)了直播的實(shí)時(shí)播放，而發(fā)送這個(gè)m3u8的請(qǐng)求是瀏覽器自主的行為。

<body>
    <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
        <source
           src="http://127.0.0.1:7002/live/movie.m3u8"
           type="application/x-mpegURL">
      </video>
    <script src="video.min.js"></script>
    <script src="videojs-contrib-hls.js"></script>
    <script>
        var player = videojs('example-video');
        player.play();
    </script>
</body>
復(fù)制代碼

這是一個(gè)比較標(biāo)準(zhǔn)的直播協(xié)議，但是m3u8不一定包含了ts文件，也有可能嵌套了一層m3u8文件，也就是說(shuō)第一個(gè)拿到的m3u8文件里面還是m3u8文件。

如果當(dāng)前的m3u8里面包含了m3u8文件，那么當(dāng)前這個(gè)文件就叫master playlist。

如果當(dāng)前的m3u8文件里面包含的是ts, 那他就叫media playlists。

這種情況不常見(jiàn)，但是確實(shí)是存在的，我們需要額外注意一下。如果我們?cè)趯?shí)踐直播的時(shí)候拿到的流文件不播放，可能是播放器不支持這種嵌套。

m3u8分為動(dòng)態(tài)列表，靜態(tài)列表，全量列表。在直播行業(yè)基本是見(jiàn)不到靜態(tài)列表的，他只是存在標(biāo)準(zhǔn)中。

動(dòng)態(tài)列表主要用于直播的過(guò)程中，全量列表多用于點(diǎn)播，也就是錄播。m3u8的響應(yīng)結(jié)果就是一個(gè)文本文件。

第一行標(biāo)明了m3u8的版本，這個(gè)比較重要，因?yàn)樗苯由婕暗轿覀兊牟シ牌髦С值膆ls的版本，如果版本不支持，后面的一些指令可能就無(wú)法解析。

第二行是版本的聲明，默認(rèn)是3，第三行是默認(rèn)視頻的時(shí)長(zhǎng)，第四行是視頻流塊的個(gè)數(shù)，每次請(qǐng)求都會(huì)加1，再往下就是視頻的ts文件，前面的9.901是這個(gè)ts文件的時(shí)長(zhǎng)。這里決定了瀏覽器的video更新m3u8文件的時(shí)機(jī)。

靜態(tài)列表和動(dòng)態(tài)列表返回文件差不多，只是在第五行多添加了一個(gè)playlist-type值為event。其他的就沒(méi)什么區(qū)別了。

全量列表比動(dòng)態(tài)列表多了兩個(gè)東西，第一個(gè)是playlist-type值為vod，還有底部的ext-x-endlist代表結(jié)束，瀏覽器識(shí)別到這個(gè)字段就不會(huì)再發(fā)送請(qǐng)求了。

對(duì)于第一個(gè)ts文件，他會(huì)有一個(gè)PAT的包，這個(gè)PAT的包告訴我們要去找一個(gè)PMT的包，PMT會(huì)告訴我們所有的TS里面哪些是視頻TS哪些是音頻TS。很多TS組成一個(gè)叫做PES的東西。

瀏覽器像去解析一個(gè)視頻，首先要知道視頻幀和音頻幀，在第一個(gè)ts文件中會(huì)告訴瀏覽器，通過(guò)先找PAT, 再找PMT，再找TS文件，然后TS文件再按照視頻和音頻分類把相連的ts組成一個(gè)幀。

RTMP協(xié)議

RTMP是Real Time Messaging Protocol(實(shí)時(shí)消息傳輸協(xié)議)的首字母縮寫。該協(xié)議基于TCP, 是一個(gè)協(xié)議族，包括RTMP基本協(xié)議及RTMPT/RTMPS/RTMPE等多種變種。RTMP是一種設(shè)計(jì)用來(lái)進(jìn)行實(shí)時(shí)數(shù)據(jù)通信的網(wǎng)絡(luò)協(xié)議，主要用來(lái)在Flash,AIR平臺(tái)和支持RTMP協(xié)議的流媒體/交互服務(wù)器之間進(jìn)行音視頻和數(shù)據(jù)通信。

傳統(tǒng)的軟件和服務(wù)器之間的交互還是以RTMP為主，比如說(shuō)上文講的視頻音頻的采集以PC端為主，如果客戶端通過(guò)軟件的方式采集基本就是基于RTMP，如果采集端用的是H5他的協(xié)議一般是webrtc。這是兩種不同的技術(shù)方案。采集時(shí)RTMP傳輸過(guò)程中視頻也是flv格式的。這里需要注意一下。

HTTP-FLV協(xié)議

RTMP要比HLS協(xié)議用起來(lái)復(fù)雜一些因?yàn)樗腔赥CP協(xié)議的。HLS使用非常簡(jiǎn)單但他的實(shí)時(shí)性會(huì)差一些，也就說(shuō)他有延時(shí)，切片越多延時(shí)越大。HTTP-FLV結(jié)合了HLS的優(yōu)點(diǎn)也就是http請(qǐng)求然后又集合了RTMP低延時(shí)的特性。

HTTP-FLV和RTMP都是長(zhǎng)連接，傳輸?shù)母袷揭捕际莊lv，不同點(diǎn)在于他們和CDN的鏈接還有播放器的鏈接上，RTMP是TCP而HTTP-FLV是HTTP。

HTTP-FLV相對(duì)于RTMP優(yōu)勢(shì)有很多，比如可以在一定程度上避免防火墻的干擾，可以很好地兼容HTTP302跳轉(zhuǎn)，做到靈活調(diào)度，可以使用HTTPS做加密通道，可以很好的支持移動(dòng)端(安卓和IOS)。

#### Video標(biāo)簽介紹

這里我們補(bǔ)充一點(diǎn)video標(biāo)簽的知識(shí)，針對(duì)于大多數(shù)的前端開(kāi)發(fā)來(lái)說(shuō)，并沒(méi)有真正意義上的了解video標(biāo)簽，他的屬性，他的事件。很多人都停留在知道他是視頻標(biāo)簽，可以播放，暫停，調(diào)節(jié)音量，有個(gè)src屬性中。

這是很危險(xiǎn)的，Video標(biāo)簽是H5推出的一款功能十分強(qiáng)大的多媒體標(biāo)簽，可以說(shuō)他是網(wǎng)頁(yè)中媒體的未來(lái)。

標(biāo)簽屬性部分:

<video 
    src="test.map" 
    width="400" 
    height="225" 
    controls
    controlslist="nodownload nofullscreen" 
    poster="預(yù)覽圖" 
    autoplay
    muted
    loop
    preload
 ></video>
復(fù)制代碼

controls:底部控制條 controlslist:底部控制條定制 poster:預(yù)覽圖 autoplay: 自動(dòng)播放 muted: 靜音(移動(dòng)端非靜音的視頻是不允許自動(dòng)播放的，想要自動(dòng)播放一定要靜音) loop: 循環(huán)播放 preload: 預(yù)加載，每個(gè)瀏覽器表現(xiàn)不一致，尤其是移動(dòng)端，如果需要最好加上。

JS控制部分:

volume: 音量(0 - 1) currentTime: 設(shè)置獲取當(dāng)前播放時(shí)間，單位是秒，超清和高清分別是不同的地址，檔切換地址時(shí)需要定位時(shí)間。 src: 獲取視頻地址

video.volume = 0.5;
video.currentTime = 60;
video.src;
復(fù)制代碼

可以通過(guò)source標(biāo)簽兼容視頻地址出錯(cuò), 這種情況js需要使用currentSrc獲取當(dāng)前地址。

<video>
    <source src="./test.map" type="video/mp4"></source>
    <source src="./test2.map" type="video/mp4"></source>
</video>
復(fù)制代碼

video事件:

loadstart: 視頻開(kāi)始加載。 durationchange: 時(shí)長(zhǎng)變化，表示可以獲取視頻時(shí)長(zhǎng)了。 loadedmetadata: 當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時(shí)，會(huì)發(fā)生 loadedmetadata 事件 loadeddata: 當(dāng)前幀的數(shù)據(jù)已加載，但沒(méi)有足夠的數(shù)據(jù)來(lái)播放指定音頻/視頻的下一幀時(shí)，會(huì)發(fā)生 loadeddata 事件 progress: 當(dāng)瀏覽器正在下載指定的音頻/視頻時(shí)，會(huì)發(fā)生 progress 事件 canplay: 當(dāng)瀏覽器能夠開(kāi)始播放指定的音頻/視頻時(shí)，會(huì)發(fā)生 canplay 事件 canplaythrough: 當(dāng)瀏覽器預(yù)計(jì)能夠在不停下來(lái)進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時(shí)，會(huì)發(fā)生 canplaythrough 事件 play: 暫停狀態(tài)改變到播放狀態(tài)就會(huì)觸發(fā)play事件 seeking: 切換進(jìn)度條的時(shí)候會(huì)觸發(fā)的事件。 seeked: seeking之后下載完數(shù)據(jù)就會(huì)執(zhí)行。 waiting: 播放狀態(tài)時(shí)，seeking之后會(huì)觸發(fā)waiting。也就是播放狀態(tài)如果沒(méi)有足夠數(shù)據(jù)支撐播放就會(huì)waiting。 playing: 播放中狀態(tài)。 timeupdate: 播放時(shí)間更新的事件。 ended: 播放結(jié)束 error: 報(bào)錯(cuò)事件。

手動(dòng)搭建一個(gè)直播服務(wù)器

前面我們利用已經(jīng)集成好的server工具創(chuàng)建了一個(gè)直播的服務(wù)器，這里我們使用nginx手動(dòng)搭建一個(gè)類似的服務(wù)器，再來(lái)理解一下他的工作過(guò)程。

首先需要安裝nginx和ffmpeg工具。ffmpeg工具上面已經(jīng)有了安裝過(guò)程，nginx的安裝可以參考我之前的文章前端應(yīng)該了解的nginx

工具安裝完成之后我們開(kāi)始配置nginx。在在nginx.conf文件中配置，我們需要配置服務(wù)RTMP模塊，在配置文件的最底部新開(kāi)一個(gè)代碼塊叫rtmp，里面寫上監(jiān)聽(tīng)1935端口，視頻切片大小設(shè)置4000，也可以自行設(shè)置，然后配置一個(gè)rtmp的直播應(yīng)用rtmplive，在配置一個(gè)hls的直播應(yīng)用。

rtmp {
    server {
        # 監(jiān)聽(tīng)端口
        listen 1935;
        # 切片大小
        chunk_size 4000;
        # RTMP 直播流配置
        application rtmplive {
            # 開(kāi)啟直播
            live on;
            # 最大連接數(shù)
            max_connections 1024;
        }
        # hls直播流配置
        application hls {
            live on;
            hls on;
            # 分割文件存儲(chǔ)的位置
            hls_path /usr/local/var/www/hls;
            # hls分片大小
            hls_fragment 5s;
        }
    }
}
復(fù)制代碼

配置好這個(gè)之后需要在http模塊中配置訪問(wèn)位置。我們可以在server塊中增加location。

server {
    listen 8080;
    ...
    locaton /hls {
        # 聲明相應(yīng)類型, 也就是響應(yīng)頭
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        # 目錄指向我們r(jià)tmp塊中切片的目錄
        root /usr/local/var/www;
        # 禁止緩存
        add_header Cache-Control no-cache;
    }
}
復(fù)制代碼

至此我們nginx就配置完畢了，可以重啟nginx進(jìn)行測(cè)試。

nginx -s reload
復(fù)制代碼

同樣的，我們可以找到前面的那個(gè)1.mp4使用ffmpeg來(lái)推流。這里視頻采用libx264編碼，音頻采用aac編碼，做成flv推送到rtmp://localhost:1935/rtmplive/rtmp域名，這個(gè)1935就是我們?cè)O(shè)置rtmp的端口，rtmplive就是應(yīng)用名稱。

ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtmp
復(fù)制代碼

-i: 輸入 -vcodec: 視頻編碼 acodec: 音頻編碼 這個(gè)時(shí)候就開(kāi)始切割我們的視頻了，這個(gè)過(guò)程也就像是攝像頭實(shí)時(shí)獲取視頻的過(guò)程。

這是一個(gè)rtmp協(xié)議的直播流，我們可以使用vlc來(lái)播放，只要在file/open networks中輸入rtmp://localhost:1935/rtmplive/rtmp就可以播放了。

下面我們?cè)賮?lái)演示一下HLS的源文件制作，這里的ffmpeg命令基本相同，只是我們的路徑需要變一下。上面nginx配置了rtmplive和hls兩個(gè)。hls推流需要使用rtmp://localhost:1935/hls/stream, 這里的stream可以隨意起，不過(guò)這個(gè)名字關(guān)系都后面訪問(wèn)的地址。

ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream
復(fù)制代碼

這里的hls是http協(xié)議，我們之前在nginx的http協(xié)議中也增加了一個(gè)hls訪問(wèn)路徑。http的地址我們可以使用蘋果瀏覽器訪問(wèn)。也可以使用我們上面自己開(kāi)發(fā)的播放器訪問(wèn)。

http://localhost:8080/hls/stream.m3u8
復(fù)制代碼

http-flv的編譯比較復(fù)雜，我們這里就不過(guò)多介紹了。至此H5和小程序的直播我們就介紹完了。


作者：隱冬
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

相關(guān)案例查看更多