H5 小程序直播教程，一看就會！
逆鋒起筆關(guān)注后回復編程pdf
轉(zhuǎn)自：隱冬 juejin.cn/post/6909479346646286343
大前端這幾年算是一個熱詞，對于前段來說如果不是大前端，技術(shù)相對來說就已經(jīng)算是落后了。如果還停留在對ES6，Vue這些基本技能的學習只能說處于一個及格線。
如果想做的卓越必須必備另一些大前端技能，比如說NodeJS，express.js, koaJs服務(wù)類，或者three.js這類3d數(shù)據(jù)圖像，還有二維圖像處理，比如d3,raphael, echart, 最后hls, flv視頻行業(yè)。
如果只會ES6,Vue，React, Webpack這只能算是前端，大前端是至少要掌握上面的一項技能的。這篇文章就是介紹大前端領(lǐng)域中的視頻直播。
本文主要講述的是H5前端部分，視頻音頻采集部分后面會但開篇章來講。首先帶領(lǐng)大家快速實現(xiàn)一個直播系統(tǒng)，然后再講解其中的重要概念，話不多說，直接開擼。
工具安裝
這里首先講述mac系統(tǒng)的操作方法，windows系統(tǒng)安裝方式在下面。需要的工具我已經(jīng)傳到的github上，可以自行下載。git地址：https://github.com/xiaoyindong/h5live)
server是推流工具，tools里面有下面需要安裝的工具。
Mac安裝ffmpeg
1.首先需要安裝YASM，如果沒有安裝yasm的話，會報FFmpeg yasm/nasm not found or too old. Use --disable-yasm for a crippledbuild這個問題，如果沒有安裝sdl的話，安裝完FFmpeg之后，bin目錄下沒有ffplay這個文件。
安裝yasm yasm：http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
// 可以在h5live中找到y(tǒng)asm
cd /h5live/tools/yasm-1.3.0
// 配置
./configure
// 編譯 & 安裝
make
sudo make install
安裝sdl ：http://libsdl.org/release/SDL2-2.0.8.tar.gz;
// 切可以在h5live中找到sdl目錄
cd /h5live/tools/SDL2-2.0.8
// 配置
./configure
// 編譯 & 安裝
make -j 16
sudo make install
安裝ffmpeg ：http://ffmpeg.org/download.html;
// 切可以在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
設(shè)置ffmpeg軟連接, 相當于環(huán)境變量，目的是為了在任何目錄都可以使用ffmpeg命令，/usr/local/ffmpeg-4.3/ffmpeg是安裝的路徑
ln -s /usr/local/ffmpeg-4.3/ffmpeg /usr/local/bin/ffmpeg
Windows 系統(tǒng)
FFmpeg程序進行各種媒體格式的轉(zhuǎn)換，使得它們可以在不同設(shè)備上播放。該程序只有命令行模式，因此將它安裝到計算機中看上去有點麻煩，但是只要根據(jù)本指南的方法，你只需要幾分鐘就可以將FFmpeg安裝成功！
下載 ffmpeg:
訪問下載頁面時，你將看到很多不同下載選項。你可以根據(jù)自己的操作系統(tǒng)選擇下載最新的32位或64位靜態(tài)程序版本。
c:\ffmpeg\bin, 俗稱配置環(huán)境變量。
2.啟動server
cd /h5live/server
open server
3.執(zhí)行推流
ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://127.0.0.1:1935/live/movie
4.視頻驗證
在里面粘貼入rtmp://127.0.0.1:1935/live/movie
然后就可以看到直播的效果了。
-
Mac 系統(tǒng)
-
Windows 系統(tǒng)
http://127.0.0.1:7002/live/movie.m3u8放到Safari瀏覽器的地址欄中查看效果。
// RTMP，可以使用VLC播放器
rtmp://127.0.0.1:1935/live/movie
// FLV
http://127.0.0.1:7001/live/movie.flv
// HLS 可以使用Safari瀏覽器訪問
http://127.0.0.1:7002/live/movie.m3u8
H5端播放器
使用videojs開發(fā)
https://github.com/videojs/video.js, 可以在這個網(wǎng)址中找到下面的兩個文件，下載下來放在我們本地。
https://videojs.com/plugins/
<!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>
使用hls.js開發(fā)直播頁面
https://github.com/video-dev/hls.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://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 = videoSrc;
}
</script>
</body>
</html>
HTTP-FLV
flv.js是B站開源的一款flv播放器，可以說是國人的驕傲，同樣使用起來非常簡單。也是引入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>
微信小程序直播
https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
Page({
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
})
直播的流程
視頻的格式
直播協(xié)議
<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>
RTMP協(xié)議
HTTP-FLV協(xié)議
#### Video標簽介紹
<video
src="test.map"
width="400"
height="225"
controls
controlslist="nodownload nofullscreen"
poster="預覽圖"
autoplay
muted
loop
preload
></video>
video.volume = 0.5;
video.currentTime = 60;
video.src;
可以通過source標簽兼容視頻地址出錯, 這種情況js需要使用currentSrc獲取當前地址。
<video>
<source src="./test.map" type="video/mp4"></source>
<source src="./test2.map" type="video/mp4"></source>
</video>
手動搭建一個直播服務(wù)器
rtmp {
server {
# 監(jiān)聽端口
listen 1935;
# 切片大小
chunk_size 4000;
# RTMP 直播流配置
application rtmplive {
# 開啟直播
live on;
# 最大連接數(shù)
max_connections 1024;
}
# hls直播流配置
application hls {
live on;
hls on;
# 分割文件存儲的位置
hls_path /usr/local/var/www/hls;
# hls分片大小
hls_fragment 5s;
}
}
}
server {
listen 8080;
...
locaton /hls {
# 聲明相應(yīng)類型, 也就是響應(yīng)頭
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
# 目錄指向我們rtmp塊中切片的目錄
root /usr/local/var/www;
# 禁止緩存
add_header Cache-Control no-cache;
}
}
至此我們nginx就配置完畢了，可以重啟nginx進行測試。
nginx -s reload
ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtmp
rtmp://localhost:1935/rtmplive/rtmp就可以播放了。
rtmp://localhost:1935/hls/stream, 這里的stream可以隨意起，不過這個名字關(guān)系都后面訪問的地址。
ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream
http://localhost:8080/hls/stream.m3u8
逆鋒起筆是一個專注于程序員圈子的技術(shù)平臺，你可以收獲最新技術(shù)動態(tài)、最新內(nèi)測資格、BAT等大廠大佬的經(jīng)驗、增長自身、學習資料、職業(yè)路線、賺錢思維，微信搜索逆鋒起筆關(guān)注！
小程序如何生成海報分享朋友圈
最受程序員歡迎的 20 本書！
macOS 12 內(nèi)置原生壁紙下載
抖音服務(wù)器帶寬有多大，為什么能夠供那么多人同時刷 ？
mini Project 微信小程序 120.50G 教程分享
如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~
評論
圖片
表情