CN117221667A - 一种浏览器实时视频解码播放方法和系统 - Google Patents

Abstract

本发明公开了一种浏览器实时视频解码播放方法和系统，包括：通过监听Redis通道，得到目标视频设备的设备编码；基于设备编码调用目标视频设备的对外API，获取目标视频设备的待播放码流；将待播放码流转换成RTSP流；基于webSocket将RTSP流发送到目标浏览器，以使目标浏览器基于worker线程对RTSP流进行分类处理以确定RTSP流的视频编码格式，基于视频编码格式，通过引入VideoDecode库调用GPU对RTSP流进行解码，并通过canvas绘制实现待播放码流在目标浏览器的实时画面播放；视频编码格式包括H.264和H.265。本发明基于浏览器自身支持的技术实现H.264和H.265码流视频实时播放，缓解了现有技术中因需要用户安装插件或控件，而存在兼容性和安全性差的技术问题。

Description

一种浏览器实时视频解码播放方法和系统

技术领域

本发明涉及计算机视觉处理技术领域，具体为一种浏览器实时视频解码播放方法和系统。

背景技术

随着摄像头技术的发展，很多厂家的摄像头都能够输出H.264和H.265码流视频，但是如何在浏览器中实时流畅、稳定的播放这些视频，一直是摄像头应用领域中需要解决的技术难题。目前主要的解决方案是使用插件或者ActiveX控件实现视频播放，但是这些方案往往需要用户安装插件或控件，并且存在兼容性和安全性问题。

发明内容

本发明的目的就在于为了解决上述至少一个技术问题而提供一种浏览器实时视频解码播放方法和系统。

第一方面，本发明实施例提供了一种浏览器实时视频解码播放方法，应用于流媒体服务器；包括：通过监听Redis通道，得到目标视频设备的设备编码；基于所述设备编码调用所述目标视频设备的对外API，获取所述目标视频设备的待播放码流；将所述待播放码流转换成RTSP流；基于webSocket将所述RTSP流发送到目标浏览器，以使所述目标浏览器基于worker线程对所述RTSP流进行分类处理以确定所述RTSP流的视频编码格式，基于所述视频编码格式，通过引入VideoDecode库调用GPU对所述RTSP流进行解码，并通过canvas绘制实现所述待播放码流在所述目标浏览器的实时画面播放；所述视频编码格式包括H.264和H.265。

进一步地，基于webSocket将所述RTSP流发送到目标浏览器，包括：通过所述Redis通道向所述目标浏览器发送WebSocket地址，以建立所述流媒体服务器与所述目标浏览器之间的WebSocket链接；基于所述WebSocket链接，将所述RTSP流发送到所述目标浏览器。

进一步地，将所述待播放码流转换成RTSP流，包括：若所述待播放码流的视频编码格式为H.264，则通过FFmpeg库将所述待播放码流转换成RTSP流；若所述待播放码流的视频编码格式为H.265，则通过Intel QuickSync Video技术将所述待播放码流转换成RTSP流。

第二方面，本发明实施例还提供了一种浏览器实时视频解码播放方法，应用于目标浏览器；包括：响应于用户查看目标视频设备的指令，将所述目标视频设备的设备编码发送到后端服务器，以使所述后端服务器将所述设备编码通过Redis通道发送到流媒体服务器；基于所述流媒体服务器发送的WebSocket地址，建立WebSocket链接；基于所述WebSocket链接，获取所述目标视频设备的待播放码流的RTSP流；所述RTSP流为流媒体服务器在基于所述设备编码获取所述目标视频设备的待播放码流之后，对所述待播放码流进行RTSP流转换之后得到的RTSP流；基于worker线程对所述RTSP流进行分类处理，以确定所述RTSP流的视频编码格式；所述视频编码格式包括H.264和H.265；基于所述视频编码格式，通过引入VideoDecode库调用GPU对所述RTSP流进行解码，并通过canvas绘制实现所述待播放码流在所述目标浏览器的实时画面播放。

