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中,效果如下

  • 相关阅读:
    Unix命令大全
    vs2008 与 IE8出现的兼容性问题
    Java 创建文件、文件夹以及临时文件
    如何修改Wamp中mysql默认空密码
    PAT 乙级真题 1003.数素数
    Tags support in htmlText flash as3
    DelphiXE4 FireMonkey 试玩记录,开发IOS应用 还是移植
    10 Great iphone App Review sites to Promote your Apps!
    HTML tags in textfield
    Delphi XE4 IOS 开发, "No eligible applications were found“
  • 原文地址:https://www.cnblogs.com/wangsongbai/p/13444573.html
Copyright © 2011-2022 走看看