
Simple Rtmp Server (srs) 与 Flv.js 实现直播功能
一直想实现直播功能,今天咱们就来实现一下直播功能
介绍三个主角,SRS与flv.js
1:SRS是国人开源的一款直播服务器集群,具有,延迟,兼容,可转成HLS等优点。GitHub地址
2:Flv.js是bilibili 网站开源的一款FLV播放器,一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。GitHhub地址
3:OBS Studio 录像软件,这个有多强大就无需多言了。
一 安装Flv.js
不过该播放器有以下限制
- MP3 播放不支持 IE11 / Edge
- 所有直播不支持Http-flv协议
npm 安装一波
-
npm install --save flv.js
项目内就直接引用flv.min.js文件
-
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="flv.min.js"></script> <video id="videoElement"></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://example.com/flv/video.flv' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> </body> </html>
如果只是单纯的单文件测试,那么就在
- node_modules文件中
- 把flv.min.js与flv.min.js.map文件拉到跟html文件同目录即可
flv.js 就部署好了,现在打开是无法连接rtmp服务器的,因为还没安装呢。
二 安装Simple-Rtmp-Server
1.拉取源码
#git clone https://git.oschina.net/winlinvip/srs.oschina.git #cd srs.oschina/trunk
若发生因为SRS跨域问题,敲黑板
修改 src/app/srs_app_http_stream.cpp
在486行添加
w->header()->set("Access-Control-Allow-Origin", "*");
再编译
2.编译
#./configure && make
3.复制一份http.flv.live.conf文件并改名为my.flv.live.conf
#cp ./conf/http.flv.live.conf ./conf/my.flv.live.conf
修改my.flv.live.conf内容
# the config for srs to remux rtmp to flv live stream. # @see https://github.com/ossrs/srs/wiki/v2_CN_DeliveryHttpStream # @see full.conf for detail config. listen 1935; max_connections 1000; daemon off; srs_log_tank console; http_server { enabled on; listen 80; dir ./objs/nginx/html; } vhost __defaultVhost__ { http_remux { enabled on; mount [vhost]/[app]/[stream].flv; hstrs on; } dvr { # https://github.com/ossrs/srs/wiki/v2_CN_DVR enabled on; dvr_path ./objs/nginx/html/[app]/[stream].flv; dvr_plan session; dvr_duration 30; dvr_wait_keyframe on; time_jitter full; } }
这里添加了保存rtmp流文件的配置,指定存储路径./objs/nginx/html/[app]/[stream].flv。
4.启动SRS
#./objs/srs -c conf/my.flv.live.conf
然后实在阿里云开的话,要开放安全组7001端口
5.然后打开打开OBS的流设置
一:URL中ip中更改自己的本机的IP地址(ifconfig/ipconfig),然后流名称随便改一个
二:点击开始推送,然后就能看到obs提示连接成功
6. 回到 一 安装Flv.js
修改url: url: ‘http://ip:8080/stream/qazwsx@123.flv’,保存,然后就能看到obs中的内容了
整理:本地开启服务倒是没什么问题,SRS放在云上就卡到不行了,优化手段cdn,负载均衡,增加带宽等。