进一步地，响应于用户查看目标视频设备的指令，将所述目标视频设备的设备编码发送到后端服务器，包括：根据视频设备参数信息，为多个视频设备分别生成对应的设备编码；基于所述设备编码，生成所述多个视频设备对应的设备树；获取用户查看所述目标视频设备的指令；所述目标视频设备为所述设备数上的一个视频设备；响应于所述指令，将所述目标视频设备的设备编码发送到后端服务器。

进一步地，基于worker线程对所述RTSP流进行分类处理，包括：通过检查所述RTSP流的码流头文件中是否包含SPS数据单元或VPS数据单元，对所述RTSP流进行分类处理。

第三方面，本发明实施例还提供了一种浏览器实时视频解码播放系统，包括：目标浏览器，流媒体服务器和后端服务器；其中，所述目标浏览器，用于响应于用户查看目标视频设备的指令，将所述目标视频设备的设备编码发送到后端服务器；所述后端服务器，用于将所述设备编码发送到Redis通道；所述流媒体服务器，用于通过监听所述Redis通道，得到所述设备编码；基于所述设备编码调用所述目标视频设备的对外API，获取所述目标视频设备的待播放码流；将所述待播放码流转换成RTSP流；基于webSocket将所述RTSP流发送到所述目标浏览器；所述目标浏览器，还用于基于worker线程对所述RTSP流进行分类处理以确定所述RTSP流的视频编码格式，基于所述视频编码格式，通过引入VideoDecode库调用GPU对所述RTSP流进行解码，并通过canvas绘制实现所述待播放码流在所述目标浏览器的实时画面播放；所述视频编码格式包括H.264和H.265。

进一步地，所述流媒体服务器，还用于通过所述Redis通道向所述目标浏览器发送WebSocket地址；所述目标浏览器，还用于基于所述WebSocket地址，建立WebSocket链接。

第四方面，本发明实施例还提供了一种电子设备，包括：存储器、处理器和存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述实施例一和实施例二所述的方法。

第五方面，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令被处理器执行时实现如上述实施例一和实施例二所述的方法。

本发明提供了一种浏览器实时视频解码播放方法和系统，基于浏览器自身支持的技术实现H.264和H.265码流视频实时播放，缓解了现有技术中因需要用户安装插件或控件，而存在兼容性和安全性差的技术问题。

附图说明

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

图1为本发明实施例提供的一种浏览器实时视频解码播放方法的流程图；

图2为本发明实施例提供的另一种浏览器实时视频解码播放方法的流程图；

图3为本发明实施例提供的一种浏览器实时视频解码播放系统的示意图；

图4为本发明实施例提供的一种CVideoShow类的主要方法以及它们之间的调用关系示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

图1是根据本发明实施例提供的一种浏览器实时视频解码播放方法的流程图，该方法应用于流媒体服务器。如图1所示，该方法具体包括如下步骤：

步骤S102，通过监听Redis通道，得到目标视频设备的设备编码。在本发明实施例中，目标视频设备包括摄像头。

步骤S104，基于设备编码调用目标视频设备的对外API，获取目标视频设备的待播放码流。

具体地，流媒体服务器通过连接NVR调用目标视频设备的对外API。其中，NVR，全称Network Video Recorder，即网络视频录像机，是网络视频监控系统的存储转发部分，NVR与视频编码器或网络摄像机协同工作，完成视频的录像、存储及转发功能。

步骤S106，将待播放码流转换成RTSP流。

步骤S108，基于webSocket将RTSP流发送到目标浏览器，以使目标浏览器基于worker线程对RTSP流进行分类处理以确定RTSP流的视频编码格式，基于视频编码格式，通过引入VideoDecode库调用GPU对RTSP流进行解码，并通过canvas绘制实现待播放码流在目标浏览器的实时画面播放；其中，视频编码格式包括H.264和H.265。

具体地，流媒体服务器通过Redis通道向目标浏览器发送WebSocket地址，以建立流媒体服务器与目标浏览器之间的WebSocket链接；

基于WebSocket链接，将RTSP流发送到目标浏览器。

具体地，步骤S106中，对于不同视频编码格式的转换，包括：

