浏览器播放rtsp视频流：3rtsp转webrtc播放
Posted xiaoyaoyou.xyz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器播放rtsp视频流：3rtsp转webrtc播放相关的知识，希望对你有一定的参考价值。
浏览器播放rtsp视频流：3、rtsp转webrtc播放
文章目录
1. 前言
前面我们测试了rtsp转hls方式，发现延迟比较大，不太适合我们的使用需求。接下来我们试一下webrtc的方式看下使用情况。
综合考虑下来，我们最好能找到一个go作为后端，前端兼容性较好的前后端方案来处理webrtc，这样我们就可以结合我们之前的cgo+onvif+gSoap实现方案来获取rtsp流，并且可以根据已经实现的ptz、预置点等功能接口做更多的扩展。
2. rtsp转webRTC
如下是找到的一个比较合适的开源方案，前端使用了jQuery、bootstrap等，后端使用go+gin来实现并将rtsp流解析转换为webRTC协议提供http相关接口给到前端，通过config.json配置rtsp地址和stun地址：
https://github.com/deepch/RTSPtoWebRTC
此外，还带有stun，可以自行配置stun地址，便于进行内网穿透。
初步测试几乎看不出来延迟，符合预期，使用的jQuery+bootstrap+go+gin做的web，也符合我们的项目使用情况。
3. 初步测试结果
结果如下：
4. 结合我们之前的onvif+gSoap+cgo的方案做修改
我们在此项目的基础上，结合我们之前研究的onvif+cgo+gSoap的方案，将onvif获取到的相关数据提供接口到web端，增加ptz、调焦、缩放等功能。
我们在http.go中添加新的post接口：HTTPAPIServerStreamPtz来进行ptz和HTTPAPIServerStreamPreset进行预置点相关操作。
以下是部分代码，没有做太多的优化，也仅仅实现了ptz、调焦和缩放，算是打通了通路，具体项目需要可以再做优化。
4.1 go后端修改
增加了新的接口，并将之前cgo+onvif+gSoap的内容结合了进来，项目整体没有做更多的优化，只是为了演示，提供一个思路：
http.go（增加了两个post接口ptz和preset，采用cgo方式处理）：
package main
/*
#cgo CFLAGS: -I ./ -I /usr/local/
#cgo LDFLAGS: -L ./build -lc_onvif_static -lpthread -ldl -lssl -lcrypto
#include "client.h"
#include "malloc.h"
*/
import "C"
import (
"encoding/json"
"fmt"
"log"
"net/http"
"os"
"sort"
"strconv"
"time"
"unsafe"
"github.com/deepch/vdk/av"
webrtc "github.com/deepch/vdk/format/webrtcv3"
"github.com/gin-gonic/gin"
)
type JCodec struct
Type string
func serveHTTP()
gin.SetMode(gin.ReleaseMode)
router := gin.Default()
router.Use(CORSMiddleware())
if _, err := os.Stat("./web"); !os.IsNotExist(err)
router.LoadhtmlGlob("web/templates/*")
router.GET("/", HTTPAPIServerIndex)
router.GET("/stream/player/:uuid", HTTPAPIServerStreamPlayer)
router.POST("/stream/receiver/:uuid", HTTPAPIServerStreamWebRTC)
//增加新的post接口
router.POST("/stream/ptz/", HTTPAPIServerStreamPtz)
router.POST("/stream/preset/", HTTPAPIServerStreamPreset)
router.GET("/stream/codec/:uuid", HTTPAPIServerStreamCodec)
router.POST("/stream", HTTPAPIServerStreamWebRTC2)
router.StaticFS("/static", http.Dir("web/static"))
err := router.Run(Config.Server.HTTPPort)
if err != nil
log.Fatalln("Start HTTP Server error", err)
//HTTPAPIServerIndex index
func HTTPAPIServerIndex(c *gin.Context)
_, all := Config.list()
if len(all) > 0
c.Header("Cache-Control", "no-cache, max-age=0, must-revalidate, no-store")
c.Header("Access-Control-Allow-Origin", "*")
c.Redirect(http.StatusMovedPermanently, "stream/player/"+all[0])
else
c.HTML(http.StatusOK, "index.tmpl", gin.H
"port": Config.Server.HTTPPort,
"version": time.Now().String(),
)
//HTTPAPIServerStreamPlayer stream player
func HTTPAPIServerStreamPlayer(c *gin.Context)
_, all := Config.list()
sort.Strings(all)
c.HTML(http.StatusOK, "player.tmpl", gin.H
"port": Config.Server.HTTPPort,
"suuid": c.Param("uuid"),
"suuidMap": all,
"version": time.Now().String(),
)
//HTTPAPIServerStreamCodec stream codec
func HTTPAPIServerStreamCodec(c *gin.Context)
if Config.ext(c.Param("uuid"))
Config.RunIFNotRun(c.Param("uuid"))
codecs := Config.coGe(c.Param("uuid"))
if codecs == nil
return
var tmpCodec []JCodec
for _, codec := range codecs
if codec.Type() != av.H264 && codec.Type() != av.PCM_ALAW && codec.Type() != av.PCM_MULAW && codec.Type() != av.OPUS
log.Println("Codec Not Supported WebRTC ignore this track", codec.Type())
continue
if codec.Type().IsVideo()
tmpCodec = append(tmpCodec, JCodecType: "video")
else
tmpCodec = append(tmpCodec, JCodecType: "audio")
b, err := json.Marshal(tmpCodec)
if err == nil
_, err = c.Writer.Write(b)
if err != nil
log.Println("Write Codec Info error", err)
return
//HTTPAPIServerStreamWebRTC stream video over WebRTC
func HTTPAPIServerStreamWebRTC(c *gin.Context)
if !Config.ext(c.PostForm("suuid"))
log.Println("Stream Not Found")
return
Config.RunIFNotRun(c.PostForm("suuid"))
codecs := Config.coGe(c.PostForm("suuid"))
if codecs == nil
log.Println("Stream Codec Not Found")
return
var AudioOnly bool
if len(codecs) == 1 && codecs[0].Type().IsAudio()
AudioOnly = true
muxerWebRTC := webrtc.NewMuxer(webrtc.OptionsICEServers: Config.GetICEServers(), ICEUsername: Config.GetICEUsername(), ICECredential: Config.GetICECredential(), PortMin: Config.GetWebRTCPortMin(), PortMax: Config.GetWebRTCPortMax())
answer, err := muxerWebRTC.WriteHeader(codecs, c.PostForm("data"))
if err != nil
log.Println("WriteHeader", err)
return
_, err = c.Writer.Write([]byte(answer))
if err != nil
log.Println("Write", err)
return
go func()
cid, ch := Config.clAd(c.PostForm("suuid"))
defer Config.clDe(c.PostForm("suuid"), cid)
defer muxerWebRTC.Close()
var videoStart bool
noVideo := time.NewTimer(10 * time.Second)
for
select
case <-noVideo.C:
log.Println("noVideo")
return
case pck := <-ch:
if pck.IsKeyFrame || AudioOnly
noVideo.Reset(10 * time.Second)
videoStart = true
if !videoStart && !AudioOnly
continue
err = muxerWebRTC.WritePacket(pck)
if err != nil
log.Println("WritePacket", err)
return
()
func HTTPAPIServerStreamPtz(c *gin.Context)
action := c.PostForm("action")
direction, err := strconv.Atoi(action)
if err != nil
log.Println(err)
return
var soap C.P_Soap
soap = C.new_soap(soap)
username := C.CString("admin")
password := C.CString("admin")
serviceAddr := C.CString("http://40.40.40.101:80/onvif/device_service")
C.get_device_info(soap, username, password, serviceAddr)
mediaAddr := [200]C.char
C.get_capabilities(soap, username, password, serviceAddr, &mediaAddr[0])
profileToken := [200]C.char
C.get_profiles(soap, username, password, &profileToken[0], &mediaAddr[0])
videoSourceToken := [200]C.char
C.get_video_source(soap, username, password, &videoSourceToken[0], &mediaAddr[0])
switch direction
case 0:
break
case 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11:
C.ptz(soap, username, password, C.int(direction), C.float(0.5), &profileToken[0], &mediaAddr[0])
case 12, 13, 14:
C.focus(soap, username, password, C.int(direction), C.float(0.5), &videoSourceToken[0], &mediaAddr[0])
default:
fmt.Println("Unknown direction.")
C.del_soap(soap)
C.free(unsafe.Pointer(username))
C.free(unsafe.Pointer(password))
C.free(unsafe.Pointer(serviceAddr))
c.JSON(http.StatusOK, gin.H"message":"success")
func HTTPAPIServerStreamPreset(c *gin.Context)
var soap C.P_Soap
soap = C.new_soap(soap)
username := C.CString("admin")
password := C.CString("admin")
serviceAddr := C.CString("http://40.40.40.101:80/onvif/device_service")
C.get_device_info(soap, username, password, serviceAddr)
mediaAddr := [200]C.char
C.get_capabilities(soap, username, password, serviceAddr, &mediaAddr[0])
profileToken := [200]C.char
C.get_profiles(soap, username, password, &profileToken[0], &mediaAddr[0])
videoSourceToken := [200]C.char
C.get_video_source(soap, username, password, &videoSourceToken[0], &mediaAddr[0])
action := c.PostForm("action")
presetAction, err := strconv.Atoi(action)
if err != nil
log.Println(err)
return
fmt.Println("请输入数字进行preset,1-4分别代表查询、设置、跳转、删除预置点；退出输入0:")
switch presetAction
case 0:
break
case 1:
C.preset(soap, username, password, C.int(presetAction), nil, nil, &profileToken[0], &mediaAddr[0])
case 2:
fmt.Println("请输入要设置的预置点token信息：")
presentToken := ""
_, _ = fmt.Scanln(&presentToken)
fmt.Println("请输入要设置的预置点name信息长度不超过200：")
presentName := ""
_, _ = fmt.Scanln(&presentName)
C.preset(soap, username, password, C.int(presetAction), C.CString(presentToken), C.CString(presentName), &profileToken[0], &mediaAddr[0])
case 3:
fmt.Println("请输入要跳转的预置点token信息：")
presentToken := ""
_, _ = fmt.Scanln(&presentToken)
C.preset(soap, username, password, C.int(presetAction), C.CString(presentToken), nil, &profileToken[0], &mediaAddr[0])
case 4:
fmt.Println("请输入要删除的预置点token信息：")
presentToken := ""
_, _ = fmt.Scanln(&presentToken)
C.preset(soap, username, password, C.int(presetAction), C.CString(presentToken), nil, &profileToken[0], &mediaAddr[0])
default:
fmt.Println("unknown present action.")
break
C.del_soap(soap)
C.free(unsafe.Pointer(username))
C.free(unsafe.Pointer(password))
C.free(unsafe.Pointer(serviceAddr))
c.JSON(http.StatusOK, gin.H"message":"success")
func CORSMiddleware() gin.HandlerFunc
return func(c *gin.Context)
c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Credentials", "true")
c.Header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-access-token")
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-A浏览器播放rtsp视频流：4jsmpeg+go实现局域网下的rtsp视频流web端播放
文章目录
1.前言
之前的rtsp转webrtc的方案存在如下缺陷：1.只支持h264；2.受限于webrtc的理解难度以及搭建turn/stun的p2p服务等问题，对于局域网下的业务需求来说有些杀猪用牛刀的意思；3.ios不支持webrtc。
基于以上原因，我又找到了一些其它的方案进行了测试，目前看jsmpeg的方案更加适合我们的需求，而且普通压缩大小为135kb，gzip方式压缩后仅仅42kb，在嵌入式场景下也可以使用。只是转码服务需要ffmpeg，在不进程裁剪开发的情况下，需要在设备或者PC或者局域网路由器设备等上安装的该插件服务会比较大。
2.资料准备
官网：https://jsmpeg.com/
https://blog.csdn.net/a843334549/article/details/120697574
https://segmentfault.com/a/1190000040622805
https://juejin.cn/post/7057406701565116452
https://github.com/vCloudSail/jsmpeg-player
https://studygolang.com/articles/25474
3.兼容性及适用性说明
- 这种方案适合局域网使用，目前测试实时性也非常不错，就像jempeg官网说的最低可达50ms，我测试下来对实时性是很满意的。
- 此外，这种方案的视频编码和浏览器的兼容性非常棒，支持h264/h265，支持目前市面上的很多浏览器，我测试过Chrome浏览器、QQ浏览器、360浏览器、搜狗浏览器、Firefox浏览器、UC浏览器、Opera浏览器、Microsoft Edge浏览器、Safari 浏览器等都是可以运行的。
4.jsmpeg架构
- jsmpeg.js采用软解码方式，仅支持mpeg1格式视频、mp2格式音频！！！ ，将视频流解码成图片并渲染到canvas上，并且可在源码基础上二次开发
根据这个架构我们的想法是jsmpeg客户端使用前端开发，该客户端唯一比较大的就是jsmpeg.js，不压缩也就100k多一点，压缩后更小，这样就可以放到很多设备中了，甚至很多嵌入式设备都都可以，然后我们将http、websocket服务端使用后端语言来开发，比如node.js、Java、Go、c++等，ffmpeg转码这里快速开发可以直接用ffmpeg，要再裁剪的话可以自己用C再开发一下，我们只需要转H264/H265到mpeg1，AAC到mp2，然后将对应的音视频格式的流通过websocket分发到jsmpeg客户端就可以了。
5.基于以上架构的go方案可行性分析
本来想自己开发的，结果随便搜了一下，已经有人用go的gin框架写了，互联网和开源拯救了大家，直接参考一下：https://studygolang.com/articles/25474
代码我整体看了一下，也跑了一下，修改了三个部分：
- 1.一分钟后就会自动断开，这里注释就可以了（这里过一分钟就发送q主动断开了）；
case <-time.After( 60 * time.Second):
_, _ = stdin.Write([] byte ( "q" ))
err := cmd.Wait()
if err != nil
util.Log().Error( "Run ffmpeg err %v" , err.Error())
- 2.ffmpeg调用使用当前路径的ffmpeg，否则如果你设备上安装了ffmpeg的话可能路径会乱
util.Log().Debug("FFmpeg cmd: ./ffmpeg %v", strings.Join(params, " "))
cmd := exec.Command("./ffmpeg", params...)
- 3.html的js中增加了主动发送http请求获取ws地址的response处理部分，方便测试
<!DOCTYPE html>
<html>
<head>
<title>JSMpeg Stream Client</title>
<style type="text/css">
html, body
text-align: center;
</style>
</head>
<body>
<canvas id="video-canvas"></canvas>
<canvas id="video-canvas1"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
var request = new XMLHttpRequest();
var url = "http://127.0.0.1:3000/stream/play"; //接口url
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/json");
request.send('"url": "rtsp://192.168.31.204/main_stream"'); //传入的数据，不同摄像头修改这里的rtsp地址即可
request.onreadystatechange = function()
//若响应完成且请求成功
if(request.readyState === 4 && request.status === 200)
//do something, e.g. request.responseText
console.log("response:"+request.responseText)
const resObj = JSON.parse(request.responseText);
if (resObj['data'])
if (resObj['data']['path'])
console.log("ws path:"+resObj['data']['path'])
var canvas1 = document.getElementById('video-canvas1');
// var url = 'ws://127.0.0.1:3000/stream/live/test';
var wsUrl = 'ws://127.0.0.1:3000'+resObj['data']['path']
console.log("ws url:"+wsUrl)
var player = new JSMpeg.Player(wsUrl, canvas: canvas1);
</script>
</body>
</html>
这里还有一个坑点，留给大家去探索吧：长时间运行后如果推流的rtsp服务存在断流的话就没有画面了，这个没有webrtc服务的容错机制，需要自行判断处理，否则长时间跑之后画面就没了。
此外，http接口还可以增加ptz、preset等接口，这个仍然可以使用onvif协议来处理。
6.编译和结果展示（编译坑点）
编译Go代码很方便，但是我这里建议使用go1.18，go1.19在Windows下使用“./”会报错，必须使用“.\\”，这个需要注意，然后就go build即可生成可执行程序了。
之后修改html中的request.send中的rtsp的地址后访问该html即可看到效果了：
7.最后
很多时候，共同讨论才能更快的进步，开源让Linux成长的很快，不管是家电还是汽车、手机等等，生活中很多东西都可以见到Linux，而固步自封的结果大家也已经看到不少了。
以上是关于浏览器播放rtsp视频流：3rtsp转webrtc播放的主要内容，如果未能解决你的问题，请参考以下文章
JavaCV音视频开发宝典：使用JavaCV和springBoot实现http-flv直播服务,无需流媒体服务,浏览器网页flv.js转封装方式播放rtsp,rtmp和桌面投屏实时画面
JavaCV音视频开发宝典：使用JavaCV和springBoot实现http-flv直播服务,无需流媒体服务,浏览器网页flv.js转封装方式播放rtsp,rtmp和桌面投屏实时画面
JavaCV音视频开发宝典：使用JavaCV和springBoot实现http-flv直播服务,无需流媒体服务,浏览器网页flv.js转封装方式播放rtsp,rtmp和桌面投屏实时画面
JavaCV音视频开发宝典：使用JavaCV实现webm直播服务,无需流媒体服务,无需mse转封装插件（flv.js,hls.js）,浏览器原生video标签直接播放rtsp,rtmp和桌面投屏直播