CN112019482A - 基于Web的通信方法及计算机可读存储介质 - Google Patents

基于Web的通信方法及计算机可读存储介质 Download PDF

Info

Publication number
CN112019482A
CN112019482A CN201910462223.2A CN201910462223A CN112019482A CN 112019482 A CN112019482 A CN 112019482A CN 201910462223 A CN201910462223 A CN 201910462223A CN 112019482 A CN112019482 A CN 112019482A
Authority
CN
China
Prior art keywords
client
data
preset
server
multimedia stream
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201910462223.2A
Other languages
English (en)
Other versions
CN112019482B (zh
Inventor
刘德建
黄世民
钟良德
王盛伟
郭玉湖
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Tianquan Educational Technology Ltd
Original Assignee
Fujian Tianquan Educational Technology Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fujian Tianquan Educational Technology Ltd filed Critical Fujian Tianquan Educational Technology Ltd
Priority to CN201910462223.2A priority Critical patent/CN112019482B/zh
Publication of CN112019482A publication Critical patent/CN112019482A/zh
Application granted granted Critical
Publication of CN112019482B publication Critical patent/CN112019482B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/50—Network services
    • H04L67/55—Push-based network services

Abstract

本发明公开了一种基于Web的通信方法及计算机可读存储介质，方法包括：第一客户端与第二客户端分别与服务端建立通信连接；第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；第二客户端将所述多媒体流数据解码为预设类型数据；第二客户端根据所述预设类型数据，创建对应的URL对象；第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。本发明无需安装任何第三方插件或对浏览器进行扩展，利用原生浏览器即可实现较稳定的语音视频通信。

Description

基于Web的通信方法及计算机可读存储介质
技术领域
本发明涉及网页通信技术领域，尤其涉及一种基于Web的通信方法及计算机可读存储介质。
背景技术
目前，若要通过网页进行语音视频通信，可通过WebRTC(网页即时通信)技术实现。但WebRTC利用P2P时，只能在内网通信，无法在公网通信，如果在公网通信需要内网NAT网络穿透，存在不稳定性，且WebRTC目前还不是标准，随时可能更改规范。
并且，基于浏览器沙箱安全原理，不允许脚本操作本地文件系统，如果要操作本地系统或硬件设备需要通过安全插件(比如IE的Activex)或者通过Flash技术，但Flash技术目前被各大浏览器厂商禁用，且这两种方案对用户体验都不好，很容易被病毒利用。
发明内容
本发明所要解决的技术问题是：提供一种基于Web的通信方法及计算机可读存储介质，无需安装任何第三方插件或对浏览器进行扩展，即可通过浏览器实现语音和视频的通信。
为了解决上述技术问题，本发明采用的技术方案为：一种基于Web的通信方法，包括：
第一客户端与第二客户端分别与服务端建立通信连接；
第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；
第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；
第二客户端将所述多媒体流数据解码为预设类型数据；
第二客户端根据所述预设类型数据，创建对应的URL对象；
第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。
本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如下步骤：
第一客户端与第二客户端分别与服务端建立通信连接；
第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；
第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；
第二客户端将所述多媒体流数据解码为预设类型数据；
第二客户端根据所述预设类型数据，创建对应的URL对象；
第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。
本发明的有益效果在于：客户端通过浏览器提供API可以获取到本地声音接收设备和视频输入设备的数据流，然后将该数据流通过服务端推送给其他客户端，其他客户端将该数据流进行处理后提供给HTML5页面的audio标签和video标签，即可播放出对应的音频和视频，从而实现了语音和视频的通信。本发明无需安装任何第三方插件或对浏览器进行扩展，利用原生浏览器即可实现较稳定的语音视频通信。
附图说明
图1为本发明的一种基于Web的通信方法的流程图；
图2为本发明实施例一的方法流程图。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图详予说明。
本发明最关键的构思在于：利用浏览器提供API获取到本地麦克风和摄像头的数据流，并将数据流转换成base64数据进行传输；将base64数据解码为Blob数据，并创建URL提供给audio标签和video标签。
请参阅图1，一种基于Web的通信方法，包括：
第一客户端与第二客户端分别与服务端建立通信连接；
第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；
第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；
第二客户端将所述多媒体流数据解码为预设类型数据；
第二客户端根据所述预设类型数据，创建对应的URL对象；
第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。
从上述描述可知，本发明的有益效果在于：无需安装任何第三方插件或对浏览器进行扩展，利用原生浏览器即可实现较稳定的语音视频通信。
进一步地，所述第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端具体为：
第一客户端按照预设的周期，将当前周期采集到的多媒体流数据转换为预设格式的字符串数据；
第一客户端将所述字符串数据传输至服务端；
服务端将所述字符串数据传输至第二客户端。
由上述描述可知，通过服务端进行转发，服务端还可对多媒体流数据进行监控。
进一步地，所述预设格式为base64或arraybuffe。
由上述描述可知，通过把多媒体流数据转换为base64数据或arraybuffe数据，便于传输。
进一步地，所述预设类型数据为Blob类型数据；
所述第二客户端根据所述预设类型数据，创建对应的URL对象具体为：
第二客户端根据所述预设类型数据，通过URL.createObjectURL()方法创建对应的URL对象。
进一步地，所述根据所述URL对象，设置所述第二客户端上预设的HTML5页面的音频标签属性和/或视频标签属性具体为：
将所述URL对象赋值给所述第二客户端上预设的HTML5页面的audio标签的src属性和/或video标签的src属性。
由上述描述可知，通过将多媒体流数据对应的URL提供给audio标签和video标签，即可实现语音和视频的播放。
本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的步骤。
实施例一
请参照图2，本发明的实施例一为：一种基于Web的通信方法，可利用浏览器实现语音视频通信，包括如下步骤：
S1：第一客户端与第二客户端分别与服务端建立通信连接，进一步地，建立WebSocket连接。其中，本实施例的第一客户端指的语音视频数据的发送方，第一客户端上已安装好声音接收设备(如麦克风)和视频输入设备(如摄像头)；第二客户端指的是语音视频数据的接收方，第二客户端可以有多个。
S2：第一客户端开启声音接收设备和视频输入设备，并采集多媒体流数据，即打开麦克风和摄像头，并采集音频流和视频流。进一步地，可通过浏览器中的API(MediaDevices.getUserMedia())来获取打开麦克风和摄像头，具体地，通过navigator.mediaDevices.getUserMedia({autdio:true,video:true})来打开麦克风和摄像头。
S3：第一客户端按照预设的周期，将当前周期采集到的多媒体流数据转换为预设格式的字符串数据，并传输至服务端；例如，每隔1秒将采集到多媒体流数据转换成base64编码格式的字符串数据，然后将转换后的字符串数据通过已经建立连接的WebSocket通道传输到服务端。
进一步地，也可以将多媒体流数据转换成arraybuffe类型的数据后再进行传输，即设置websocket.binaryType＝'arraybuffer'。
S4：服务端将所述字符串数据传输至第二客户端。进一步地，服务端可以先对接收到的数据进行相应的业务处理，如监控，再把接收到的字符串数据通过WebSocket通道转发给其他与其WebSocket连接的第二客户端。
例如，可以将字符串数据恢复成多媒体流，然后将语音转换为文本内容，对文本内容进行自然语言的处理校验，当检测到非法的语音或视频时，可断开与第一客户端的WebSocket通道。
每个客户端和服务端的WebSocket连接都有一个通道，服务端保存了当前所有与其连接的客户端通道，假设目前有A、B和C三个客户端与服务端WebSocket连接，A将多媒体流数据发送给了服务端，服务端就会通过A通道收到这些数据，然后服务端对当前所有的客户端通道进行遍历，除A通道不发送(接收数据的时候可以知道数据是从哪个通道过来的)，其他通道都发送这些数据。
S5：第二客户端接收到所述字符串数据后，将所述字符串数据解码为预设类型数据；例如，可将base64字符串解码为Blob类型数据。
S6：第二客户端根据所述预设类型数据，创建对应的URL对象；具体地，可通过URL.createObjectURL()方法创建Blob类型数据对应的URL对象。
S7：第二客户端根据所述URL对象，设置所述第二客户端上预设的HTML5页面的音频标签属性和视频标签属性，即将所述URL对象赋值给所述第二客户端上预设的HTML5页面的audio标签的src属性和video标签的src属性。
进一步地，可根据需求只将URL对象赋值给audio标签的src属性或video标签的src属性。例如，可在客户端与服务端之间制定一段通信协议格式，比如:{audio:true,vdeo:false,audioData:”音频数据”,vdeoData:”视频数据”}，当客户端收到该格式消息时，发现audio的字段为true，就把audioData字段的数据赋值给audio标签的src，video字段为false，那么videoData就不处理。
本实施例得益于现代浏览器(chrome、Firefox)的发展，这些浏览器提供一个新的API(MediaDevices.getUserMedia())，通过该API可以获取到本地麦克风和摄像头的数据流，并通过javascript脚本把该数据流转换成base64数据或arraybuffe数据，然后客户端通过websocket把转换后的数据传输到服务端，服务端收到数据后，推送给其他websocket连接的客户端，其他客户端收到该数据后，反转base64数据或arraybuffe数据为Blob数据，再把数据提供给audio标签或video标签进行播放，从而实现了语音和视频的通信。
本实施例可比较稳定地实现语音视频通信，无需安装任何第三方插件或扩展，直接利用原生浏览器提供的特性就能实现，且能够实现对语音和视频的监控。
实施例二
本实施例是对应上述实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如下步骤：
第一客户端与第二客户端分别与服务端建立通信连接；
第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；
第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；
第二客户端将所述多媒体流数据解码为预设类型数据；
第二客户端根据所述预设类型数据，创建对应的URL对象；
第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。
进一步地，所述第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端具体为：
第一客户端按照预设的周期，将当前周期采集到的多媒体流数据转换为预设格式的字符串数据；
第一客户端将所述字符串数据传输至服务端；
服务端将所述字符串数据传输至第二客户端。
进一步地，所述预设格式为base64或arraybuffe。
进一步地，所述预设类型数据为Blob类型数据；
所述第二客户端根据所述预设类型数据，创建对应的URL对象具体为：
第二客户端根据所述预设类型数据，通过URL.createObjectURL()方法创建对应的URL对象。
进一步地，所述根据所述URL对象，设置所述第二客户端上预设的HTML5页面的音频标签属性和/或视频标签属性具体为：
将所述URL对象赋值给所述第二客户端上预设的HTML5页面的audio标签的src属性和/或video标签的src属性。
综上所述，本发明提供的一种基于Web的通信方法及计算机可读存储介质，通过浏览器提供的API可以获取到本地麦克风和摄像头的数据流，并通过javascript脚本把该数据流转换成base64数据或arraybuffe数据，然后客户端通过websocket把转换后的数据传输到服务端，服务端收到数据后，推送给其他websocket连接的客户端，其他客户端收到该数据后，反转base64数据或arraybuffe数据为Blob数据，再把数据提供给audio标签或video标签进行播放，从而实现了语音和视频的通信。本发明可比较稳定地实现语音视频通信，无需安装任何第三方插件或扩展，直接利用原生浏览器提供的特性就能实现，且能够实现对语音和视频的监控。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于Web的通信方法，其特征在于，包括：
第一客户端与第二客户端分别与服务端建立通信连接；
第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；
第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；
第二客户端将所述多媒体流数据解码为预设类型数据；
第二客户端根据所述预设类型数据，创建对应的URL对象；
第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。
2.根据权利要求1所述的基于Web的通信方法，其特征在于，所述第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端具体为：
第一客户端按照预设的周期，将当前周期采集到的多媒体流数据转换为预设格式的字符串数据；
第一客户端将所述字符串数据传输至服务端；
服务端将所述字符串数据传输至第二客户端。
3.根据权利要求2所述的基于Web的通信方法，其特征在于，所述预设格式为base64或arraybuffe。
4.根据权利要求1所述的基于Web的通信方法，其特征在于，所述预设类型数据为Blob类型数据；
所述第二客户端根据所述预设类型数据，创建对应的URL对象具体为：
第二客户端根据所述预设类型数据，通过URL.createObjectURL()方法创建对应的URL对象。
5.根据权利要求1所述的基于Web的通信方法，其特征在于，所述根据所述URL对象，设置所述第二客户端上预设的HTML5页面的音频标签属性和/或视频标签属性具体为：
将所述URL对象赋值给所述第二客户端上预设的HTML5页面的audio标签的src属性和/或video标签的src属性。
6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如下步骤：
第一客户端与第二客户端分别与服务端建立通信连接；
第一客户端开启声音接收设备和/或视频输入设备，并采集多媒体流数据；
第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端；
第二客户端将所述多媒体流数据解码为预设类型数据；
第二客户端根据所述预设类型数据，创建对应的URL对象；
第二客户端根据所述URL对象，设置所述第二客户端上的预设的HTML5页面的音频标签属性和/或视频标签属性。
7.根据权利要求6所述的计算机可读存储介质，其特征在于，所述第一客户端将所述多媒体流数据通过服务端传输至所述第二客户端具体为：
第一客户端按照预设的周期，将当前周期采集到的多媒体流数据转换为预设格式的字符串数据；
第一客户端将所述字符串数据传输至服务端；
服务端将所述字符串数据传输至第二客户端。
8.根据权利要求7所述的计算机可读存储介质，其特征在于，所述预设格式为base64或arraybuffe。
9.根据权利要求6所述的计算机可读存储介质，其特征在于，所述预设类型数据为Blob类型数据；
所述第二客户端根据所述预设类型数据，创建对应的URL对象具体为：
第二客户端根据所述预设类型数据，通过URL.createObjectURL()方法创建对应的URL对象。
10.根据权利要求6所述的计算机可读存储介质，其特征在于，所述根据所述URL对象，设置所述第二客户端上预设的HTML5页面的音频标签属性和/或视频标签属性具体为：
将所述URL对象赋值给所述第二客户端上预设的HTML5页面的audio标签的src属性和/或video标签的src属性。
CN201910462223.2A 2019-05-30 2019-05-30 基于Web的通信方法及计算机可读存储介质 Active CN112019482B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910462223.2A CN112019482B (zh) 2019-05-30 2019-05-30 基于Web的通信方法及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910462223.2A CN112019482B (zh) 2019-05-30 2019-05-30 基于Web的通信方法及计算机可读存储介质

Publications (2)

Publication Number Publication Date
CN112019482A true CN112019482A (zh) 2020-12-01
CN112019482B CN112019482B (zh) 2023-02-28

Family

ID=73500425

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910462223.2A Active CN112019482B (zh) 2019-05-30 2019-05-30 基于Web的通信方法及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN112019482B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2001268117A (ja) * 2000-03-16 2001-09-28 Communication.Com:Kk ウェブブラウザを利用した通話方法および装置
WO2001077897A2 (en) * 1999-09-27 2001-10-18 Torveo Technologies System and method using a web catalog with dynamic multimedia data using java
CN102625080A (zh) * 2012-04-23 2012-08-01 广东大晋对接信息科技有限公司 基于p2p的web视频会议系统
CN102779046A (zh) * 2012-07-04 2012-11-14 合一网络技术(北京)有限公司 一种基于html5开发的视频播放系统及其视频播放方法
CN105391702A (zh) * 2015-10-29 2016-03-09 北京梦坊国际教育科技有限公司 音/视频通信方法、终端、服务器及平台
CN107995187A (zh) * 2017-11-30 2018-05-04 上海哔哩哔哩科技有限公司 基于html5浏览器的视频主播、直播方法、终端和系统
CN109308336A (zh) * 2018-09-06 2019-02-05 成都大学 数据处理方法、处理设备和存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2001077897A2 (en) * 1999-09-27 2001-10-18 Torveo Technologies System and method using a web catalog with dynamic multimedia data using java
JP2001268117A (ja) * 2000-03-16 2001-09-28 Communication.Com:Kk ウェブブラウザを利用した通話方法および装置
CN102625080A (zh) * 2012-04-23 2012-08-01 广东大晋对接信息科技有限公司 基于p2p的web视频会议系统
CN102779046A (zh) * 2012-07-04 2012-11-14 合一网络技术(北京)有限公司 一种基于html5开发的视频播放系统及其视频播放方法
CN105391702A (zh) * 2015-10-29 2016-03-09 北京梦坊国际教育科技有限公司 音/视频通信方法、终端、服务器及平台
CN107995187A (zh) * 2017-11-30 2018-05-04 上海哔哩哔哩科技有限公司 基于html5浏览器的视频主播、直播方法、终端和系统
CN109308336A (zh) * 2018-09-06 2019-02-05 成都大学 数据处理方法、处理设备和存储介质

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
陆晨等: "HTML5 WebSocket握手协议的研究与实现", 《计算机应用与软件》 *
黄雄: "基于HTML5的视频传输技术研究", 《广东技术师范学院学报》 *
龙奇: "下一代Web通信技术HTML5 Web Socket的研究", 《科技信息》 *

Also Published As

Publication number Publication date
CN112019482B (zh) 2023-02-28

Similar Documents

Publication Publication Date Title
US10462496B2 (en) Information processor, information processing method and program
KR102040623B1 (ko) 양방향 서비스를 처리하는 장치 및 방법
KR102024599B1 (ko) 양방향 서비스를 처리하는 장치 및 방법
US9560425B2 (en) Remotely control devices over a network without authentication or registration
US9654816B2 (en) Synchronizing a video feed with internet content displayed on a second device
KR20160067126A (ko) 콘텐트 전달을 위한 방법 및 장치
US20190012706A1 (en) Association of content identifier of audio-visual data with additional data through capture infrastructure
US9591379B2 (en) Systems and methods for providing an advertisement calling proxy server
US10419541B2 (en) Remotely control devices over a network without authentication or registration
CN111935463B (zh) 一种通过网页无控件低延迟查看实时监控视频的方法
CN106464933B (zh) 用于远程控制对多媒体内容的渲染的设备和方法
US20150365247A1 (en) Method and apparatus for processing event in home network
CN105165019B (zh) 用于在广播通信系统中发送和接收附加信息的方法和设备
US10313739B2 (en) Terminal device, relay device, information processing method, program, and content identification system
EP3503568A1 (en) Information processing device, client device, and data processing method
CN112019482B (zh) 基于Web的通信方法及计算机可读存储介质
US8973082B2 (en) Interactive program system
KR101314448B1 (ko) 인터넷 전화를 이용한 모니터링 방법 및 장치
US20180192085A1 (en) Method and apparatus for distributed video transmission
CN110572349B (zh) 一种桌面静置报警方法及装置
TW202008789A (zh) 突發直播發布系統及其實施方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant