从RTSP视频流到Web端再到超图三维

一、转发 rtsp直播视频流到web页面播放
- 1.1 RTSP视频流数据
- 1.2 streamedian：将rtsp转为ws到web端播放
- 1.3 异机部署Streamedian
二、Web端播放WS视频流
- 2.1 H5页面播放
- 2.2 延伸应用：结合超图iClient3D技术实现三维场景的仿真模拟

前言：本文详细介绍1）怎么将rtsp直播视频数据转发为WebSocket流数据服务在web页面直接播放，无插件播放ETSP视频流数据；2）怎么将直播视频画面投射到三维场景中，实现仿真三维。其中技术路线为:

其中 streamedian和 SuperMap iClient3D都是商业软件，提供基础试用版本，对使用时间和功能有所限制，但都能满足个人开发者研究的需求。

一、转发 rtsp直播视频流到web页面播放

本节核心内容讲解streamedian的使用，包括试用许可申请、部署和开发。

1.1 RTSP视频流数据

RTSP（Real Time Streaming Protocol），RFC2326，实时流传输协议,目前主流网络摄像头均支持该协议传输视频。如大华、海康、宇视等，除了rtsp外视频数据一般还会通过hls、rtmp等，这些均可直接在前端引用相关依赖库（github上搜一下很多）直接播放，无需在服务端进行数据流转换。
这里介绍一个小工具VLC（VLC 是一款自由、开源的跨平台多媒体播放器及框架，可播放大多数多媒体文件，以及 DVD、音频 CD、VCD 及各类流媒体协议，https://www.videolan.org/），vlc是一个cs小工具，在我们拿到rtsp视频流地址时可用小工具检验一下能否顺利播放。

点击【播放】即可获得视频直播画面

PS:vlc还支持将本地视频文件转发城rtsp数据流，这就方便了我们在没有rtsp测试地址下的烦恼。传送门：https://blog.csdn.net/LoveForever0/article/details/100178317

1.2 streamedian：将rtsp转为ws到web端播放

streamedian是一个让浏览器能够无插件播放rtsp的项目，完整的使用包含它的两部分服务端和前端依赖js库，官网（https://streamedian.com）均提供下载。类似的也有不少，比如h5ss，在github都能搜到，不过也都是收费的，没有全面测评，目前streamedian用起来比较方便。

登录官网（https://streamedian.com），如果不能打开就试试翻个墙。
第一步：用邮箱进行注册账户并登录

第二步：登陆成功后会直接跳转到下载页面https://streamedian.com/cabinet/#

要下载的是服务端WebSocket RTSP Proxy Server,支持的各种版本也一目了然，本文用的是windows10（这个版本也只支持windows server），操作都很简单，一键安装然后启动，linux版本的也一样，服务端用的是Nginx发布。
HTML5 RTSP video player:是web端的样例和依赖包，可以下载看看，服务端包里也自带了一个样例，在Nginx的HTML文件夹下面。
第三步：windows版本下一步式安装后桌面上会出现启动快捷方式

双击启动并打开测试页面并输入rtsp地址

至此我们已经将rtsp数据转化为websocket数据流在web端进行播放

1.3 异机部署Streamedian

但是但是但是我们只是实现了本地服务端和本地播放，一般实际使用中服务端和客户端都是不同的机器，也就要异机部署了，这时就要用到试用许可了。streamedian的试用版本限制很多，对最大在线数量、并发数量、使用时间、账户申请次数都有限制，尽管如此我们依旧着能免费坚决不付钱的精神通过更换邮箱申请许可、部署多个服务端等上上策来蹭一下。下面简单说一下申请过程，该过程在服务端里也有介绍，启动安装目录下的activation_app.exe

可以选择激活方式，在线或者离线，在线比较方便，输入相关信息即可，这里贴一下离线激活方式：

安装步骤：
1）选择离线激活后会在C:\Users\Public\Documents\Streamedian\WS RTSP Proxy Server目录下载生成一个machine_info.bin文件

2）进入刚才的官网的下载页面

点击【选择文件】上传刚才生成的bin文件，在【ADD】按钮前的输入框内输入客户端机器的IP，可以添加5个，用来访问服务端，添加完毕点击【Activate】，获得许可文件，点击右上角下载获得wsp.lic。

将wsp.lic放置或替换到C:\Users\Public\Documents\Streamedian\WS RTSP Proxy Server下，然后在安装目录下双击restart_service.bat

至此，讲道理我们已经完成了异机streamedian的访问ws数据流的部署，对于那些不讲道理的情况，默哀吧。
PS: 转发成功的WS地址为ws://IP:8088/ws/ 相关端口可以在Nginx的conf里修改
**试用限制:**1）一个rtsp视频流；2）三个客户端机器；3）六个月试用期，每个账户只有5次申请机会

二、Web端播放WS视频流

2.1 H5页面播放

在我们下载的服务端的Nginx里带有前端样例，启动streamedian的时候会自动登录该页面，本地默认的是localhost:8088/
streamedian提供JS库在前端直接播放,官网提供很用sample，其中Videojs integration比较简单
将其下载下来，直接扔到Nginx的html文件夹下访问即可

代码层面如果想嵌入自己的页面步骤：

在DOM中加入video标签，标注id；

<video id="test_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none" autoplay>
</video>

引入JS依赖包

  <script src="streamedian.videojs.min.js"></script>

在JavaScript部分配置相关参数

 //参数配置var videojsPlayer = videojs('#test_video', {streamedian_player_config: {socket: "ws://127.0.0.1:8080/ws/",bufferDuration: 120,}});
