H5直播系列六 flv.js demo

参考
SRS大神杨成立
SRS(simple-rtmp-server)直播点播服务器
SRS Github
SRS HTTP FLV
CRtmpServer转推流到Nginx Rtmp及SRS（SimpleRtmpServer）的经历
通读SRS后的总结文档以及搭建直播平台的初次尝试
srs-win32
Nginx:
Nginx - Windows下Nginx初入门
Windows下Nginx的启动、停止等命令
Windows下Nginx+Tomcat整合的安装与配置（一）【精】
在Windows下搭建基于nginx的视频直播和点播系统
Linux&Windows搭建基于nginx的视频点播服务器
nginx-rtmp-win32

说起来很蛋疼，参照flv.js官方的Demo总是运行不起来，这连第一步都迈不出去真是郁闷，搞了一天最终跑起来Demo了……

一、搭服务器

弄个WINDOWS版本的Nginx吧，参照Linux&Windows搭建基于nginx的视频点播服务器，使用了nginx-rtmp-win32做了本地点播测试。具体步骤参照原文，为了节约时间，最好去CSDN下载作者那个DEMO，文件名叫nginx-demo.rar。

去网上随便下载一个flv文件改名为jay.flv放在video文件夹下，使用VLC播放软件，媒体菜单，打开网络串流：

rtmp://localhost/vod/test.flv
http://localhost/jay.flv

Paste_Image.png

复制一份jay.flv，命名为01.flv，放在同路径下。修改conf/nginx.conf配置文件，然后在nginx.exe路径下命令行(PowerShell不行)运行nginx -s reload重新加载配置。这里如果报错nginx: [error] OpenEvent("Global\ngx_reload_38192") failed (2: The system cannot find the file specified)，则说明nginx服务器未启动，需要点双击nginx.exe。

        location /jay.flv{
            root video;
        }
        
        location /01.flv{
            root video;
        }

VLC发现http://localhost/jay.flv和http://localhost/01.flv都可以播放。这说明location在匹配播放url成功后，会去相应的root下寻找url资源。

二、运行flv.js的demo

1.双击这个index.html会报错

Paste_Image.png

可以参照这个 Not allowed to load local resource: blob:null/，我们需要把index.html部署到本地服务器上，用gulp搞定吧.可以参照 Gulp Grunt,弄好后就能用 http://localhost:8080/来访问页面了.不过依然报错
2.跨域

Paste_Image.png

关于跨域可以参考 CORS——跨域请求那些事儿
为了解决nginx跨域,参考 nginx中配置跨域支持功能
在nignx.conf的http.server中添加

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

然后nginx -s reload重新加载配置.好了,终于能看到flv文件啦

Paste_Image.png

三、附

测试地址
可以使用VLC打开的http-flv

end