极简实现Web端播放RTSP视频流（斯丢皮得版）

echom
570 阅读2分钟

准备

GO下载与安装

阿里云镜像下载地址：

mirrors.aliyun.com/golang/

通过浏览器下载系统对应版本包

  1. 选择下载
  2. 下载完成后tar解压到指定目录或msi安装到指定目录，查看版本确定安装成功
go version
  1. 安装/解压完成后配置系统环境变量,进入cmd执行以下命令 （以windows系统为例）
go env -w GO111MODULE=on 
go env -w GOPROXY=https://goproxy.cn
  1. 查看是否配置成功
go env

像这样就是配置成功了

image.png

修改视频流配置文件

在RTSP2WebRTC下载目录下的config.json修改对应的url,也可以在stream通过新增一个对象添加一个新的视频流

{
  "server": {
    "http_port": ":8083"
  },
  "streams": {
    "demo1": {
      "on_demand" : false,
      "url": "rtsp://170.93.143.139/rtplive/470011e600ef003a004ee33696235daa"
    },
    "demo2": {
      "on_demand" : true,
      "url": "rtsp://admin:admin123@10.128.18.224/mpeg4"
    },
    "demo3": {
      "on_demand" : false,
      "url": "rtsp://170.93.143.139/rtplive/470011e600ef003a004ee33696235daa"
    }
  }
}

启动RTSP2WebRTC

同样的，在在RTSP2WebRTC下载目录下cmd,运行

go run ./

启动成功后你就可以在浏览器127.0.0.1:8083看到你的视频流列表

image.png

魔改

还记得我们最初的目的是要把视频流展示到web项目里对吧。接下来，最最愚蠢的来了，...嘿嘿，iframe！现在要做的就是把http://127.0.0.1:8083 里面不相关的什么列表都给他改了，只剩一个video

image.png

(友情提示：单个视频流的地址是http://127.0.0.1:8083/stream/player/demo1)

我直接魔改RTSP2WebRTC里的web目录，不就是html+css嘛我最拿手了，在player.tmpl，index.tmpl里把不相关的什么都删光光，container样式直接上100vw

(这个地方我不贴代码了，不知道怎么把改成全屏展示的羞羞脸，不要来问我)

然后就得到了一个全屏播放器

最后，嘿嘿嘿，我直接在web项目里<iframe src="http://127.0.0.1:8083/stream/player/demo1" ../>，至此完成

结束语

欢迎jym指教批评给出建议，3Q~

avatar
文章
阅读
粉丝