//触发事件$('#play').click(function (evt) {var newSource   = "rtsp://192.168.1.1:554/h264";videojsPlayer.src({src: newSource, type: "application/x-rtsp"});videojsPlayer.play();//video3D();三维投射函数，后附};

到这儿你就能在你的web页面里看小电影了，咳咳，还是直播哦。

2.2 延伸应用：结合超图iClient3D技术实现三维场景的仿真模拟

结合三维场景，将视频监控画面在三维场景还原到真实位置，补充了三维场景的动态元素，这里用到的超图的iClient3D技术，如下图，是不是略酷：

图片中红圈范围内的路口就采用了视频投射功能，将路口的视频监控画面和三维场景的路口位置叠合。一方面丰富了三维场景的数据丰富多样性；另一方面也让视频监控有了更多的应用，如果再结合AI动态识别等技术将会有跟进一步的引用。截图的三维场景用的是倾斜摄影的数据，另外目前超图的三维技术支持将倾斜、BIM、3DsMax等三维数据统一转成S3M格式进行三维场景的展示。超图的三维技术支持有详细的在线指导文档和相关示例（传送门：http://support.supermap.com.cn:8090/webgl/examples/examples.html#layer）
本文示例RTSP视频投射
现在打开这个官网地址运行不起来，估计是试用许可到期了网管没换，我们看相关源代码就好了,实在想看效果可以参考旁边一个案例视频投放，效果一毛一样，一个对接本地视片段另一个是直播视频画面。
超图技术讲的不够详细，加个传送门吧，https://blog.csdn.net/supermapsupport

承接以上的代码，注意这里将video标签添加了display：none*属性，其余代码如下

         function video3D(){clearAndActive();var distance = Cesium.Cartesian3.distance(scene.camera.position, last);var distance = 6383304.499152316;console.log("第一个点"+last,"第二个点"+distance);if (distance > 0) {var cartographic = Cesium.Cartographic.fromCartesian(last);var longitude = Cesium.Math.toDegrees(cartographic.longitude);var latitude = Cesium.Math.toDegrees(cartographic.latitude);var height = cartographic.height;projectionImage.setDistDirByPoint([longitude, latitude, height]);projectionImage.distance = Number($("#distance").val());                        projectionImage.pitch=-37.24238277689366;projectionImage.horizontalFov= 20;projectionImage.direction=37.38295196067744;projectionImage.hintLineVisible= false;}}

至此按道理讲，我们可以看到预期的画面，如果看不到，那就看不到吧。

Last but not least ：地震南岗一派溪山千古秀

RTSP数据的无插件播放与超图三维iClient3D的视频投射相关推荐

海康大华等摄像头RTSP低延迟(1秒以内)网页无插件播放解决方案
简介监控摄像头网页无插件播放解决方案虽然很多,但是或多或少会有一定的延迟,其中网上使用最多的是RTSP转RTMP推流的方式,这种延迟一般十秒左右,优化的好的话能达到五秒,但是依旧算不上实时.本文提供 ...
利用RTVS实现html5无插件播放rtsp、rtmp
引言最近经常有人咨询RTVS能否播摄像头的rtsp的流,RTVS暂只支持接入JT/T 1078协议,并不支持rtsp等格式. 但可以借助RTVSDev模拟器将rtsp.rtmp.hls或本地文件等视 ...
Windows PC、 Linux、 Android、 iOS多平台支持H5无插件播放RTSP摄像机解决方案
Windows PC. Linux. Android. iOS多平台支持H5无插件播放RTSP摄像机解决方案需求分析视频流媒体监控行业已经进入互联网时代,浏览器承载了绝大多数的互联网访问流量,目前 ...
EasyNVR、EasyDSS二次开发之：RTMP、HLS流在web页面进行无插件播放示例Demo代码
不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势.对于传统的浏览器插件播放谁用谁知道: 以上是软件自带播放展示背景需求对于EasyNVR和EasyDSS ...
监控摄像头RTSP低延时无插件直播解决方案
监控摄像头RTSP低延时无插件直播解决方案第一章应用简介当前,视频监控应用场景越来越多,传统的视频监控厂商提供的解决方案需要安装厂商自己的手机APP或PC客户端软件,非常不方便在互联网环境下与第 ...
EasyStreamClient对接海康流媒体V4.X实现无插件播放流程记录
之前有一位朋友找到我们寻求帮助,需要解决对接海康流媒体的问题,当时对接的是海康流媒体V4.X,因为平台只支持SDK方式对接,无法满足无插件播放的需求,后来经过与海康官方SDK联系后,取得了开发版SDK ...
GB28181监控视频统一汇聚平台LiveGBS将海康大华华为宇视等厂家监控设备统一接入后如何生成固定播放链接或者固定的流地址可以直接无插件播放或者拉取
目前汇聚各种厂家监控设备的视频汇聚平台,基本都是通过GB28181标准协议实现的.下面介绍下LiveGBS Web无插件直播的GB28181视频平台将各厂家(包括海康.大华.华为.宇视.天地伟业等)监 ...
SfxMCP基于rtsp协议H5无插件直播方案中RTSP设备的接入方法 - sfxlab
SfxMCP基于rtsp协议H5无插件直播方案中RTSP设备的接入方法 - sfxlab SFX流媒体解决方案基于安防行业推出了以媒体汇聚平台(SfxMCP)为主,以媒体分发平台(SfxMDP)和媒体 ...
如何实现web浏览器无插件播放视频监控直播？
很多年前,监控视频的直播只能够进行单一的服务器传输,而如今,很多网站已经可以观看视频直播了,不过大多网站观看视频直播的时候还是需要下载插件,有时候就会碰到系统不兼容.版本不对应等问题,那么能不能实现w ...

RTSP数据的无插件播放与超图三维iClient3D的视频投射