若待播放码流的视频编码格式为H.264，则通过FFmpeg库将待播放码流转换成RTSP流；若待播放码流的视频编码格式为H.265，则通过Intel QuickSync Video技术将待播放码流转换成RTSP流。视频编码格式的转换实时进行，能够保证播放的低延时、高稳定性。

实施例二

图2是根据本发明实施例提供的另一种浏览器实时视频解码播放方法的流程图，该方法应用于目标浏览器。如图2所示，该方法具体包括如下步骤：

步骤S202，响应于用户查看目标视频设备的指令，将目标视频设备的设备编码发送到后端服务器，以使后端服务器将设备编码通过Redis通道发送到流媒体服务器。

具体地，根据视频设备参数信息，为多个视频设备分别生成对应的设备编码；其中，视频设备参数信息包括设备型号、分辨率、码率、帧率等；

基于设备编码，生成多个视频设备对应的设备树；

获取用户查看目标视频设备的指令；目标视频设备为设备数上的一个视频设备；

响应于指令，将目标视频设备的设备编码发送到后端服务器。

步骤S204，基于流媒体服务器发送的WebSocket地址，建立WebSocket链接。

步骤S206，基于WebSocket链接，获取目标视频设备的待播放码流的RTSP流；RTSP流为流媒体服务器在基于设备编码获取目标视频设备的待播放码流之后，对待播放码流进行RTSP流转换之后得到的RTSP流。

步骤S208，基于worker线程对RTSP流进行分类处理，以确定RTSP流的视频编码格式；视频编码格式包括H.264和H.265。

具体地，通过检查RTSP流的码流头文件中是否包含SPS数据单元或VPS数据单元，对RTSP流进行分类处理。

步骤S210，基于视频编码格式，通过引入VideoDecode库调用GPU对RTSP流进行解码，并通过canvas绘制实现待播放码流在目标浏览器的实时画面播放。

在本发明实施例中，根据设备型号、分辨率、码率、帧率等参数生成唯一设备编码；生成的设备编码建立索引形成设备树，存储于后端服务器中；用户点击设备树中的设备时，向后端服务器发送设备编码，根据设备编码快速查询到对应设备的索引，保证了在调阅实时视频时高稳定性、准确性和唯一性。

在本发明实施例中，在web端(即目标浏览器)和流媒体服务端(即流媒体服务器)建立WebSocket链接后，引入worker线程实现对裸码流的分类和处理，worker线程和主线程之间使用SharedArrayBuffer进行数据传输，保证数据传输的高效和实时性，通过检查码流头文件中是否包含SPS或者VPS数据单元，将码流分为H.264和H.265两类，之后对每一帧数据进行解析，提取其中的关键帧(I帧),通过VideoDecoded调用GPU对码流进行解码，使用Canvas绘制画面，控制Canvas的画面绘制速度实现码流的实时播放。

具体地，在画面中建立多个canvas画布，利用时间随机值生成各个canvas画面的id，用于对接多个码流视频，通过点击多个摄像头即可完成H.264或H.265码流的多画面窗口实时播放。

具体地，通过canvas绘制完成H.264或H.265码流的实时视频播放，对canvas画布添加双击事件，在双击事件中，实时读取显示装置的宽高，通过postMessage()向worker线程中传入宽高值，利用resize()函数将canvas的宽高设置为显示装置的宽高，完成H.264或H.265码流的实时视频全屏播放，再双击的时候，通过逆操作完成视频全屏播放的退出功能。

具体地，本发明通过对canvas画布调用drawImage()方法对画布中的内容存储，再调用toDataURL()方法将存储的内容导出为图像的数据URL，完成实时视频的截屏功能。

具体地，在本发明实施例中，通过canvas画布创建MediaRecorder对象：使用MediaRecorder API创建一个MediaRecorder对象，将Canvas元素作为源进行录制，录制的媒体类型为'video/webm'。调用MediaRecorder对象的start()方法开始录制。绘制到Canvas上并进行录制：使用Canvas的getContext('2d')方法获取2D上下文，然后在每一帧更新时，将内容绘制到Canvas上，并将Canvas元素的画面捕捉为数据块，发送给MediaRecorder对象。调用MediaRecorder对象的stop()方法停止录制。在dataavailable事件中，可以获取到录制的数据块将录制的内容下载的本地，完成H.264和H.265两类码流视频的录屏功能。

