使用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-release\conf目录下的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-release\www目录下有个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中，效果如下

posted on 2020-08-06 10:14  Hi，王松柏  阅读(5158)  评论(1)  编辑  收藏  举报

导航