导语:最近钻研了一下网页直播流的原理以及实现,当初就目前的实现办法做一个总结。

目录

  • 直播流媒体协定
  • 拉流与推流
  • Node服务搭建
  • 前端播放页面
  • OBS推流配置

直播流媒体协定

先来理解一下根本的直播流媒体协定。

http-flv,rtpm

协定/特点开发者原理长处毛病
http-flvAbode通过服务器把flv下载到本地缓存,而后通过NetConnection本地连接播放节俭服务器耗费保密性差
rtmpAbode通过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左右,不然就会很卡的。

好了,自建直播就介绍到这里,如果你进行商业化服务,那就要购买云计算服务商的云直播服务了,那个是十分流程的清晰的,然而是依据直播带宽或者流量计费的。