1、webrtc1.1 什么是WebRTC百度概念：WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 简单的说：WebRTC 是一种 HTML5规范，他无需在浏览器中安装任何插件可以在网页内进行实时通信工作的开源技术，它直接在浏览器和设备之间添加实时媒体通信。  2、rtsp2.1 什么是rtsp官方概念：实时流传输协议（Real Time Streaming Protocol，RTSP），RFC2326（中文版），是TCP/IP协议体系中的一个应用层协议，由哥伦比亚大学、网景和RealNetworks公司提交的IETF RFC标准。该协议定义了一对多应用程序如何有效地通过IP网络传送多媒体数据。RTSP在体系结构上位于RTP和RTCP之上，它使用TCP或UDP完成数据传输。HTTP与RTSP相比，HTTP请求由客户机发出，服务器作出响应；使用RTSP时，客户机和服务器都可以发出请求，即RTSP可以是双向的。RTSP是用来控制声音或影像的多媒体串流协议，并允许同时多个串流需求控制，传输时所用的网络通讯协定并不在其定义的范围内，服务器端可以自行选择使用TCP或UDP来传送串流内容，它的语法和运作跟HTTP 1.1类似，但并不特别强调时间同步，所以比较能容忍网络延迟。而前面提到的允许同时多个串流需求控制（Multicast），除了可以降低服务器端的网络用量，更进而支持多方视讯会议（Video Conference）。因为与HTTP1.1的运作方式相似，所以代理服务器〈Proxy〉的快取功能〈Cache〉也同样适用于RTSP，并因RTSP具有重新导向功能，可视实际负载情况来转换提供服务的服务器，以避免过大的负载集中于同一服务器而造成延迟。 简单概念：RTSP是实时视频网络传输主流的实现方式，是一种网络流媒体协议。低延时高清晰度的RTSP视频流传输是网络直播、在线会议系统等行业的核心技术。 2.2 实时流协议RTSPRTSP协议是一个基于文本的多媒体播放控制协议，属于应用层。RTSP以客户端方式工作，对流媒体提供播放、暂停、后退、前进等操作。该标准由IETF指定，对应的协议是RFC2326。 RTSP作为一个应用层协议，提供了一个可供扩展的框架，使得流媒体的受控和点播变得可能，它主要用来控制具有实时特性的数据的发送，但其本身并不用于传送流媒体数据，而必须依赖下层传输协议(如RTP/RTCP)所提供的服务来完成流媒体数据的传送。RTSP负责定义具体的控制信息、操作方法、状态码，以及描述与RTP之间的交互操作。RTSP媒体服务协议框架如下：  RTSP有很多优点：
【学习地址】：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发   2.3 RTSP的URL格式客户端要播放RTSP媒体流，就需要知道媒体源的URL，RTSP的URL格式一般如下： rtsp://host[:port]/[abs_path]/content_name复制代码
例如，一个完整的RTSP URL可写为： rtsp://admin:admin@192.168.23.80:554/1/1 3、实现方案在html技术中目前是无法直接使用现有的web技术进行播放rtsp直播数据流的，下面总结了web可以播放rtsp视频流的方法。 3.1 RTMP方案方案描述： ffmpeg 将rtsp视频流转为rtmp视频流，通过nginx代理，web接入rtmp协议播放，需要flash支持 后端： ffmpeg + nginx + nginx-rtmp-module，利用docker搭建nginx rtmp流媒体服务器，将摄像头的rtsp视频流推送到流媒体服务器，在web页面用video.js播放。 web端：
方案结论：
3.2 HLS方案方案描述： 它的基本原理也是服务端把文件或媒体流按照不同的码率切分成一个个小片段进行传输，客户端在播放码流时，可以根据自身的带宽及性能限制，在同一视频内容的不同码率的备用源中，选择合适码率的码流进行下载播放。在传输会话开始时，客户端首先需要下载描述不同码流元数据的M3U8索引文件。
后端： ffmpeg + nginx + nginx-rtmp-module web端：
方案结论：
3.3 WebSocket方案方案描述： WebSocket是经过上面两种方案实践之后最终使用的方案，特点是Web原生支持，打开快。 后端： 服务器端用 websocket 接受 rtsp ，然后，推送至客户端 web端： 此方案，客户端因为直接转成了mp4，所以web端的video标签直接可以显示。 方案结论： 此方案主要是后端的任务，前端接收的就是普通的mp4格式视频数据，直接显示就可以。 3.4 VLC插件播放方案web端：
实现： //html部分<object type='application/x-vlc-plugin' windowless="true" pluginspage="http://www.videolan.org/" id="vlc" events="false"> <param name='mrl'> <param name='volume' value='50'> <param name='autoplay' value='true'> <param name='loop' value='false'> <param name='fullscreen' value='false'> <param name='controls' value='false'> </object> //mrl定义相机的rtsp地址 let mrl= "rtsp://admin:buaa123456@192.168.1.106:554/h264/ch1/main/av_stream"; //获取vlc的原生dom对象 vlc=$("#vlc")[0]; //先清除上次播放列表 vlc.playlist.clear(); //添加新的播放地址 vlc.playlist.add(mrl); //开始播放 vlc.playlist.play(); 复制代码 方案结论：
3.5 JSMpeg方案方案描述： ffmpeg + http server(接流)+ websocket(server中继转发,client接收流) + jsmpeg.js 后端： ffmpeg + http server + websocket server
Web端：
方案结论：
3.6 WebRTC方案--基于webrtc-streamer（目前财物系统使用该方案）后端：
Web端：
基于vue实现： 1、根据上述的开源地址，下载最新的资料包。将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。在index.html文件里引入这两个js文件。   2、编写测试页面 ，本地测试的话需要启动webrtc-streamer本地服务 <template><div> <a-button @click="handleChange">切换</a-button> <video id="video" autoplay width="900" height="900"></video> </div> </template> <script> export default { name: 'index1', data() { return { webRtcServer: null//webRtcServer上下文 } }, mounted() { //video：需要绑定的video控件ID //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000 this.webRtcServer = new WebRtcSteamer('video', location.protocol + '//127.0.0.1:8000') //需要查看的rtsp地址,地址为财物系统地址 this.webRtcServer.connect('rtsp://admin:admin@192.168.23.80:554/1/1') }, beforeDestroy() { this.webRtcServer.disconnect() this.webRtcServer = null }, methods: { /** * 有多个视频源的情况下，直接调用服务的connect方法即可 */ handleChange() { this.webRtcServer.connect('rtsp://admin:admin@192.168.23.80:554/1/1') } } } </script> <style scoped></style> 复制代码 方案结论：
3.7 其他方案
4、后语本次的前端业务WebRTC只做了浅显的了解和应用，只应用了接收流，还没有用到推流，WebRTC还有更多用法，比如实现实时视频通话、语音通话等，也许以后的业务中会用到。 原文链接：https://juejin.cn/post/7210574986780426277 |
万奢网手机版
官网微博：万奢网服务平台
