CN112653700A - 一种基于webrtc网页视频通信的方法 - Google Patents

Abstract

本发明提供一种基于WebRTC的网页视频通信的方法，应用于浏览器，包括：H5Player内部创建MediaSource和BlobUrl，并将BlobUrl赋值给video标签的src进行绑定；H5Player从H5STU处拉取视频源文件，放入ArrayBuffer中；H5Player创建SourceBuffer，调用SourceBuffer的appendBuffer接口将ArrayBuffer进行传递给浏览器；浏览器内部对ArrayBuffer中的视频流数据进行解封装以及解码操作，得到解码后的音视频数据；浏览器内部将解码后的音视频数据送至相应的设备进行渲染，在video标签绑定的视频窗口进行视频播放。应用本发明实施例，可以降低通信延迟，应对复杂网络环境，提高用户体验，丰富用户交流形式，降低系统维护成本。

Description

一种基于WEBRTC网页视频通信的方法

技术领域

本发明涉及网页即时通信技术领域，特别涉及一种基于WEBRTC网页视频通信的方法、电子设备及可读存储介质。

背景技术

随着互联网技术和通信技术的快速发展，人们的交流方式与交流内容得到了极大的丰富和发展。在节奏越来越快的信息时代，传统的基于文字的交流方式不仅效率显得有些低，而且有时并不能准确的表达人们的本意。所以，支持语音视频的通信方式逐渐盛行起来。对于早期的网页即时通讯，仍然需要下载臃肿而且并不安全的插件。但WebRTC的出现，弥补了传统即时通讯的不足。

WebRTC，即Web Real-Time Communication，是一个支持网页浏览器进行实时语音视频通话的技术。其直接的应用就是允许开发者能实现视频通话或者其他的点对点的数据传输。WebRTC有一整套的音视频解决方案，并且代码是开源的。此外，WebRTC也是全平台支持的。其不仅局限于网页端，也提供了移动开发使用的接口。

即时通信对互联网发展至关重要，应用很广泛，极大方便了人们的生活。基于P2P技术的即时通信系统成为研究的热点，传统的即时通信工具大多数协议标准不统一，难以定制和集成到开发者的系统中，而且大多数基于C-S架构，对中心服务器过于依赖。WebRTC的出现对即时通信造成了冲击，WebRTC正在成为一项标准。它可以使用户快速方便的进行语音和视频互动。WebRTC的多项技术都领先传统的即时通信系统，是未来即时通信的主流。

发明内容

本发明的目的在于提供一种基于WebRTC的网页视频通信的方法、电子设备及可读存储介质，降低通信延迟，应对复杂网络环境，提高用户体验，丰富用户交流形式，降低系统维护成本。

本发明是这样实现的：

为达到上述目的，本发明提供一种基于WebRTC的网页视频通信的方法，包括：

H5Player内部创建MediaSource和BlobUrl，并将BlobUrl赋值给video标签的src进行绑定；

H5Player从H5STU处拉取视频源文件，放入ArrayBuffer中；

H5Player创建SourceBuffer，调用SourceBuffer的appendBuffer接口将ArrayBuffer进行传递给浏览器；

浏览器内部对ArrayBuffer中的视频流数据进行解封装以及解码操作，得到解码后的音视频数据；

浏览器内部将解码后的音视频数据送至相应的设备进行渲染，在video标签绑定的视频窗口进行视频播放。

进一步的，在上述基于WebRTC的网页视频通信的方法中，所述浏览器支持兼容MSE的视频格式。

进一步的，在上述基于WebRTC的网页视频通信的方法中，从H5STU处拉取的视频源文件的数据格式为fMP4。

进一步的，在上述基于WebRTC的网页视频通信的方法中，从H5STU处拉取的视频源文件的数据格式为PS流，H5STU先解析PS流的音视频数据，将其转换为fMP4格式，然后发送给H5Player。

进一步的，在上述基于WebRTC的网页视频通信的方法中，H5STU解析PS流的音视频数据，将其转换为fMP4格式，包括：

H5STU从PS流的音视频数据中解析出PES包，得到元数据流、音频数据流和视频数据流；

根据元数据流、音频数据流和视频数据流，构建fMP4格式的音视频数据流。

进一步的，在上述基于WebRTC的网页视频通信的方法中，所述H5Player从H5STU处拉取视频源文件，包括：

H5Player通过websocket协议与H5STU进行通信，传递设备的PUID信息，接收H5STU返回的视频源文件。

