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

在这里插入图片描述
在这里插入图片描述

  1. 那如何将视频引入自己项目呢?参考 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();
    });
	效果图如下,欢迎留言讨论:

在这里插入图片描述

  • 2
    点赞
  • 22
    收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论 4

打赏作者

山野小木匠

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值