CN115002503B - web端的直播显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明提供一种web端的直播显示方法、装置、电子设备及存储介质，首先获取直播助手所对应的虚拟媒体设备的设备标识，进而将该虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，以使浏览器与直播助手建立连接通道，最后基于该连接通道将直播助手输出给虚拟媒体设备的画面回显至浏览器中。基于本发明中，在web端浏览器可以与直播助手建立连接，并实时获取直播助手输出给其虚拟媒体设备的画面，在浏览器中实时回显，浏览器与直播助手两者相互独立、互不依赖，有效的保证了直播过程的稳定性。

Description

web端的直播显示方法、装置、电子设备及存储介质

技术领域

本发明涉及软件技术领域，更具体地说，涉及一种web端的直播显示方法、装置、电子设备及存储介质。

背景技术

在直播秀场应用中，在web端以往的技术是安装特定直播插件，使用web相关技术与插件进行并互通讯，实现浏览器获取摄像头画面与推流功能。

由于浏览器是插件的宿主，插件在运行过程中依赖着浏览器，因此插件在运行过程中出现异常时很容易导致浏览器出现假死状态甚至崩溃。

发明内容

有鉴于此，为解决上述问题，本发明提供一种web端的直播显示方法、装置、电子设备及存储介质，技术方案如下：

一种web端的直播显示方法，所述方法包括：

获取直播助手所对应的虚拟媒体设备的设备标识；

将所述虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，以使所述浏览器与所述直播助手建立连接通道；

基于所述连接通道将所述直播助手输出给所述虚拟媒体设备的画面回显至所述浏览器中。

优选的，所述获取直播助手所对应的虚拟媒体设备的设备标识，包括：

获取所述浏览器的当前设备媒体列表；

在所述当前设备媒体列表中检测直播助手所对应的虚拟媒体设备的设备标识；

若检测到所述虚拟媒体设备的设备标识，则记录所述虚拟媒体设备的设备标识。

优选的，所述获取直播助手所对应的虚拟媒体设备的设备标识，还包括：

若未检测到所述虚拟媒体设备的设备标识，则输出用于提示安装所述直播助手的信息；

在确定所述直播助手安装完毕的情况下，返回执行所述获取所述浏览器的当前设备媒体列表，这一步骤。

优选的，所述方法还包括：

检测所述浏览器使用对所述虚拟媒体设备的授权信息；

若检测到所述授权信息，则执行所述将所述虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，这一步骤。

优选的，所述方法还包括：

若未检测到所述授权信息，则输出用于提示所述浏览器使用所述虚拟媒体设备的信息；

在确定所述浏览器被授予使用所述虚拟媒体设备的权限的情况下，记录相应的授权信息，并返回执行所述将所述虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，这一步骤。优选的，所述基于所述连接通道将所述直播助手输出给所述虚拟媒体设备的画面回显至所述浏览器中，包括：

将所述直播助手输出给所述虚拟媒体设备的画面输出到html中video标签，以实现基于所述连接通道在所述浏览器中回显所述虚拟媒体设备的画面。

一种web端的直播显示装置，所述装置包括：

设备标识获取模块，用于获取直播助手所对应的虚拟媒体设备的设备标识；

连接建立模块，用于将所述虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，以使所述浏览器与所述直播助手建立连接通道；

画面回显模块，用于基于所述连接通道将所述直播助手输出给所述虚拟媒体设备的画面回显至所述浏览器中。

优选的，所述设备标识获取模块，具体用于：

获取所述浏览器的当前设备媒体列表；在所述当前设备媒体列表中检测直播助手所对应的虚拟媒体设备的设备标识；若检测到所述虚拟媒体设备的设备标识，则记录所述虚拟媒体设备的设备标识。

一种电子设备，所述电子设备包括：至少一个存储器和至少一个处理器；所述存储器存储有应用程序，所述处理器调用所述存储器存储的应用程序，所述应用程序用于实现所述的web端的直播显示方法。

