一种处理视音频的方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术公开了一种处理视音频的方法、装置、电子设备及存储介质。所述方法包括：web端启动待编辑工程；web端从存储服务器中下载携带有JavaScript接口的wasm相关文件，并对wasm相关文件进行编译，得到wasm处理模块；在待编辑工程中，wasm处理模块通过JavaScript接口，添加视音频轨道；wasm处理模块获取待编辑视音频中的m3u8文件切片，并将m3u8文件切片添加到视音频轨道；wasm处理模块从存储服务器中加载特效包；wasm处理模块根据加载的特效包，对m3u8文件切片进行渲染处理。采用本发明专利技术的技术方案可以在web端实现在对图像的实时渲染，避免了由服务器端处理视音频的过程，解决了过渡依赖网络、实时性较低等问题。

【技术实现步骤摘要】
一种处理视音频的方法、装置、电子设备及存储介质
本专利技术涉及信息处理
，特别是涉及一种处理视音频的方法、装置、电子设备及存储介质。
技术介绍
在相关技术中，处理视音频的方法为：由服务器端进行音视频解码、特效处理和图像渲染，再将处理好的音视频流混合后发送给web端，由web端进行实时播放和显示。该方法中，web端不需要对音视频进行处理，只负责实时播放和显示图像，然而在web端进行实时播放和显示时，由于需要服务器端实时地将处理好的音视频流发送给web端，因而存在过渡依赖网络的问题，如果网络环境不稳定或者网络速度较差，该方法就会导致实时性无法保证，会出现频繁卡顿的问题，进而导致web端的用户体验变得很差。因此，处理视音频的相关技术方案中，由于web端的播放和显示，需要实时地从服务器端获取，因而存在过渡依赖网络、实时性较低等问题。
技术实现思路
鉴于上述问题，本专利技术实施例提供一种处理视音频的方法、装置、电子设备及存储介质，旨在解决相关技术中存在的过渡依赖网络和实时性较低的问题。为了解决上述技术问题，本专利技术采取以下方案实现：第一方面，提供了一种处理视音频的方法，所述方法包括：web端启动待编辑工程；所述web端从存储服务器中下载携带有JavaScript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块；在所述待编辑工程中，所述web端通过所述JavaScript接口，创建视音频编辑界面；所述wasm处理模块获取待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面；所述web端从所述存储服务器中下载特效包；所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。本专利技术实施例的第二方面，提供了一种处理视音频的装置，所述装置包括：启动模块，用于web端启动待编辑工程；获取模块，用于所述web端从存储服务器中加载携带有JavaScript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块；第一添加模块，用于在所述待编辑工程中，所述web端通过所述JavaScript接口，创建视音频编辑界面；第二添加模块，用于所述wasm处理模块加载待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面；下载模块，用于所述Web端从所述存储服务器中下载特效包；处理模块，用于所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。本专利技术实施例的第三方面，提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的处理视音频的方法。本专利技术实施例的第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一方面所述的处理视音频的方法的步骤。本专利技术实施例中，首先，web端启动待编辑工程，从存储服务器中下载携带有JavaScript接口的wasm相关文件，并对wasm相关文件进行编译，得到wasm处理模块；然后，在待编辑工程中，wasm处理模块通过JavaScript接口添加视音频轨道，并将待编辑视音频中的m3u8文件切片添加到视音频轨道上；最后，wasm处理模块通过JavaScript接口，从存储服务器中加载特效包，并根据加载的特效包对m3u8文件切片进行渲染处理。由于本专利技术实施例中，对视音频的特效处理过程是在web端完成的，因而无论是播放还是seek定位都能实时看到渲染后的图像效果，在播放和显示的过程中，不需要依赖网络从服务器端获取，解决了相关技术中过渡依赖网络的问题，同时提高了播放和显示的实时性。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。图1是本专利技术实施例中的一种处理视音频的方法的通信环境示意图；图2是本专利技术实施例中的一种处理视音频的方法的步骤流程图；图3是本专利技术实施例中的一种wasm处理模块获取待编辑视音频中的m3u8文件切片的方法的步骤流程图；图4是本专利技术实施例中的一种处理视音频的装置的结构示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。本专利技术的核心构思为：基于webassembly技术，用C++语言编译出带有JavaScript接口的wasm相关文件，使得web端可以直接使用该wasm相关文件，实现在web端对视音频进行流媒体处理、视频图像特效渲染等处理。基于该技术构思，提出了本专利技术的处理视音频的方法，下面，对本专利技术的处理视音频的进行清楚、完整地描述。图1是本专利技术实施例中的一种处理视音频的方法的通信环境示意图。参照图1，本专利技术的实施环境包括：服务器端100和web端200。其中，服务器端100包括转码服务器、存储服务器和合成服务器，主要用于视音频的切片处理、合成和存储；web端200包括wasm处理模块、FS和IndexDB，主要用于视音频切片的编辑和特效处理。其中，服务器端100中的各功能模块分别与web端200通信连接，连接方式可以是有线连接，或者是无线连接。下面对服务器端100和web端200终端中的各功能模块的通信连接路径进行说明：转码服务器，与存储服务器和web端200分别进行通信连接；存储服务器，与转码服务器、合成服务器、web端200、wasm处理模块以及FS分别进行通信连接；合成服务器，与存储服务器和web端200分别进行通信连接；wasm处理模块，与存储服务器和FS分别进行通信连接；FS，与存储服务器、wasm处理模块和IndexDB分别进行通信连接；IndexDB，与FS进行通信连接。其中，wasm处理模块，通过wasm相关文件携带的JavaScript接口，实现通信连接。下面对各个模块的功能进行详细介绍：转码服务器：从web端获取待编辑视音频，并对获取的待编辑视音频进行转码分片；然后，将分片后的视音频切片发送到存储服务器。存储服务器：接收由存储服务器发送的分片后的视音频切片；将视音频切片发送给wasm处理模块；将本地存储的特效素材包发送给FS；最后，还会本文档来自技高网...

