RTSPtoWeb & RTSPtoWebRTC & 自HTML播放

高胤川

已于 2023-01-13 10:13:22 修改

阅读量4.1k

点赞数 5

文章标签： html java 前端

于 2023-01-12 17:40:32 首次发布

本文链接：https://blog.csdn.net/qq_42878634/article/details/128662071

版权

简述

RTSPtoWebRTC和RTSPtoWeb是go语言编写的一套将rtsp视频流在网页上用js直接播放的程序。两套虽然都能转rtsp，通过js在html上进行播放，但是都是自己内部的一个tmpl模板，如果想自己弄的话，还需要自己实现一个js用于自己的html上播放。

环境准备

go语言环境安装：参考其他博主的文章。

https://juejin.cn/post/6982916943183347742
https://blog.csdn.net/weixin_43866211/article/details/108877256

rtsp流准备：摄像头流地址或者自己推rtsp流的地址准备。摄像头取流地址网上都有，设置好相关的参数就可以获取了。

vlc准备：有rtsp流之后，可以通过vlc来校验一下是否能播放流。

我的目的就是要将视频最终展现在自己系统中，所以下面涉及了自己改动的一些代码。自己是学java的，第一次用go语言，边百度边修改了一些。有更改的改进可以学习学习。

RTSPtoWebRTC：

下载

https://github.com/deepch/RTSPtoWebRTC

编译
在当前目录下，打开cmd命令窗口，输入一下命令，就会拉去对应的依赖，拉取好之后，再执行一遍该命令，就会得到一个RTSPtoWebRTC.exe的应用程序。

go build

配置config.json

{
  "server": {
    "http_port": ":8083",
    "ice_servers": ["stun:stun.l.google.com:19302"]
  },
  "streams": {
    "dahua107": {
      "on_demand": true,
      "disable_audio": false,
      "url": "rtsp://admin:whxx@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0"
    },
	"dahua108": {
      "on_demand": true,
      "disable_audio": false,
      "url": "rtsp://admin:whxx@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0"
    }
  }
}

8083是启动端口，ice-servers是一个国外的服务器，好像是做内网穿透什么的，网上有很多类似服务器，如果这个提示访问不了，就换一个网上能用的，也可以自己搭建一个这种服务器。如果不通，第一下检查一下host文件，将真实ip做个映射试试看。
下面是摄像头的流，我这里配置了两个。on_demand(配置flase就会启动即监控，多了会卡，资源占用多)，disable_audio(是否启用音频)。

配置好后，双击exe启动项目，连上了摄像头的话，会有响应提示。访问localhost:8083，就可以看到配置的摄像头的视频信息了。

改进

这个能看只是在他们页面上看，而且启动的时候不管配置文件中配置的on_demand是否是true，最后都会加载摄像头，消耗着资源。我的项目想法是点一个看一个，启动时候都不加载，看哪个点哪个。改进点如下
改进步骤1:
我用go写了一个http接口，用于前端去控制，调用该接口就生成视频资源进行播放。
修改http.go
在这里插入图片描述

新增了一个openCamera接口，在路径参数中获取uuid，uuid就是config.json里面的流的名称。启动一个就会开启响应的编码工作。

改进步骤2:

注释掉HTTPAPIServerStreamCodec中的~~Config.RunIFNotRun(c.Param(“uuid”))~~
因为项目启动时候，会调用这个方法，如果摄像头没启动，都会启动。项目启动时候我没找到哪里调用了这个方法，对go不熟没有找到启动地方，所以这里注释掉。
做完这些后，重新执行go build命令，生成一个新的exe文件。双击启动，这个时候访问localhost:8083就发现没有摄像头看了。是因为启动关闭了，这个时候我们需要触发一下我们写的接口。例如用postman调用：

http://127.0.0.1:8083/stream/openCamera/dahua108

就可以开启摄像头，在播放的页面中就可以播放了。整合到自己系统是想着做一个嵌套页面，把播放的页面直接嵌套到项目中，然后由前端再调整一下。还有一点就是，RTSPtoWebRTC会自动关闭没有播放的流，控制台会提示no viewer，没有观看的行为，就会关闭流，我对cpu内存也留意了一下，确实会释放资源。
准备实现这套方案的时候，突然看到两个帖子：

