2020年12月31日flash禁用后网页如何播放rtmp视频流

2020年12月31日flash禁用后网页如何播放rtmp视频流

众所周知，2020年底flash将不再被各大浏览器支持，那么以前利用flash技术做的产品该怎么办呢？我就遇到了这样的问题。
公司有一个老项目，在网页上接入了监控视频（甲方只要求在特定电脑播放即可），现在flash即将被浏览器禁用，用户要求对系统进行升级，以保证以后该功能可以继续正常使用。作为一个小白，本人用了两个星期的事件，终于解决了问题，在此做个记录。
rtmp是专门为flash开发的视频传输协议，HTML5不支持，所以不用flash插件（我的项目原来用的是video.js)播放基本是不可能的，所以要想直接在网页播放，只能对其进行转码。
经过查询资料，现有两种技术可以进行实时转码，一种是bilibili开源的flv.js技术，经过试验发现比较麻烦，本人是小白，看不太懂，所以果断放弃，有兴趣的小伙伴可以去自己百度。
还有一种技术是H5Stream,本人就是采用的这种方法，详细操作如下：

1. 从百度网盘下载资源包：链接：https://pan.baidu.com/s/1JH1gXn0XE1BclNt1ePlfIw 提取码：o5mt

2. 运行 VC_redist.x64.exe，如果电脑已经安装该软件，会提示修复或者卸载，直接退出或者修复都行

3. 将 h5s-r8.7.0718.19-win64-release.zip 文件解压到一个文件夹，注意最好不要使c盘，路径里不能有中文

4. 在解压目录下找到conf文件夹，进入后打开h5ss.conf配置文件:
   在“1”的位置输入端口号（默认是8080，为了防止端口冲突，建议修改，我自己改为了8093）；
   src为视频流的设置位置，默认是两个，如果需要设置很多个视频流可以自己复制，其中“2”的位置是视频流名称，可以自定义，不能为中文，建议就“Stream1"“Stream2"…一直往下就行；
   “3”的位置是token,是视频流的标记，比如在你的项目中将来把token设置为token1，就会播放token1对应的视频，token不能重复，如果重复会优先播放第一个视频；
   “4”的位置为视频流地址，把自己的地址复制进去即可，测试流可以去我的博客里看：https://editor.csdn.net/md/?articleId=111278789
   
   

5. 配置好以后双击根目录下的regservice.bat进行服务注册，然后双击h5ss.bat运行程序

6. 程序运行后，打开浏览器输入http://localhost:8093/(注意自己的端口号），点击小摄像头即可查看视频，我这里一共设了20个流，或者直接输入http://localhost:8093/demo.html也行，如果运行失败请重新安装VC_redist.x64.exe

7. 那如何将视频引入自己项目呢?参考 www目录下的demo.html文件，我的自己的代码如下,打开页面即可自动播放：
   引入依赖：

    <link rel="stylesheet" type="text/css" href="${ctxStatic}/H5stream/css/h5splayer.css"/>
    <script type="text/javascript"
            src="${ctxStatic}/toecsec/angular/plugins/jquery.min.js"></script>

    <script src="${ctxStatic}/H5stream/js/jquery-3.1.1.js"></script>
    <script src="${ctxStatic}/H5stream/js/bootstrap.js"></script>
    <script src="${ctxStatic}/H5stream/js/adapter.js"></script>
    <script src="${ctxStatic}/H5stream/js/platform.js"></script>
    <script src="${ctxStatic}/H5stream/js/h5splayer.js"></script>
    <script src="${ctxStatic}/H5stream/js/h5splayerhelper.js"></script>

	body:

  <video id="video1"  class="h5video"></video>

js:

$(function () {
        var conf1 = {
            videoid: 'video1',
            protocol: 'http:', //'http:' or 'https:'
            host: 'localhost:8093', //'localhost:8080'
            rootpath: '/', // '/' or window.location.pathname
            token: 'token1',
            hlsver: 'v1', //v1 is for ts, v2 is for fmp4
            session: 'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
        };
        var v1 = H5sPlayerCreate(conf1);
        v1.connect();
    });

	效果图如下，欢迎留言讨论：