Simple Rtmp Server (srs) 与 Flv.js 实现直播功能
(5795) 一直想实现直播功能，今天咱们就来实现一下直播功能
介绍三个主角，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，负载均衡，增加带宽等。