https://www.jianshu.com/p/9bb7fd966710

https://blog.csdn.net/u011039332/article/details/126733310?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167351405616800217030261%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=167351405616800217030261&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-126733310-null-null.142^v70one_line,201^v4add_ask&utm_term=RTSPtoWeb&spm=1018.2226.3001.4187

分别是博主自己实现了一个js来播放webrtc，和使用RTSPtoWeb。

RTSPtoWeb
RTSPtoWeb是RTSPtoWebRTC的升级版，提供了web端，以及hls，hlsll，mse，webrtc四种方法来播放，还提供了一系列的API doc，尤其是对webrtc接口信息的获取，第一个博主就是使用js来获取该接口信息，完成视频流的播放的，我也是借鉴了第一个博主的js，稍微改动了一下，达到了自己想要的目的。

拉取项目，第一个是含有关键js的，第二个是RTSPtoWeb的项目。

https://github.com/Bian-Sh/RTSP-Player-For-Unity-WebGL

https://github.com/deepch/RTSPtoWebRTC

新建一个文件夹，mywebrtc，下面要把两个里面有用的东西提到这个项目文件夹下。
提取RTSP-Player-For-Unity-WebGL\RTSPPlayer下的所有文件，有几个文件没用，也一并拖到player目录下。提取RTSPtoWeb整个文件夹出来。最后mywebrtc下有两个文件夹，一个是player，一个是RTSPtoWeb。
修改信息
修改config.json

{
  "server": {
    "debug": true,
    "http_debug": false,
    "http_demo": true,
    "http_dir": "web",
    "http_login": "demo",
    "http_password": "demo",
    "http_port": ":8083",
    "https": false,
    "https_auto_tls": false,
    "https_auto_tls_name": "",
    "https_cert": "server.crt",
    "https_key": "server.key",
    "https_port": ":443",
    "ice_servers": ["stun:stun.l.google.com:193022"],
    "log_level": "debug",
    "rtsp_port": ":5541",
    "token": {
      "backend": "http://127.0.0.1/test.php"
    },
    "defaults": {
      "audio": true
    }
  },
  "streams": {
    "dahua108": {
      "channels": {
        "0": {
          "url": "rtsp://admin:whjst2012.@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0",
          "debug": false,
		  "on_demand": true,
          "audio": true
        }
      },
      "name": "dahua"
    },
	"dahua107": {
      "channels": {
        "0": {
          "url": "rtsp://admin:whjst2012.@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0",
          "debug": false,
		  "on_demand": true,
          "audio": true
        }
      },
      "name": "dahua"
    }
  }
}

on_demand设置为true则项目启动时候不会主动加载，播放的时候才加载。主要逻辑在storageStreamChannle.go中的StreamChannelRunAll方法，如果为false，则会去加载调用。

修改player/index.html。
在这里插入图片描述
整个dahua107是在config.json中的流的名称。还加了一个关闭页面就销毁进程的，避免浪费资源。
修改webrtcplayer.js

第一张图片修改的是新加了一个http头，否则就要像原博主一样，启动他的一个exe，开启80端口。加了这个头子，可以直接双击html，打开播放。第二张图片是把音频加了进去，原博主没有加，就不会出现声音，我也是调了很久，跟RTSPtoWeb里面的播放的js一步步的对才发现这个的，加上了就有声音了。但是这个webrtc支持的声音类型要是PCM_ALAW PCM_MULAM，摄像头的配置里面都可以设置，PCM_ALAW PCM_MULAM，可能又叫做G.711开头的。

启动RTSPtoWeb.exe，双击打开index.html，这个时候就能观看视频了，其余的还是交给前端人员去仔细调整，具体的优化逻辑后面再慢慢做，起码能在自己的html中播放了。
我的文件链接:
链接：https://pan.baidu.com/s/1lQ0XJRh2om-6Q8SeH0qZAA
提取码：k6ld