本发明提供的一种浏览器实时视频解码播放方法，基于浏览器自身支持的技术实现H.264和H.265码流视频实时播放，缓解了现有技术中因需要用户安装插件或控件，而存在兼容性和安全性差的技术问题。

实施例三

图3是根据本发明实施例提供的一种浏览器实时视频解码播放系统的示意图。如图3所示，该系统包括：目标浏览器10，流媒体服务器20和后端服务器30。

具体地，目标浏览器10，用于响应于用户查看目标视频设备的指令，将目标视频设备的设备编码发送到后端服务器30。

后端服务器30，用于将设备编码发送到Redis通道。

流媒体服务器20，用于通过监听Redis通道，得到设备编码；基于设备编码调用目标视频设备的对外API，获取目标视频设备的待播放码流；将待播放码流转换成RTSP流；基于webSocket将RTSP流发送到目标浏览器10。

具体地，目标浏览器10，还用于基于worker线程对RTSP流进行分类处理以确定RTSP流的视频编码格式，基于视频编码格式，通过引入VideoDecode库调用GPU对RTSP流进行解码，并通过canvas绘制实现待播放码流在目标浏览器10的实时画面播放。其中，视频编码格式包括H.264和H.265。

具体地，流媒体服务器20，还用于通过Redis通道向目标浏览器发送WebSocket地址；

目标浏览器10，还用于基于WebSocket地址，建立WebSocket链接。

具体地，流媒体服务器20，还用于若所述待播放码流的视频编码格式为H.264，则通过FFmpeg库将所述待播放码流转换成RTSP流；若所述待播放码流的视频编码格式为H.265，则通过Intel QuickSync Video技术将所述待播放码流转换成RTSP流。

本发明实施例还提供了一种电子设备，包括：存储器、处理器和存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如实施例一和实施例二中的方法。

本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令被处理器执行时实现如实施例一和实施例二中的方法。

实施例四

下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。

一、设备编码和设备树生成：

本发明的技术方案首先是将所有视频设备建立独有的设备编码，并根据这些设备编码生成对应的设备树。这些设备编码是通过各种标准化的算法，如哈希算法、MD5算法等生成的。设备树的生成需要考虑设备之间的上下级关系，每个设备编码都对应着一个设备树节点，而这些节点之间的关系则构成了整个设备树。

二、设备编码的发送和获取：

当用户需要查看某个目标视频设备时，用户可以在设备树中找到该设备并点击，这时候就会向后端服务器发送该设备编码。后端服务器会将该设备编码发送到Redis服务中，而流媒体服务器则会监听Redis服务，得到设备编码后，就可以调用摄像头的对外API，将视频码流取出并转成RTSP流。

三、Web端接收码流：

通过Redis通道向Web端发送WebSockets链接，连接成功后，流媒体服务器就可以通过WebSockets通道向Web端发送裸码流数据。Web端在接收到WebSockets传过来的码流时，Web端新建worker线程处理码流数据,通过postMessage()方法将码流数据发送到线程中去处理，通过判断码流头文件中是否包含SPS或者VPS数据单元区分出H.264和H.265，对两种码流进行分类处理，新建CVideoShow用于处理视频解码和渲染。它使用不同的渲染器(2D、WebGL、WebGPU)和一个解析器(sps_parser.js)来处理视频数据。通过引入VideoDecode库中进行解码。解码的过程中，使用GPU进行硬件加速，提高解码效率。

图4是根据本发明实施例提供的一种CVideoShow类的主要方法以及它们之间的调用关系示意图。如图4所示，constructor构造函数用于初始化CVideoShow类的实例，包括设置m_canvas属性和选择渲染器。start方法开始播放视频，创建解码器对象并初始化WebSocket以接收视频数据流。configure方法配置解码器，根据视频编码格式和SPS数据选择合适的解码器配置。handleStream方法处理接收到的视频流数据，根据NAL单元类型和数据进行相应的处理和解码操作。render方法负责将视频帧渲染到画布上，通过调用renderAnimationFrame方法进行渲染。renderAnimationFrame方法在每个动画帧中被调用，调用渲染器的draw方法将待渲染的视频帧渲染到画布上。stop方法停止播放视频，关闭WebSocket连接和解码器，并重置相关属性。closeDecoder方法用于关闭解码器对象。