进一步的，在上述基于WebRTC的网页视频通信的方法中，H5Player与H5STU建立websocket连接，向H5STU中的SIP代理发送Json格式的视频请求，SIP代理将视频请求转发给CMS，CMS将视频请求转发给PU；

根据所述视频请求，PU通过RTP协议将视频源文件发送给H5STU。

进一步的，在上述基于WebRTC的网页视频通信的方法中，H5Player向H5STU中的SIP代理发送Json格式的停止视频请求，SIP代理将停止视频请求转发给CMS，CMS将停止视频请求转发给PU；

根据所述停止视频请求，PU停止向H5STU发送视频源文件。

为达到上述目的，本发明还提供一种电子设备，包括处理器和存储器，所述存储器上存储有计算机程序，所述计算机程序被所述处理器执行时，实现上文任一项所述的基于WebRTC的网页视频通信的方法。

为达到上述目的，本发明还提供一种可读存储介质，所述可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时，实现上文任一项所述的基于WebRTC的网页视频通信的方法。

与现有技术相比，本发明具有以下有益效果：

该方法抛弃传统流媒体通信方式，降低通信延迟，应对复杂网络环境，提高用户体验，丰富用户交流形式，降低系统维护成本；而且操作简单灵活，具有较高的信息传递和响应的速度，适用于大多数移动终端。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本发明的技术方案，下面将对描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一个实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图：

图1是本发明一实施例提供的基于WebRTC的网页视频通信的方法的流程图；

图2是本系统的结构方框图；

图3是MSE播放视频技术简图；

图4是MSE技术详细架构图；

图5是mse播放fmp4文件详细流程图；

图6是Websocket与网页端通信以及媒体流传输流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明的核心思想在于提供一种基于WebRTC的网页视频通信的方法、电子设备及可读存储介质，展开基于WebRTC的P2P即时通信系统的研究和构建工作，可应用于远程康复指导等实际应用场景。WebRTC是一项优秀的免费开放技术标准，它支持浏览器平台，采用P2P技术，方便开发定制和管理。本发明构建的系统在WebRTC技术优势的基础上，加入对信息无障碍技术标准的支持，着重于即时系统低延迟性、低流量消耗的特性。针对这些特性，本发明主要从两个方面入手。一方面是针对系统的传输信道和传输的消息的格式，本发明在信道上采用WebSocket的技术，消息在传输前进行基于值编码的序列化，旨在提高消息推送的即时性和降低网络传输量。另一方面在媒体流P2P传输上，针对WebRTC中建立P2P采用的ICE方式穿越NAT的不足进行改进，提出加入端口预测算法和对NAT信息分析算法，针对主机所在网络拓扑的不同，采用不同的地址对进行连通测试，自适应主机所在的网络。

如图1所示，本发明一实施例提供的基于WebRTC的网页视频通信的方法，应用于浏览器，包括以下步骤：

S100：H5Player内部创建MediaSource和BlobUrl，并将BlobUrl赋值给video标签的src进行绑定；

S200：H5Player从H5STU处拉取视频源文件，放入ArrayBuffer中；

S300：H5Player创建SourceBuffer，调用SourceBuffer的appendBuffer接口将ArrayBuffer进行传递给浏览器；

S400：浏览器内部对ArrayBuffer中的视频流数据进行解封装以及解码操作，得到解码后的音视频数据；

S500：浏览器内部将解码后的音视频数据送至相应的设备进行渲染，在video标签绑定的视频窗口进行视频播放。

优选的，在本发明中，所述浏览器可以为移动终端的浏览器，也可以为PC端的浏览器。所述浏览器支持兼容MSE的视频格式，MSE(Media Source Extension，媒体源扩展)技术详细架构图如图4所示。从H5STU处拉取的视频源文件的数据格式优选为fMP4。若从H5STU处拉取的视频源文件的数据格式为PS流，则H5STU先解析PS流的音视频数据，将其转换为fMP4格式，然后发送给H5Player。

具体的，如图5所示，H5STU解析PS流的音视频数据，将其转换为fMP4格式，包括：

H5STU从PS流的音视频数据中解析出PES包，得到元数据流、音频数据流和视频数据流；

根据元数据流、音频数据流和视频数据流，构建fMP4格式的音视频数据流。

在步骤S200中，所述H5Player从H5STU处拉取视频源文件，包括：

