zoukankan      html  css  js  c++  java
  • 使用H5Stream实现rtsp流播放,并整合到web项目中

    更新!!!这篇博客最早是工作要求实现rtsp流媒体播放,所以做了一个demo测试下,后来又不需要做这个功能了,遂没有再深入研究,只记录了之前的学习结果,最近发现有小伙伴留言说流媒体无法播放,我看了下,的确rtsp流无法播放,但是MP4格式还是可以的。由于工作繁忙未有时间研究,所以这篇博客权且给大家参考一下,如果有小伙伴找到最新解决办法,欢迎留言哦~谢谢。


    以下为原文:

    预期目标在项目中增加一个rtsp流媒体播放的功能。

    H5Stream(h5stream 支持RTSP/RTMP拉流/RTMP推流/GB28181 摄像机NVR集成,支持HLS/RTSP/RTMP/WS/RTC 服务,并且在不转码的情况下支持H.264;还兼容不同的操作系统和浏览器)。

    然后查看官方文档,但是对于萌新来说,实在太难理解了!/(ㄒoㄒ)/~~

    于是我又开始各种搜罗教程,但是网上的教程很少,就几篇还写的不是很全面,这里先附上我看到的博客:


    准备工作:下载和安装

    官网提供的在这(你可以试着自己找资源)?

    官网传送门?

    百度网盘?

    懒人全部打包下载


    开始:

    (1)双击vcredist_x64.exe进行安装,安装后需重启,这个安装包也保存着吧,如果已经安装成功的双击会显示修复和卸载

    (2)解压产品包h5s-r9.0.0605-win64-release.zip,解压路径随意

    (3)双击根目录中的regservice.bat自动注册

    (4)修改h5s-r8.7.0718.19-win64-releaseconf目录下的h5ss.conf配置文件,将strUrl的流地址修改为你自己的

              这里提供一个流地址:rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov

              tip:你可以使用VLC播放器测试一下流地址是否正常,如果无法播放,请更换为其他的

    (5)双击根目录下的h5ss.bat启动服务,切记不能关闭哦!

    注意:如果无法运行,出现如下报错:那可能是vcredist_x64.exe安装出了问题,这里提供微软下载,重新安装下!

    (6)打开网页,浏览器输入localhost:8080 ,看到如下界面代表成功

    (7)你也可以直接浏览器输入localhost:8080/demo.html 

    那如何引入到自己的web项目中呢???


    其实很简单,在h5s-r8.7.0718.19-win64-releasewww目录下有个demo.html文件,复制到你的项目中去,然后引入相应的js文件,注意!!host 的 window.location.host 改为 localhost:8080,因为H5Stream默认端口为8080,所以为了避免冲突,将你web项目的端口号修改为8081,否则你启动H5Stream服务的时候,就无法启动项目了!

    1.  
      <!DOCTYPE HTML>
    2.  
      <html>
    3.  
      <head>
    4.  
      <title>H5STREAM VIDEO</title>
    5.  
      <script src="js/jquery-3.1.1.js"></script>
    6.  
      <script src="js/bootstrap.js"></script>
    7.  
      <script src="js/adapter.js"></script>
    8.  
      <script src="js/platform.js"></script>
    9.  
      <script src="js/h5splayer.js"></script>
    10.  
      <script src="js/h5splayerhelper.js"></script>
    11.  
       
    12.  
      <link rel = "stylesheet" type = "text/css" href = "css/h5splayer.css" />
    13.  
       
    14.  
      </head>
    15.  
       
    16.  
      <body>
    17.  
       
    18.  
      <div class="h5videodiv">
    19.  
      <video class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline>
    20.  
       
    21.  
      </video>
    22.  
      <div class="playpause" id="playpause1" ></div>
    23.  
      </div>
    24.  
       
    25.  
       
    26.  
      </body>
    27.  
       
    28.  
      <script>
    29.  
       
    30.  
      if (H5siOS() === true
    31.  
      || H5sSafariBrowser() === true)
    32.  
      {
    33.  
      $('#h5sVideo1').prop("controls", true);
    34.  
       
    35.  
      }
    36.  
       
    37.  
      var conf1 = {
    38.  
      videoid:'h5sVideo1',
    39.  
      protocol: window.location.protocol, //'http:' or 'https:'
    40.  
      host: "localhost:8080", //'localhost:8080'
    41.  
      rootpath:'/', // '/' or window.location.pathname
    42.  
      token:'token1',
    43.  
      hlsver:'v1', //v1 is for ts, v2 is for fmp4
    44.  
      session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
    45.  
      };
    46.  
       
    47.  
       
    48.  
      var v1 = H5sPlayerCreate(conf1);
    49.  
       
    50.  
       
    51.  
      $('#h5sVideo1').parent().click(function () {
    52.  
      if($(this).children(".h5video").get(0).paused){
    53.  
      if(v1 != null)
    54.  
      {
    55.  
      v1.disconnect();
    56.  
      delete v1;
    57.  
      v1 = null;
    58.  
      }
    59.  
       
    60.  
      v1 = H5sPlayerCreate(conf1);
    61.  
       
    62.  
      console.log(v1);
    63.  
      v1.connect();
    64.  
       
    65.  
      $(this).children(".playpause").fadeOut();
    66.  
      }else{
    67.  
      v1.disconnect();
    68.  
      delete v1;
    69.  
      v1 = null;
    70.  
      $(this).children(".h5video").get(0).pause();
    71.  
      $(this).children(".playpause").fadeIn();
    72.  
      }
    73.  
      });
    74.  
       
    75.  
       
    76.  
      </script>
    77.  
       
    78.  
      </html>

    最后:

    重新启动h5ss.bat

    然后运行web项目,就可以看到视频了。

    我是将视频嵌套在我已有的html中,效果如下

  • 相关阅读:
    实验三
    第二、三周作业
    实验二
    第一周作业
    学号20182325袁源 实验一《Linux基础与Java开发环境》实验报告
    20182331 2019-2020-1 《数据结构与面向对象程序设计》实验五报告
    20182331 2019-2020-1 《数据结构与面向对象程序设计》实验四报告
    20182331 2019-2020-5《数据结构与面向对象程序设计》第5周学习总结
    20182331 2019-2020-4《数据结构与面向对象程序设计》第4周学习总结
    20182331 2019-2020-1 《数据结构与面向对象程序设计》实验三报告
  • 原文地址:https://www.cnblogs.com/wangsongbai/p/13444573.html
Copyright © 2011-2022 走看看