通过这些方法的交互，CVideoShow类实现了视频解码和渲染的整个流程，从开始播放视频到停止播放视频。

四、视频播放后的高阶应用：

4.1实现多画面多窗口实时播放：

创建多个<canvas>元素，为每个画面分配一个唯一的id。

使用时间随机值生成每个画面的id，确保唯一性。

将每个画面的id与对应的码流视频进行关联。

根据需求选择适当的布局方式，将多个<canvas>元素排列在画面中。

播放时，将对应的码流视频渲染到相应的<canvas>元素上。

4.2实现实时视频的全屏播放和退出：

在每个<canvas>元素上添加双击事件监听器。双击事件触发时，获取显示装置的宽度和高度。

将包含<canvas>元素的容器进行全屏处理(例如使用requestFullscreen()方法)。

使用resize事件监听器，将<canvas>元素的宽度和高度设置为显示装置的宽度和高度。

在再次双击时，执行逆操作(例如使用exitFullscreen()方法)以退出全屏播放状态。

4.3实现实时视频的截屏功能：

在需要进行截屏的时刻调用drawImage()方法，将<canvas>画布中的内容绘制到另一个临时的<canvas>元素上。

使用toDataURL()方法将临时<canvas>元素的内容导出为图像的数据URL。

将导出的数据URL用于显示截屏图像或进行其他处理。

4.4实现实时视频的录屏功能：

创建一个MediaRecorder对象，将<canvas>元素作为录制源，设置录制的媒体类型为'video/webm'。

监听dataavailable事件，获取录制的数据块，并将其保存到数组或其他数据结构中。

调用start()方法开始录制，使用Canvas的getContext('2d')方法获取2D上下文。

在每一帧更新时，将内容绘制到Canvas上，并将Canvas元素的画面捕捉为数据块，发送给MediaRecorder对象。

调用stop()方法停止录制。在dataavailable事件中，获取到录制的数据块，可以将其下载到本地或进行其他处理。

由以上描述可知，本发明提供了一种浏览器实时视频解码播放方法和系统。具体实现过程包括通过部署流媒体服务对接NVR和摄像头，浏览器客户端向流媒体服务请求摄像头实时码流，流媒体返回webSocket通道名，并将NVR推上来的RTSP转换为H.264或H.265码流推送到webSocket中。浏览器客户端接收到码流后，新建worker线程处理码流，通过判断码流头文件中是否包含SPS或者VPS数据单元区分出H.264和H.265，对两种码流进行分类处理，然后新建VideoDecoder对象，通过调用GPU对码流进行解码成图像并通过Canvas进行绘制。通过这些步骤，完成H.264和H.265码流视频在Google浏览器中实时画面播放。

本发明所达到的有益效果包括：

实现了海康、大华等厂家摄像头的H.264和H.265码流在Google浏览器实时、稳定、流畅的播放；数据的传输均采用HTTPS协议，以保证数据的安全性；采用多线程worker处理码流，通过判断码流头文件中是否包含SPS或者VPS数据单元，实现了对H.264和H.265码流的分类处理，引入videoDecode库调用GPU对数据进行解码，有效提高码流处理效率，通过使用Canvas进行图像的绘制，保证了视频播放的流畅性和稳定性，有效降低视频播放延迟；实现了低延时、高可控的H.264和H.265码流实时播放，提高了用户的使用体验。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。

Claims (10)

1.一种浏览器实时视频解码播放方法，其特征在于，应用于流媒体服务器；包括：

通过监听Redis通道，得到目标视频设备的设备编码；

基于所述设备编码调用所述目标视频设备的对外API，获取所述目标视频设备的待播放码流；

将所述待播放码流转换成RTSP流；