【技术保护点】
1.一种处理视音频的方法，其特征在于，所述方法包括：/nweb端启动待编辑工程；/n所述web端从存储服务器中下载携带有JavaScript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块；/n在所述待编辑工程中，所述web端通过所述JavaScript接口，创建视音频编辑界面；/n所述wasm处理模块获取待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面；/n所述web端从所述存储服务器中下载特效包；/n所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。/n

【技术特征摘要】
1.一种处理视音频的方法，其特征在于，所述方法包括：
web端启动待编辑工程；
所述web端从存储服务器中下载携带有JavaScript接口的wasm相关文件，并对所述wasm相关文件进行编译，得到wasm处理模块；
在所述待编辑工程中，所述web端通过所述JavaScript接口，创建视音频编辑界面；
所述wasm处理模块获取待编辑视音频中的m3u8文件切片，并将所述m3u8文件切片添加到所述视音频编辑界面；
所述web端从所述存储服务器中下载特效包；
所述wasm处理模块根据所述特效包，对所述m3u8文件切片进行渲染处理。


2.根据权利要求1所述方法，其特征在于，所述web端与合成服务器连接，所述方法还包括：
所述web端将对所述m3u8文件切片进行渲染处理得到的渲染结果以xml格式进行存储，得到xml格式的处理数据；
所述web端将所述处理数据，发送至所述合成服务器并通过所述web端的canvas预览窗口显示发送给所述合成服务器的所述处理数据；
所述合成服务器对同时接收到的多个所述处理数据进行合成，得到所述待编辑视音频的成片；其中，所述成片携带有合成地址；
根据所述合成地址，将所述待编辑视音频的成片存储在所述存储服务器中，并将所述合成地址返回给所述web端；
所述web端根据所述合成地址，对所述待编辑视音频的成片进行下载和预览。


3.根据权利要求1所述方法，其特征在于，所述web端从存储服务器中下载携带有JavaScript接口的wasm相关文件，包括：
编辑服务器基于webassembly技术，用C++语言编译得到wasm相关文件，并将所述wasm相关文件存储在所述存储服务器，其中，所述wasm相关文件携带有JavaScript接口；
所述web端从所述存储服务器中，下载所述携带有JavaScript接口的wasm相关文件。


4.根据权利要求1所述方法，其特征在于，在所述wasm处理模块获取待编辑视音频中的m3u8文件切片之前，所述方法还包括：
所述web端将所述待编辑视音频上传到转码服务器；
所述转码服务器按照预设的配置规则，对所述待编辑视音频进行转码和分片，生成多个携带有切片信息的低码流的m3u8文件切片，并将生成的所述多个低码流的m3u8文件切片存储在所述存储服务器中；
其中，所述配置规则包括配置切片信息，所述切片信息包括分辨率、码率和时长。


5.根据权利要求4所述方法，其特征在于，所述web端包括FS和IndexDB，所述wasm处理模块获取待编辑视音频中的m3u8文件切片，包括：
所述wasm处理模块检测所述FS中，是否存储有所述m3u8文件切片；
若检测到所述FS中存储有所述m3u8文件切片，所述wasm处理模块从所述FS中加载所述m3u8文件切片；
若检测到所述FS中未存储有所述m3u8文件切片，则检测所述IndexDB中，是否存储有所述m3u8文件切片；
若检测到所述IndexDB存储有所述m3u8文件切片，则将IndexDB中的所述m3u8文件切片，从所述IndexDB中读取到所述FS中，所述wasm处理模块再从所述FS中加载所述m3u8文件切片；
若检测到所...

【专利技术属性】
技术研发人员：黄裔，
申请(专利权)人：北京美摄网络科技有限公司，
类型：发明
国别省市：北京;11