共计 2508 个字符，预计需要花费 7 分钟才能阅读完成。
导语：最近钻研了一下网页直播流的原理以及实现，当初就目前的实现办法做一个总结。
目录
- 直播流媒体协定
- 拉流与推流
- Node 服务搭建
- 前端播放页面
- OBS 推流配置
直播流媒体协定
先来理解一下根本的直播流媒体协定。
http-flv,rtpm
| 协定 / 特点 | 开发者 | 原理 | 长处 | 毛病 |
|---|---|---|---|---|
| http-flv | Abode | 通过服务器把 flv 下载到本地缓存，而后通过 NetConnection 本地连接播放 | 节俭服务器耗费 | 保密性差 |
| rtmp | Abode | 通过 NetConnection 连贯到服务器，实时播放服务器的 flv | 保密性好 | 耗费服务器资源 |
| rtsp | 哥伦比亚大学、网景和 RealNetworks | 管制具备实时个性的数据的发送，依赖传输协定 | 实时成果十分好 | 实现简单 |
| hls | 苹果公司 | 包含一个 m3u(8)的索引文件，TS 媒体分片文件和 key 加密串文件，不将 TS 切片文件存到磁盘，而是存在内存当中 | 极大缩小了磁盘的 I / O 次数，缩短了服务器磁盘的使用寿命，极大进步了服务器运行的稳定性 | 会生成大量的文件，存储或解决这些文件会造成大量资源节约 |
拉流与推流
推流，指的是把采集阶段封包好的内容传输到服务器的过程。
拉流, 指服务器已有直播内容，用指定地址进行拉取的过程。
Node 服务搭建
- 装置依赖包
这次应用 node-media-server 包，来搭建，获取更多请拜访。
mkdir live
cd live
npm init -y
npm i node-media-server引入包，编写配置文件
// server.js
const nodeMediaServer = require('node-media-server');
const config = {
rtmp: {
port: 3001,
chunk_size: 6000,
gop_cache: true,
ping: 30,
ping_timeout: 60
},
http: {
port: 3002,
allow_origin: "*"
}
}
const nms = new nodeMediaServer(config);
nms.run();启动当前会输出一下内容
D:\live>node server.js
2021/8/22 14:52:19 9588 [INFO] Node Media Server v2.3.8
2021/8/22 14:52:19 9588 [INFO] Node Media Rtmp Server started on port: 3001
2021/8/22 14:52:19 9588 [INFO] Node Media Http Server started on port: 3002
2021/8/22 14:52:19 9588 [INFO] Node Media WebSocket Server started on port: 3002如果打印出以上内容，阐明一个 rtmp 的直播服务器就曾经搭建胜利了。
- 拉推流地址
AppName 就是 App 名称;StreamName 就是流名称。
推流地址：
url: rtmp://localhost/live
key: STREAM_NAME
拉流地址:
rtmp: rtmp://localhost:port/live/STREAM_NAME
http-flv: http://localhost:3002/live/STREAM_NAME.flv
HLS: http://localhost:3002/live/STREAM_NAME/index.m3u8
DASH: http://localhost:3002/live/STREAM_NAME/index.mpd
websocket-flv: ws://localhost:3002/live/STREAM_NAME.flv
这里次要应用的推流地址是：rtmp://localhost/xqlive/demo, 拉流地址是http://localhost:3002/xqlive/demo.flv。
前端播放页面
这里次要是应用 flv.js 进行播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 云直播 </title>
<style>
#live {
margin: 0 auto;
display: block;
min-width: 300px;
max-width: 600px;
width: 100%;
}
</style>
</head>
<body>
<video id="live" playsinline controls src=""poster="./img/poster.jpg"></video>
<script src="js/flv.min.js"></script>
<script>
if (flvjs.isSupported()) {let ve = document.getElementById('live');
let flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://localhost:3002/xqlive/demo.flv'
});
flvPlayer.attachMediaElement(ve);
flvPlayer.load();
flvPlayer.play();}
</script>
</body>
</html>看一下成果
OBS 推流配置
这里应用 OBS 进行推流直播。
OBS 下载地址
下载好后装置而后关上主页面，找到文件 =》设置 =》推流
而后填写好地址与密钥就好了。
接着抉择媒体源开始推流。
- 推流界面
上面是我抉择的一段小视频进行推流直播。
- 播放界面
除了媒体源，你还能够抉择直播显示器桌面，直播文字，直播图片，以及开启摄像头直播你本人，都能够。
如果你要部署到线上的话，要保障你的服务器带宽至多在 10MB 左右，不然就会很卡的。
好了，自建直播就介绍到这里，如果你进行商业化服务，那就要购买云计算服务商的云直播服务了，那个是十分流程的清晰的，然而是依据直播带宽或者流量计费的。