基于webSocket将所述RTSP流发送到目标浏览器，以使所述目标浏览器基于worker线程对所述RTSP流进行分类处理以确定所述RTSP流的视频编码格式，基于所述视频编码格式，通过引入VideoDecode库调用GPU对所述RTSP流进行解码，并通过canvas绘制实现所述待播放码流在所述目标浏览器的实时画面播放；所述视频编码格式包括H.264和H.265。

2.根据权利要求1所述的方法，其特征在于：基于webSocket将所述RTSP流发送到目标浏览器，包括：

通过所述Redis通道向所述目标浏览器发送WebSocket地址，以建立所述流媒体服务器与所述目标浏览器之间的WebSocket链接；

基于所述WebSocket链接，将所述RTSP流发送到所述目标浏览器。

3.根据权利要求1所述的方法，其特征在于：将所述待播放码流转换成RTSP流，包括：

若所述待播放码流的视频编码格式为H.264，则通过FFmpeg库将所述待播放码流转换成RTSP流；

若所述待播放码流的视频编码格式为H.265，则通过Intel QuickSync Video技术将所述待播放码流转换成RTSP流。

4.一种浏览器实时视频解码播放方法，其特征在于，应用于目标浏览器；包括：

响应于用户查看目标视频设备的指令，将所述目标视频设备的设备编码发送到后端服务器，以使所述后端服务器将所述设备编码通过Redis通道发送到流媒体服务器；

基于所述流媒体服务器发送的WebSocket地址，建立WebSocket链接；

基于所述WebSocket链接，获取所述目标视频设备的待播放码流的RTSP流；所述RTSP流为流媒体服务器在基于所述设备编码获取所述目标视频设备的待播放码流之后，对所述待播放码流进行RTSP流转换之后得到的RTSP流；

基于worker线程对所述RTSP流进行分类处理，以确定所述RTSP流的视频编码格式；所述视频编码格式包括H.264和H.265；

基于所述视频编码格式，通过引入VideoDecode库调用GPU对所述RTSP流进行解码，并通过canvas绘制实现所述待播放码流在所述目标浏览器的实时画面播放。

5.根据权利要求4所述的方法，其特征在于：响应于用户查看目标视频设备的指令，将所述目标视频设备的设备编码发送到后端服务器，包括：

根据视频设备参数信息，为多个视频设备分别生成对应的设备编码；

基于所述设备编码，生成所述多个视频设备对应的设备树；

获取用户查看所述目标视频设备的指令；所述目标视频设备为所述设备数上的一个视频设备；

响应于所述指令，将所述目标视频设备的设备编码发送到后端服务器。

6.根据权利要求4所述的方法，其特征在于：基于worker线程对所述RTSP流进行分类处理，包括：

通过检查所述RTSP流的码流头文件中是否包含SPS数据单元或VPS数据单元，对所述RTSP流进行分类处理。

7.一种浏览器实时视频解码播放系统，其特征在于，包括：目标浏览器，流媒体服务器和后端服务器；其中，

所述目标浏览器，用于响应于用户查看目标视频设备的指令，将所述目标视频设备的设备编码发送到后端服务器；

所述后端服务器，用于将所述设备编码发送到Redis通道；

所述流媒体服务器，用于通过监听所述Redis通道，得到所述设备编码；基于所述设备编码调用所述目标视频设备的对外API，获取所述目标视频设备的待播放码流；将所述待播放码流转换成RTSP流；基于webSocket将所述RTSP流发送到所述目标浏览器；

所述目标浏览器，还用于基于worker线程对所述RTSP流进行分类处理以确定所述RTSP流的视频编码格式，基于所述视频编码格式，通过引入VideoDecode库调用GPU对所述RTSP流进行解码，并通过canvas绘制实现所述待播放码流在所述目标浏览器的实时画面播放；所述视频编码格式包括H.264和H.265。

8.根据权利要求7所述的系统，其特征在于：所述流媒体服务器，还用于通过所述Redis通道向所述目标浏览器发送WebSocket地址；

所述目标浏览器，还用于基于所述WebSocket地址，建立WebSocket链接。

9.一种电子设备，其特征在于，包括：存储器、处理器和存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1-6任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令被处理器执行时实现如权利要求1-6任一项所述的方法。