H5Player通过websocket协议与H5STU进行通信，传递设备的PUID信息，接收H5STU返回的视频源文件。

具体的，如图6所示，H5Player与H5STU建立websocket连接，向H5STU中的SIP代理发送Json格式的视频请求，SIP代理将视频请求转发给CMS，CMS将视频请求转发给PU；根据所述视频请求，PU通过RTP协议将视频源文件发送给H5STU。

H5Player向H5STU中的SIP代理发送Json格式的停止视频请求，SIP代理将停止视频请求转发给CMS，CMS将停止视频请求转发给PU；根据所述停止视频请求，PU停止向H5STU发送视频源文件。

下面对实现本发明的技术方案进行详细介绍：

HTML5提供了多媒体播放元素，可以无需插件直接在浏览器中播放视频(浏览器提供视频解码和渲染能力，使用时只需“喂”给浏览器合适格式的音视频数据即可)。并且各大浏览器对此支持度都很好，通过HTML5video/audio标签，可以实现简单的视音频文件的点播播放，支持的文件格式有.mp4，.ogg，.webm，最常用的还是mp4格式。如图2所示。但是，这种使用方式存在一比较致命的问题：不能灵活地的进行流式控制和播放，即不支持实时视频/直播，只能进行文件点播，在直播技术火热发展的形势下，MSE诞生，媒体扩展源的被各大浏览器快速支持，让PC WEB端也开始具备直播/实时视频的能力。

Media Source Extension(MSE，媒体源扩展)是Chrome、Safari、Edge等主流浏览器支持的一个新的Web API。MSE是一个W3C标准，允许JavaScript动态构建<video>和<audio>的媒体流，通过JS控制，将字节流发送给浏览器媒体解码器进行播放，扩展了web应用的视频播放功能，解决HTML5原生标签播放的局限，从而实现实时观看直播。具体的，MSE把通常的单个媒体文件的src值替换成引用MediaSource对象(一个包含即将播放的媒体文件的准备状态等信息的容器)，以及引用多个SourceBuffer对象(代表多个组成整个串流的不同媒体块)的元素。MSE让我们能够根据内容获取的大小和频率，或是内存占用详情(例如什么时候缓存被回收)，进行更加精准地控制。它是基于它可扩展的API建立自适应比特率流客户端(例如DASH或HLS的客户端)的基础。通过使用MSE，可以动态地修改媒体流而不需要任何插件。这让前端JavaScript可以做更多的事情——在JavaScript进行转封装、处理，甚至转码，支持更多的视频封装格式。虽然MSE不能让流直接传输到media tags上，但是MSE提供了构建跨浏览器播放器的核心技术，让浏览器通过JavaScriptAPI来推音视频到mediatags上。如图3和图4所示。

①在浏览器支持兼容MSE的视频格式上，H.264视频编码、AAC音频编码以及fMP4容器的视频格式是最常见的，且一定被各浏览器所兼容。为此在系统设计上，H5Player接收的音视频数据流格式上，也选定为fMP4。

fMP4，也称为“碎片化的MP4”，等价于ISO Base Media File Format，和普通的MP4格式不是同一种格式。普通的MP4实际代表的含义是MPEG-4Part 14。它只是MPEG标准中的14部分。fmp4是基于MPEG-4Part 12的流媒体格式。它们的结构图如图5所示。

②由于国标GB28181的码流主要是MPEG2-PS封装，播放PS流是浏览器video原生标签不支持的，所以首先需要解析PS流并将其转换为fMP4文件格式，供浏览器播放。后续流程与fMP4处理流程一致。如图4-6所示。

③内部创建MediaSource和BlobUrl，并将BlobUrl赋值给video标签的src进行绑定，为接收流式数据做好准备。

④播放器拉取数据：使用websocket和H5STU进行通信，传递设备的PUID等信息，接收其发送的fMP4流，放入ArrayBuffer中。

⑤创建SourceBuffer，调用SourceBuffer的appendBuffer接口将ArrayBuffer进行传递给浏览器(video标签)。

⑥浏览器内部对fMp4格式进行demux解封装以及解码操作，得到解码后的音视频数据。

⑦浏览器内部调用相关的渲染接口，将解码后的像素/采样数据送至相应的设备进行渲染，在video标签绑定的视频窗口进行视频播放。

基于同一发明构思，本发明还提供一种电子设备，包括处理器和存储器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现如上文所述的基于WebRTC的网页视频通信的方法。

