导语:最近钻研了一下网页直播流的原理以及实现,当初就目前的实现办法做一个总结。
目录
- 直播流媒体协定
- 拉流与推流
- 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 livecd livenpm init -ynpm i node-media-server
引入包,编写配置文件
// server.jsconst 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.js2021/8/22 14:52:19 9588 [INFO] Node Media Server v2.3.82021/8/22 14:52:19 9588 [INFO] Node Media Rtmp Server started on port: 30012021/8/22 14:52:19 9588 [INFO] Node Media Http Server started on port: 30022021/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左右,不然就会很卡的。
好了,自建直播就介绍到这里,如果你进行商业化服务,那就要购买云计算服务商的云直播服务了,那个是十分流程的清晰的,然而是依据直播带宽或者流量计费的。