本发明专利技术公开了一种基于WebSocket在浏览器中播放实时视频流的方法及系统，包括客户端及浏览器端，客户端的处理视频流程序在获取到摄像头的视频流之后，将视频流进行解封装、解码等一系列操作后，获取到每一帧的画面图片，然后通过WebSocket进行发送；而在浏览器中，只需订阅约定好的主题，即可收到摄像头实时视频流分解的图片，在页面中进行显示即可。本发明专利技术无需安装Flash插件或其他额外的控件，大大提高了安全性；同时，由于收到的是一些图片，也无需考虑video标签对视频格式的限制问题，任何浏览器均可使用img标签进行呈现即可。览器均可使用img标签进行呈现即可。览器均可使用img标签进行呈现即可。
【技术实现步骤摘要】
基于WebSocket在浏览器中播放实时视频流的方法和系统
[0001]本专利技术涉及计算机
，特别是指一种基于WebSocket在浏览器中播放实时视频流的方法和系统。
技术介绍
[0002]现有浏览器播放实时视频流时，需要安装Flash插件，或者在需要在浏览器中安装ActiveX控件等。但这种方式操作非常不便捷而且还会带来安全隐患，一些不法分子会在插件上动一些手脚，从而盗取用户的隐私信息。
[0003]为了避免使用插件，在HTML5标准中定义了video标签专门用来播放视频。但是video标签对媒体的格式是有所限制的(例如在windows电脑上只支持mp4、webm、ogg等格式)。
[0004]随着视频点播、直播等视频业务的兴起，视频数据会通过流媒体传输协议从服务端分发到客户端，在这种情况下，媒体内容就会包含在传输协议中，video标签就无法识别并进行播放了。
技术实现思路
[0005]本专利技术的目的在于克服现有技术的不足，提供一种无需安装Flash插件或其他额外控件，大大提高了安全性的基于WebSocket在浏览器中播放实时视频流的方法。
[0006]为了解决上述目的，本专利技术的解决方案是：
[0007]一种基于WebSocket在浏览器中播放实时视频流的方法，其包括以下步骤：
[0008]在处理视频流程序中，通过opencv库，获取摄像头的deviceId打开摄像头获取视频流；
[0009]处理视频流程序获取摄像头的图像尺寸，循环读取摄像头数据后进行解封装、解码，并转换成图片；
[0010]处理视频流程序创建WebSocket连接，将转换完的图片依次进行发送；
[0011]在浏览器中创建WebSocket连接，接收处理视频流程序发送的图片，通过订阅约定好的主题，获取到实时摄像头中的视频数据，并通过img标签进行动态显示。
[0012]进一步，实时视频流的获取与处理包括以下步骤：
[0013][0014][0015]进一步，浏览器接收传递过来的实时视频流图片包括以下步骤：
[0016]//a、创建WebSocket实例对象
[0017]const ws＝new WebSocket(url)
[0018]//b、订阅指定的topic，并接收图片数据
[0019]ws.subscribe("faceCapture",(data)＝>{
[0020]//c、处理接收到的数据，获取到图片，在页面中进行显示
[0021]wsImg.value＝data.data
[0022]})。
[0023]本专利技术的另一目的在于克服现有技术的不足，提供一种无需安装Flash插件或其
他额外控件，大大提高了安全性的基于WebSocket在浏览器中播放实时视频流的系统。
[0024]为了解决上述目的，本专利技术的解决方案是：
[0025]一种基于WebSocket在浏览器中播放实时视频流的系统，其包括客户端及浏览器端；客户端包括摄像头及处理视频流程序；
[0026]摄像头具有deviceId，摄像头打开后提供实时视频流；
[0027]处理视频流程序通过opencv库获取摄像头的deviceId，打开摄像头获取实时视频流，获取摄像头的图像尺寸，循环读取摄像头数据后进行解封装、解码，并转换成jpg格式的图片；处理视频流程序创建WebSocket连接，将转换完的图片依次进行发送；
[0028]浏览器端用以创建WebSocket连接，接收处理视频流程序发送的图片，通过订阅约定好的主题，获取到实时摄像头中的视频数据，并通过img标签进行动态显示。
[0029]进一步，客户端的处理视频流程序获取及处理实时视频流的具体步骤为：
[0030]进一步，浏览器端接收传递过来的实时视频流图片包括以下步骤：//a、创建
WebSocket实例对象
[0031]const ws＝new WebSocket(url)
[0032]//b、订阅指定的topic，并接收图片数据
[0033]ws.subscribe("faceCapture",(data)＝>{
[0034]//c、处理接收到的数据，获取到图片，在页面中进行显示
[0035]wsImg.value＝data.data
[0036]})。
[0037]采用上述方案后，本专利技术基于WebSocket在浏览器中播放实时视频流的方法及系统是基于WebSocket的通信方式，客户端的处理视频流程序在获取到摄像头的视频流之后，将视频流进行解封、解码等一系列操作后，获取到每一帧的画面图片，然后通过WebSocket进行发送；而在浏览器中，只需订阅约定好的主题，即可收到摄像头实时视频流分解的图片，在页面中进行显示即可。无需安装Flash插件或其他额外的控件，大大提高了安全性；同时，由于收到的是一些图片，也无需考虑video标签对视频格式的限制问题，任何浏览器均可使用img标签进行呈现即可。相较于现有技术，本专利技术具有以下优点：
[0038]由于Webocket是基于HTTP的双向通信协议，可以实现较低的延迟和更快的数据传输速度，实时性更好；
[0039]WebSocket作为网页端的实时通行协议，实现了跨平台性，可以在不同的浏览器和操作系统上使用；
[0040]将获取到的视频流处理成单帧图片，在浏览器中只需切换对图片的渲染即可，无需考虑video标签对视频格式的限制问题；
[0041]本专利技术使用WebSocket协议通过数据压缩和经过base64编码后进行数据传输，节省了宽带，降低了服务器负担，使视频流播放更加流畅，同时兼容性强，容错性好。
【附图说明】
[0042]图1为本专利技术系统的框架示意图。
[0043]图2为本专利技术实现模块和模块交互示意图。
[0044]图3为本专利技术的方法流程图。
【具体实施方式】
[0045]为了进一步解释本专利技术的技术方案，下面通过具体实施例来对本专利技术进行详细阐述。
[0046]如图1及图2所示，本专利技术提供一种基于WebSocket在浏览器中播放实时视频流的方法，WebSocket是一种于HTTP协议的双向通信机制。本专利技术是基于WebSocket的通信方式，在获取到摄像头视频流之后，将视频流进行解封、解码等一系列操作后，获取到每一帧的画面图片，然后通过WebSocket进行发送；而在浏览器中，只需订阅约定好的主题(topic)，即可收到摄像头实时视频流分解的图片，在页面中进行显示即可，无需安装Flash插件或其他额外的控件，大大提高了安全性；同时，由于浏览器收到的是一些jpg格式的图片，也无需考虑video标签对视频格式的限制问题，任何浏览器均可使用img标签进行呈现即可。
[0047]本专利技术的总体思路如下：基于Web本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于WebSocket在浏览器中播放实时视频流的方法，其特征在于，包括以下步骤：在处理视频流程序中，通过opencv库，获取摄像头的deviceId打开摄像头获取视频流；处理视频流程序获取摄像头的图像尺寸，循环读取摄像头数据后进行解封装、解码，并转换成图片；处理视频流程序创建WebSocket连接，将转换完的图片依次进行发送；在浏览器中创建WebSocket连接，接收处理视频流程序发送的图片，通过订阅约定好的主题，获取到实时摄像头中的视频数据，并通过img标签进行动态显示。2.如权利要求1所述的基于WebSocket在浏览器中播放实时视频流的方法，其特征在于：实时视频流的获取与处理包括以下步骤：//a、打开摄像头VideoCapture cap(0)；if(！cap.isOpened()){cout<<"Failed to open camera."<<endl；return
‑
1；}//b、获取摄像头的图像尺寸Size size((int)cap.get(CV_CAP_PROP_FRAME_WIDTH),(int)cap.get(CV_CAP_PROP_FRAME_HEIGHT))//c、循环读取摄像头数据并保存成JPEG图像Mat frame；vector<int>param＝{IMWRITE_JPEG_QUALITY,95}；while(true){if(！cap.read(frame)){break；}//d、解码并转换成需要的格式vector<uchar>buf；imencode(".jpg",frame,buf,param)；}。3.如权利要求1或2所述的基于WebSocket在浏览器中播放实时视频流的方法，其特征在于，浏览器接收传递过来的实时视频流图片，包括以下步骤：//a、创建WebSocket实例对象const ws＝new WebSocket(url)//b、订阅指定的topic，并接收图片数据ws.subscribe("faceCapture",(data)＝>{//c、处理接收到的数据，获取到图片，在页面中进行显示
wsImg.value＝data.data})。4.一种基于WebSocket在浏览器中播放实时视频流的系统，其...
【专利技术属性】
技术研发人员：王旭，林锦成，薛健，
申请(专利权)人：厦门瑞为信息技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。