一种存储介质，所述存储介质存储有计算机程序代码，所述计算机程序代码执行时实现所述的web端的直播显示方法。

相较于现有技术，本发明实现的有益效果为：

本发明提供一种web端的直播显示方法、装置、电子设备及存储介质，首先获取直播助手所对应的虚拟媒体设备的设备标识，进而将该虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，以使浏览器与直播助手建立连接通道，最后基于该连接通道将直播助手输出给虚拟媒体设备的画面回显至浏览器中。基于本发明中，在web端浏览器可以与直播助手建立连接，并实时获取直播助手输出给其虚拟媒体设备的画面，在浏览器中实时回显，浏览器与直播助手两者相互独立、互不依赖，有效的保证了直播过程的稳定性。

附图说明

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

图1为本发明实施例提供的web端的直播显示方法的方法流程图；

图2为本发明实施例提供的web端的直播显示方法的部分方法流程图；

图3为本发明实施例提供的直播流程示意图；

图4为本发明实施例提供的web端的直播显示装置的结构示意图。

具体实施方式

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

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

为方便理解本发明，以下首先对本发明的相关概念进行说明：

web：（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构，简单一句，web页面就是网页，基于浏览器。

html：html的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等。简单来说就是网页。

video：html 标签，定义视频，比如电影片段或其他视频流。

canvas：html标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

embed：html标签定义嵌入的内容，比如插件。

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

Web API：是网络应用程序接口。包含了广泛的功能，其中的大部分请求均可以通过API（应用程序编程接口）访问。

NPAPI：网景插件应用程序编程接口（NPAPI, Netscape Plugin ApplicationProgramming Interface）是浏览器所使用的类似ActiveX的插件接口，插件就相当于运行在网页上的应用程序，如你想在网页上播放音乐，在网页上使用标签，浏览器会自动调用Windows Media Player运行，又如pdf等。还有，也可以用作在浏览器检测和启动客户端应用程序。

WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

回显：本发明中使用浏览器显示直播助手获取到的摄像头画面。

以往，网页上的插件，大多都使用NPAPI接口开发，随着互联网技术的演进，NPAPI接口因为安全及性能问题已逐步被浏览器厂商淘汰。目前以chrome（谷歌）浏览器为代表已经放弃支持NPAPI，这导致了以NPAPI接口为依赖的插件无法使用，已有的方案也是使用NPAPI接口开发，在直播过程中，由于插件的不稳定性，浏览器出现卡死或崩溃的现象时有发生，且该技术方案面临着被淘汰的风险，所以技术改造迫在眉睫。对此，现有技术存在以下问题：

1、与插件交互性能不稳定，容易受插件异常影响正常交互；2、兼容性不太好， 因部份浏览器不再支持NPAPI，导致功能不能使用；3、实现技术相对落后，开发与调试维护成本较高。

对此，为解决上述问题，本发明提供一种web端的直播显示方法、装置、电子设备及存储介质，在web端，浏览器直接调起直播助手，并实时获取直播助手画面，两者相互独立、互不依赖，有效的保证了直播过程的稳定性。

参见图1，图1为本发明实施例提供的web端的直播显示方法的方法流程图，该web端的直播显示方法可以应用于web端，该方法包括如下步骤：

S10，获取直播助手所对应的虚拟媒体设备的设备标识。

本发明实施例中，直播助手安装后会生成一个对应的虚拟媒体设备，即虚拟摄像头。直播助手采集到摄像头画面后，会将画面流输出到对应的虚拟媒体设备中，对此，通过输入用户输入的方式获得直播助手所对应的虚拟媒体设备的设备标识。

具体实现过程中，步骤S10“获取直播助手所对应的虚拟媒体设备的设备标识”可以采用如下步骤，方法流程图如图2所示：

S101，获取浏览器的当前设备媒体列表。

在现代web标准当中，使用浏览器原生方法可以获取到浏览器的当前设备媒体列表（这里指摄像头及麦克风），直播助手安装后会生成一个虚拟摄像头在设备媒体列表中，对此，在web端通过检测当前设备媒体列表即可查询包括虚拟媒体设备在内的所有媒体设备。

S102，在当前设备媒体列表中检测直播助手所对应的虚拟媒体设备的设备标识。

本发明实施例中，通过检测当前设备媒体列表可以寻找直播助手对应的虚拟媒体设备，从而获得该虚拟媒体设备的设备标识（即唯一的设备ID）。

S103，若检测到虚拟媒体设备的设备标识，则记录虚拟媒体设备的设备标识。

当然，若未检测到虚拟媒体设备的设备标识，则可以输出提示安装直播助手的信息，以提示用户安装直播助手，并由直播助手在安装后生成一个相应的虚拟媒体设备在媒体列表中，进一步在确定直播助手安装完毕的情况下，返回执行步骤S101，最终检测到虚拟媒体设备的设备标识，并记录该虚拟媒体设备的设备标识。

S20，将虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，以使浏览器与直播助手建立连接通道。

本发明实施例中，对于所获得的虚拟媒体设备的设备标识，可以将该虚拟媒体设备的设备标识传入并打开该虚拟媒体设备，具体的，可以将该虚拟媒体设备的设备标识赋值给浏览器的媒体输出方法，此时浏览器会调起直播助手，即浏览器与直播助手完成连接通道的建立，此时，媒体类型的轨道生成一个视频流轨道。

在一些实施例中，为保证web端显示直播助手画面的合法性，在图1所示的web端的直播显示方法的基础上，还可以包括如下步骤：

检测浏览器使用对虚拟媒体设备的授权信息；若检测到授权信息，则执行将虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，这一步骤。

本发明实施例中，在建立浏览器与直播助手的连接通道之间，需要获得用户对浏览器使用虚拟媒体设备的授权信息，该授权信息可以表征用户允许浏览器使用该虚拟媒体设备，其中可以包含浏览器的信息、以及虚拟媒体设备的设备标识。

若检测到浏览器使用虚拟媒体设备的授权信息，则执行步骤S20。反之，若未检测到授权信息，则输出用于提示浏览器使用虚拟媒体设备的信息，以使用户允许浏览器查询并使用直播助手的虚拟媒体设备；在确定浏览器被授予使用虚拟媒体设备的权限的情况下，记录相应的授权信息，并返回执行步骤S20。由此，用户只需要第一使用时对浏览器进行直播助手的虚拟媒体设备的权限授权，如果用户授权允许浏览器使用直播助手的虚拟媒体设备，则后续使用时无需再授权。

S30，基于连接通道将直播助手输出给虚拟媒体设备的画面回显至浏览器中。

本发明实施例中，基于浏览器与直播助手的连接通道，可以将直播助手输出给其虚拟媒体设备的画面回显至浏览器中。在一些场景下，可以使用html的canvas进行绘制实现图形模拟显示视频流，但使用canvas绘制需要对视频流进行解码等一系列功能实现，开发成本更高。

对此，为解决该问题，本发明使用html的video来实现，video是独有的视频媒体播放标签，直接使用即可，性能更好，开发成本更低。具体的，步骤S30“基于连接通道将直播助手输出给虚拟媒体设备的画面回显至浏览器中”可以采用如下步骤：

将直播助手输出给虚拟媒体设备的画面输出到html中video标签，以实现基于连接通道在浏览器中回显虚拟媒体设备的画面。

本发明实施例中，将视频流轨道输出到html中video标签，以此将直播助手输出给虚拟媒体设备的画面输出到html中video标签，当直播助手采集到摄像头画面后，将画面流输出到虚拟媒体设备中，因为之前的连接通道已经建立，视频流中有数据后video标签即会播放摄像头的画面，完成在浏览器中回显的功能，任何一方出现异常或关闭应用后，都不会影响自己的运行。