所述处理器在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器通常用于控制所述电子设备的总体操作。本实施例中，所述处理器用于运行所述存储器中存储的程序代码或者处理数据，例如运行基于WebRTC的网页视频通信的方法的程序代码。

所述存储器至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器可以是所述电子设备的内部存储单元，例如该电子设备的硬盘或内存。在另一些实施例中，所述存储器也可以是所述电子设备的外部存储设备，例如该电子设备上配备的插接式硬盘，智能存储卡(SmartMedia Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器还可以既包括所述电子设备的内部存储单元也包括其外部存储设备。本实施例中，所述存储器通常用于存储安装于所述电子设备的操作方法和各类应用软件，例如基于WebRTC的网页视频通信的方法的程序代码等。此外，所述存储器还可以用于暂时地存储已经输出或者将要输出的各类数据。

基于同一发明构思，本发明还提供一种可读存储介质，所述可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现如上文所述的基于WebRTC的网页视频通信的方法。

综上所述，本发明提供的一种基于WebRTC的网页视频通信的方法、电子设备及可读存储介质，具有下列优点和积极效果：

①捕获准确性高：能量刷选器可以根据上行导频能量信号计算器的计算结果得出接收到的WCDMA手机信号是否为目标发射的信号，从而提高目标探测的准确度。

②捕获距离远：能量刷选器通过对上行导频能量信号计算器的计算结果进行数据概率统计分析，从而从上行导频能量信号计算器的计算结果中刷选出有效的数据，从而大幅度的提升临界距离的分辨率，从而大幅度的提升捕获的距离。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种基于WebRTC的网页视频通信的方法，其特征在于，应用于浏览器，包括：

H5Player内部创建MediaSource和BlobUrl，并将BlobUrl赋值给video标签的src进行绑定；

H5Player从H5STU处拉取视频源文件，放入ArrayBuffer中；

H5Player创建SourceBuffer，调用SourceBuffer的appendBuffer接口将ArrayBuffer进行传递给浏览器；

浏览器内部对ArrayBuffer中的视频流数据进行解封装以及解码操作，得到解码后的音视频数据；

浏览器内部将解码后的音视频数据送至相应的设备进行渲染，在video标签绑定的视频窗口进行视频播放。

2.如权利要求1所述的基于WebRTC的网页视频通信的方法，其特征在于，所述浏览器支持兼容MSE的视频格式。

3.如权利要求2所述的基于WebRTC的网页视频通信的方法，从H5STU处拉取的视频源文件的数据格式为fMP4。

4.如权利要求2所述的基于WebRTC的网页视频通信的方法，其特征在于，从H5STU处拉取的视频源文件的数据格式为PS流，H5STU先解析PS流的音视频数据，将其转换为fMP4格式，然后发送给H5Player。

5.如权利要求4所述的基于WebRTC的网页视频通信的方法，其特征在于，H5STU解析PS流的音视频数据，将其转换为fMP4格式，包括：

H5STU从PS流的音视频数据中解析出PES包，得到元数据流、音频数据流和视频数据流；

根据元数据流、音频数据流和视频数据流，构建fMP4格式的音视频数据流。

6.如权利要求1所述的基于WebRTC的网页视频通信的方法，其特征在于，所述H5Player从H5STU处拉取视频源文件，包括：

H5Player通过websocket协议与H5STU进行通信，传递设备的PUID信息，接收H5STU返回的视频源文件。

7.如权利要求6所述的基于WebRTC的网页视频通信的方法，其特征在于，H5Player与H5STU建立websocket连接，向H5STU中的SIP代理发送Json格式的视频请求，SIP代理将视频请求转发给CMS，CMS将视频请求转发给PU；

根据所述视频请求，PU通过RTP协议将视频源文件发送给H5STU。

8.如权利要求7所述的基于WebRTC的网页视频通信的方法，其特征在于，H5Player向H5STU中的SIP代理发送Json格式的停止视频请求，SIP代理将停止视频请求转发给CMS，CMS将停止视频请求转发给PU；

根据所述停止视频请求，PU停止向H5STU发送视频源文件。

9.一种电子设备，其特征在于，包括处理器和存储器，所述存储器上存储有计算机程序，所述计算机程序被所述处理器执行时，实现权利要求1至8中任一项所述的方法。

10.一种可读存储介质，其特征在于，所述可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时，实现权利要求1至8中任一项所述的方法。

Images