首页 > 其他分享 >通过WebRTC 的 RTSP 视频获取

通过WebRTC 的 RTSP 视频获取

时间:2022-12-14 19:05:51浏览次数:65  
标签:视频 RTSP webrtc streamer 使用 docker 8000 WebRTC mpromonet


背景

由于项目需要,需要使用摄像头在Web页面上展现,由于海康威视摄像头推出的流为rtsp 流,已知存在的基于 FFmpeg 的方案延迟都太高,所以就项目最终选择基于此方案。

方案说明

webrtc-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。相对于ffmpeg+flv.js的方案,延迟降低到了0.4秒左右,画面的加载速度也变快了,切换浏览器标签后也不会暂停画面,并且解决了http1.1的同域名中的并发限制(在谷歌浏览器中可以同时播放6个以上的video)。
WebRTC对浏览器有要求,可以在下面的地址中查看支持的浏览器。

​https://caniuse.com/rtcpeerconnection​

通过WebRTC 的 RTSP 视频获取_html

webrtc-streamer 下载和安装

git hub 链接地址:

​https://github.com/mpromonet/webrtc-streamer/releases​

通过WebRTC 的 RTSP 视频获取_html_02


可以看到webrtc-streamer 不仅支持linux和windos。

windos 上 安装简单,双击即可。

linux 上安装相对比较麻烦,webrtc-streamer 需要安装glibc 2.27、glibc 2.28、glibc 2.29,相对比较麻烦。

在 centos 8.x 也是安装失败,没有办法使用了unbutu 20.4 进行安装。

Docker 镜像安装–推荐这种方式

您可以使用 docker 镜像启动应用程序:

docker run -p 8000:8000 -it mpromonet/webrtc-streamer

您可以使用以下命令从主机公开 V4L2 设备:

docker run --device=/dev/video0 -p 8000:8000 -it mpromonet/webrtc-streamer

容器入口点是 webrtc-streamer 应用程序,那么你可以:
使用以下方法获取帮助:

docker run -p 8000:8000 -it mpromonet/webrtc-streamer -h

运行容器注册一个 RTSP url 使用:

docker run -p 8000:8000 -it mpromonet/webrtc-streamer -n raspicam -u rtsp://pi2.local:8554/unicast

使用以下命令运行提供 config.json 文件的容器:

docker run -p 8000:8000 -v $PWD/config.json:/app/config.json mpromonet/webrtc-streamer

webrtc-streamer 使用

安装后测试

./webrtc-streamer rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov

默认端口 8000
​​​ http://xxxx:8000/​

通过WebRTC 的 RTSP 视频获取_ide_03

嵌入 HTML 页面:

不使用内部 HTTP 服务器,很容易在另一个 HTTP 服务器提供的 HTML 页面中显示 WebRTC 流。要使用的 webrtc-streamer 的 URL 应该在创建WebRtcStreamer实例时给出:

var webRtcServer      = new WebRtcStreamer(<video tag>, <webrtc-streamer url>);

使用 webrtc-streamer 在端口 8000 上本地运行的简短示例 HTML 页面:

<html>
<head>
<script src="libs/adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>
var webRtcServer = null;
window.onload = function() {
webRtcServer = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":8000");
webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
}
window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body>
<video id="video" />
</body>
</html>

使用 Web 组件

使用 web-component 可能是显示一些 webrtc 流的简单方法,最小页面可能是:

<html>
<head>
<script type="module" src="webrtc-streamer-element.js"></script>
</head>
<body>
<webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>
</body>
</html>


标签:视频,RTSP,webrtc,streamer,使用,docker,8000,WebRTC,mpromonet
From: https://blog.51cto.com/u_15461374/5938251

相关文章

  • 详解视频中动作识别模型与代码实践
    摘要:本案例将为大家介绍视频动作识别领域的经典模型并进行代码实践。本文分享自华为云社区《视频动作识别》,作者:HWCloudAI。实验目标通过本案例的学习:掌握C3D模型训......
  • 开发者工具|15款音视频开发者必备实用工具
    对于音视频开发者来说,有个高效的辅助工具能大大提升开发效率。今天博主推荐这些年来桌面必备的工具,如果您觉得对你有用,可以收藏防止下次找不到。......
  • java和vue视频点播系统视频弹幕系统
    1.功能简介技术:springboot(spring+springmvc+myibats)+pagehelper+ajax+vue+jquery角色:普通用户+管理员网站主题:视频点播弹幕系统,普通用户上传视频(不是单个视......
  • 2022年解决B站无法上传分P视频的方法
    首先下载安装 哔哩哔哩投稿工具2.3.0.1088https://boss.hdslb.com/material/bilibiliuploader-2.3.0.1088.exe(由于防盗链机制,只能选中右键转到或复制链接到下载器下载)......
  • OpenShot 3.0 发布,非线性视频编辑器
    OpenShot3.0发布,非线性视频编辑器OpenShotVideoEditor|Free,Open,andAward-WinningVideoEditorforLinux,Mac,andWindows!来源:OSCHINA编辑: 白开......
  • 封装格式+音视频同步
    1.封装格式的概念封装格式(也叫容器)就是将已经编码压缩好的视频流、音频流及字幕按照一定的方案放到一个文件中,便于播放软件播放。一般来说,视频文件的后缀名就是它的封装......
  • uniapp 选择图片与视频封装
    //图片选择exportconstchooseImage=function(data){ returnnewPromise((resolve,reject)=>{ uni.chooseImage({ count:data.count||9,//默认9 si......
  • 有了这1款文字一键生成视频的神器,文案都敢和剪辑师叫板了!
    今天公司文案和剪辑师打起来了原因是文案嫌剪辑师视频做的慢剪辑师嫌文案不懂剪辑本着看热闹不嫌事大的关心同事的态度赶紧上前劝说:各位同事大家抬头不见低头见的......
  • 这个AI爆火!输入1段内容,直接生成抖音短视频!
    给你一段话,让你做个视频,你能行吗?AI视频成片工具表示,我可以啊。你没听错:使用AI,你也可以变成电影人了!近日,推出了新的AI模型,名字起得也是非常直接:AI生成视频。这个模型强......
  • 这款工具火了!自媒体一键图文转视频工具!
    这款工具可一键生成相应配音,自动匹配图片动图、进行校对,生成视频,制作完成的视频可直接上传到自媒体平台。这让小黑瞬间来了兴趣马上就打开文章试了试这是我随手找来的一......