参见图3，图3为本发明实施例提供的直播流程示意图。摄像头可以实时采集主播的画面，并将所采集的画面发送给直播助手，直播助手将所获得的画面输出给其虚拟媒体设备，基于本发明的web端的直播显示方法，主播端浏览器可以实时的回显直播助手输出给其虚拟媒体设备的画面，这样主播在主播端浏览器就可以看到自己在主播端网页直播间的画面，这样主播可以完全在网页中看到自己的画面，同时，也可以在聊天区与观众互动。而直播助手另一方面可以将所获得的画面推流给服务器，对于观众端网页直播间来说，则可以使用观众端浏览器从服务器拉流主播的画面。

需要说明的是，执行本发明的web端的直播显示方法的web端属于主播端，相应的本发明的web端的直播显示方法中浏览器即主播端浏览器。

本发明是基于web端原生API方法，充分使用了现代浏览器的原生方法，实现调起并获取直播助手画面，更符合web标准，支持目前大部份主流浏览器，浏览器与直播助手独立运行，互不依赖，能够有效控制风险，保证直播的稳定性。

此外，因现代浏览器都支持webRTC，网页端与媒体通讯更简单，交互更加友好，浏览器与直播助手的运行相互独立，互不干扰，本发明的实现方案具有性能表现良好，代码简洁，维护方便等优点。本发明提供一个稳定、兼容大部份web端浏览器且维护成本低的直播助手画面回显功能。

基于上述实施例提供的web端的直播显示方法，本发明则对应提供执行上述web端的直播显示方法的装置，该装置的结构示意图如图4所示，包括：

设备标识获取模块10，用于获取直播助手所对应的虚拟媒体设备的设备标识；

连接建立模块20，用于将虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，以使浏览器与直播助手建立连接通道；

画面回显模块30，用于基于连接通道将直播助手输出给虚拟媒体设备的画面回显至浏览器中。

可选的，设备标识获取模块10，具体用于：

获取浏览器的当前设备媒体列表；在当前设备媒体列表中检测直播助手所对应的虚拟媒体设备的设备标识；若检测到虚拟媒体设备的设备标识，则记录虚拟媒体设备的设备标识。

可选的，设备标识获取模块10，还用于：

若未检测到虚拟媒体设备的设备标识，则输出用于提示安装直播助手的信息；在确定直播助手安装完毕的情况下，返回执行获取浏览器的当前设备媒体列表，这一步骤。

可选的，连接建立模块20，还用于：

检测浏览器使用对虚拟媒体设备的授权信息；若检测到授权信息，则执行将虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，这一步骤。

可选的，连接建立模块20，还用于：

若未检测到授权信息，则输出用于提示浏览器使用虚拟媒体设备的信息；在确定浏览器被授予使用虚拟媒体设备的权限的情况下，记录相应的授权信息，并返回执行将虚拟媒体设备的设备标识传入给浏览器的媒体输出方法，这一步骤。

可选的，画面回显模块30，还用于：

将直播助手输出给虚拟媒体设备的画面输出到html中video标签，以实现基于连接通道在浏览器中回显虚拟媒体设备的画面。

需要说明的是，本发明实施例中各模块的细化功能可以参见上述web端的直播显示方法实施例对应公开部分，在此不再赘述。

基于上述实施例提供的web端的直播显示方法，本发明则对应提供一种电子设备，电子设备包括：至少一个存储器和至少一个处理器；存储器存储有应用程序，处理器调用存储器存储的应用程序，应用程序用于实现web端的直播显示方法。

基于上述实施例提供的web端的直播显示方法，本发明则对应提供一种存储介质，存储介质存储有计算机程序代码，计算机程序代码执行时实现web端的直播显示方法。

以上对本发明所提供的一种web端的直播显示方法、装置、电子设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备所固有的要素，或者是还包括为这些过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (4)

