WebRTC相关视频讲解：

什么是WebRTC

WebRTC入门到精通该怎么学？

WebRTC框架剖析

音视频流媒体高级开发：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

背景

由于项目需要，需要使用摄像头预览功能，设备型号为海康威视。目前已存在的基于 FFmpeg 的方案延迟都太高，所以项目最终选择基于此方案。

方案

方案选用为基于 WebRTC 的视频即时通讯，它原生支持对 RTP 协议的解码，所以能够做到延迟很低，大概0.2-0.4秒左右，其他方案都有大于1秒的延迟。

WebRTC对浏览器有要求，可以在下面的地址中查看支持的浏览器。

https://caniuse.com/rtcpeerconnection

以下介绍内容来自百度百科

WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以达到实时通讯（Real-Time Communications (RTC)）能力。

WebRTC 的实现方案在 Github 有非常多，经过一序列对比和测试，最终选择的是使用 webrtc-streamer 这个项目，其容易使用并且较为稳定。

Getting Started

webrtc-streamer 不仅支持对 RTSP 流的捕获而且还支持对V4L2以及屏幕窗口快照的捕获。

webrtc-streamer 内置了一个小型的 HTTP server 来对 webrtc 需要的相关接口提供支持。

下面具体开始如何设置：

对摄像头进行配置

由于 webrtc 的核心库还不支持 h265, 所以需要设置为 h264 编码。

登录到海康威视摄像头的后台配置中心，在 “视音频” 菜单下进行设置，然后保存。

下载最新包

在github 发布页面根据需要的平台选择相应的包下载

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

下载完成后可以使用以下命令进行测试：

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

打开 localhost:8000 已访问页面

测试设备

如果没有问题，就可以使用本地的设备进行测试了，海康威视视频流默认地址为：

rtsp://账号:密码@IP地址:554/Streaming/Channels/101

替换相应的信息以进行测试。

如果是在 windows 下，webrtc-streamer 也会抓取到窗口和屏幕的快照页面，可以使用 -q 参数进行过滤，其支持正则表达式。这个参数没有在 help 列表里面列出来是我查看源码发现的。

./webrtc-streamer  rtsp://账号:密码@IP地址:554/Streaming/Channels/101 -q (?=rtsp).*

集成

你可以在下载的发布包中的html文件夹中找到 index.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>

使用 WebComponent 集成

<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>

总结

主要还是对 webrtc 的熟悉，你可以在 https://webrtc.org/getting-started/overview 找到相关指南。

比如什么是 TURN server，什么是peer connections 都可以在上面的指南中找到。

更多音视频开发知识点学习资料点击：学习资料获取

音视频流媒体高级开发：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

基于 WebRTC 的 RTSP 视频实时预览相关推荐

html 预览海康实时视频,海康视频实时预览插件
更新记录 1.0.1(2020-06-17) 对于没有云台的设备,新增了直接全屏播放的调用函数 1.0.0(2020-06-12) 修改插件采集的数据.发送的服务器地址.以及数据用途说明查看更多平 ...
网络监控摄像头流媒体视频管理平台实时预览零延迟支持海康威视浙江大华宇视等解决方案分析
方案简介网络摄像头监控视频低延迟一直是一个比较难以解决的问题,很多非音视频开发专业的技术人员,花费了大量精力开发出来的各种集成网络监控摄像头在浏览器Web网页实时播放的程序,要么延迟非常高,要么及其 ...
吐槽memoQ | 视频翻译实时预览
熟悉memoQ的小伙伴都知道,强大的翻译预览是小伙伴们喜欢memoQ的主要功能之一.除了内置预览,memoQ还开发了PDF外置预览插件,解决了许多不常见的格式预览问题. memoQ顺利解决了静态的文本 ...
vue2实现海康威视根据海康插件进行监控实时预览和回放功能，全套代码，开箱即用。
这是一套拿到手就能直接用的根据海康提供的摄像机节点实时预览和回放的全步骤代码,开箱即用. 前言我的是基于vue2写的,vue3可以看我下一篇文章. 点击跳转至vue3关于海康视频开发文章. 很多人 ...
基于Python的双USB摄像头实时预览保存软件
基于PyQt5,opencv,实现双usb外接摄像头拍摄存储双摄像头支持单独开启关闭,实时预览视频,单独/同时保存预览视频图片多线程模式,支持掉线重连(有点bug,因无法绑定设备id,画面会出现错 ...
Nginx+FFmpeg 海康、大华NVR实现rtsp转flv实时预览+录像回放
工具准备FFmpeg,推流工具Nginx,要想实现Flv还需要安装模块nginx-http-flv-module,这个模块需要编译,如果是linux环境很方便,如果是windows环境,对不起,超级麻 ...
EasyRTMP：RTMP推流海康威视实时预览回调PS流用EasyRTMP向RTMP服务器推流中视频数据处理的代码
在上一篇方案<EasyRTMP结合海康HCNetSDK获取海康摄像机H.264实时流并转化成为RTMP直播推流(附源码)>中我们介绍了将海康安防摄像机进行互联网直播的整体方案流程,其中有一 ...
antd picker 使用如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...
修复百度编辑器插入视频的bug，可实时预览视频，可修改到支持手机查看视频...
站在前人的肩膀上我们就可以站的更高,看得更远. 所以,请在 ueditor.config.js中搜索 whitlist , 在后面加入 source: ['src', 'type'], embed: ...

基于 WebRTC 的 RTSP 视频实时预览

WebRTC相关视频讲解：

背景

方案

Getting Started

对摄像头进行配置

下载最新包

测试设备

集成

总结

更多音视频开发知识点学习资料点击：学习资料获取

音视频流媒体高级开发：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

基于 WebRTC 的 RTSP 视频实时预览相关推荐

最新文章

热门文章

基于 WebRTC 的 RTSP 视频实时预览

WebRTC相关视频讲解：

背景

方案

Getting Started

对摄像头进行配置

下载最新包

测试设备

集成

总结

更多音视频开发知识点学习资料点击：学习资料 获取

音视频流媒体高级开发：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

基于 WebRTC 的 RTSP 视频实时预览相关推荐

最新文章

热门文章

更多音视频开发知识点学习资料点击：学习资料获取