一直想实现直播功能,今天咱们就来实现一下直播功能

介绍三个主角,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

不过该播放器有以下限制

  1. MP3 播放不支持 IE11 / Edge
  2. 所有直播不支持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,负载均衡,增加带宽等。

您或许感兴趣

[2018-09-04]基于laravel队列+Redis的秒杀锁库存实现

发表评论

电子邮件地址不会被公开。