1.一种web端的直播显示方法，其特征在于，所述方法包括：

获取直播助手所对应的虚拟媒体设备的设备标识；

将所述虚拟媒体设备的设备标识传入给浏览器，以使所述浏览器与所述直播助手建立连接通道；

基于所述连接通道将所述直播助手输出给所述虚拟媒体设备的画面回显至所述浏览器中；

其中，所述方法还包括：

检测用户对所述浏览器使用所述虚拟媒体设备的授权信息；

若检测到所述授权信息，则执行所述将所述虚拟媒体设备的设备标识传入给浏览器这一步骤；

若未检测到所述授权信息，则输出用于提示用户所述浏览器请求使用所述虚拟媒体设备的信息；

在确定所述浏览器被授予使用所述虚拟媒体设备的权限的情况下，记录相应的授权信息，并返回执行所述将所述虚拟媒体设备的设备标识传入给浏览器这一步骤；

其中，所述获取直播助手所对应的虚拟媒体设备的设备标识，包括：

获取所述浏览器的当前设备媒体列表；

在所述当前设备媒体列表中检测直播助手所对应的虚拟媒体设备的设备标识；

若检测到所述虚拟媒体设备的设备标识，则记录所述虚拟媒体设备的设备标识；

若未检测到所述虚拟媒体设备的设备标识，则输出用于提示安装所述直播助手的信息；

在确定所述直播助手安装完毕的情况下，返回执行所述获取所述浏览器的当前设备媒体列表这一步骤；

其中，所述基于所述连接通道将所述直播助手输出给所述虚拟媒体设备的画面回显至所述浏览器中，包括：

将所述直播助手输出给所述虚拟媒体设备的画面输出到html中video标签，以实现基于所述连接通道在所述浏览器中回显所述虚拟媒体设备的画面。

2.一种web端的直播显示装置，其特征在于，所述装置包括：

设备标识获取模块，用于获取直播助手所对应的虚拟媒体设备的设备标识；

连接建立模块，用于将所述虚拟媒体设备的设备标识传入给浏览器，以使所述浏览器与所述直播助手建立连接通道；

画面回显模块，用于基于所述连接通道将所述直播助手输出给所述虚拟媒体设备的画面回显至所述浏览器中；

其中，所述连接建立模块还用于：

检测用户对所述浏览器使用所述虚拟媒体设备的授权信息；

若检测到所述授权信息，则执行所述将所述虚拟媒体设备的设备标识传入给浏览器这一步骤；

若未检测到所述授权信息，则输出用于提示用户所述浏览器请求使用所述虚拟媒体设备的信息；

在确定所述浏览器被授予使用所述虚拟媒体设备的权限的情况下，记录相应的授权信息，并返回执行所述将所述虚拟媒体设备的设备标识传入给浏览器这一步骤；

其中，所述设备标识获取模块，具体用于：

获取所述浏览器的当前设备媒体列表；在所述当前设备媒体列表中检测直播助手所对应的虚拟媒体设备的设备标识；若检测到所述虚拟媒体设备的设备标识，则记录所述虚拟媒体设备的设备标识；若未检测到所述虚拟媒体设备的设备标识，则输出用于提示安装所述直播助手的信息；在确定所述直播助手安装完毕的情况下，返回执行所述获取所述浏览器的当前设备媒体列表这一步骤；

其中，所述画面回显模块，具体用于：

将所述直播助手输出给所述虚拟媒体设备的画面输出到html中video标签，以实现基于所述连接通道在所述浏览器中回显所述虚拟媒体设备的画面。

3.一种电子设备，其特征在于，所述电子设备包括：至少一个存储器和至少一个处理器；所述存储器存储有应用程序，所述处理器调用所述存储器存储的应用程序，所述应用程序用于实现权利要求1所述的web端的直播显示方法。

4.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序代码，所述计算机程序代码执行时实现权利要求1所述的web端的直播显示方法。

Images