CN113411664B - 基于子应用的视频处理方法、装置和计算机设备 - Google Patents

基于子应用的视频处理方法、装置和计算机设备 Download PDF

Info

Publication number
CN113411664B
CN113411664B CN202011398448.5A CN202011398448A CN113411664B CN 113411664 B CN113411664 B CN 113411664B CN 202011398448 A CN202011398448 A CN 202011398448A CN 113411664 B CN113411664 B CN 113411664B
Authority
CN
China
Prior art keywords
video
browser
sub
running environment
application
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.)
Active
Application number
CN202011398448.5A
Other languages
English (en)
Other versions
CN113411664A (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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202011398448.5A priority Critical patent/CN113411664B/zh
Publication of CN113411664A publication Critical patent/CN113411664A/zh
Application granted granted Critical
Publication of CN113411664B publication Critical patent/CN113411664B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving rendering scenes according to scene graphs, e.g. MPEG-4 scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/485—End-user interface for client configuration

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Television Signal Processing For Recording (AREA)
  • Stored Programmes (AREA)

Abstract

本申请涉及一种基于子应用的视频处理方法、装置和计算机设备。所述方法包括：在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，获得视频帧的像素数据；调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面；在运行于所述子应用运行环境的子应用中显示所述视频帧画面；响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理。采用本申请的方法能够增加子应用的功能，并且由于子应用的使用频次高，因此还可以提高视频编辑的简便性。

Description

基于子应用的视频处理方法、装置和计算机设备
技术领域
本申请涉及视频处理技术领域，特别是涉及一种基于子应用的视频处理方法、装置、计算机设备和存储介质。
背景技术
子应用是指无法独立运行、需要借助母应用实现运行的应用。子应用由于其轻便的特点，已深受大众喜爱并且被广泛应用。目前子应用已经能够实现较多的功能，如页面浏览、图片显示、视频播放等。然而子应用中内置的基础运行环境与用于视频处理的运行环境有较大的不同，因此视频处理的一些功能不能直接应用于子应用中，如无法在子应用中进行视频编辑等，导致子应用的功能单一。
发明内容
基于此，有必要针对上述技术问题，提供一种基于子应用的视频处理方法、装置、计算机设备和存储介质。
一种基于子应用的视频处理方法，所述方法包括：
在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，获得所述视频帧的像素数据；
调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面；
在运行于所述子应用运行环境的子应用中显示所述视频帧画面；
响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理。
一种基于子应用的视频处理装置，所述装置包括：
绘制模块，用于在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，获得所述视频帧的像素数据；
渲染模块，用于调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面；
显示模块，用于在运行于所述子应用运行环境的子应用中显示所述视频帧画面；
编辑模块，用于响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理。
在其中一个实施例中，该基于子应用的视频处理装置还包括创建模块。创建模块用于在所述子应用运行环境中创建所述子应用运行环境所缺失的浏览器对象；为缺失的浏览器对象添加相应的对象属性，获得适配于所述子应用运行环境的目标浏览器对象；基于所述目标浏览器对象以及所述子应用运行环境组成模拟的浏览器运行环境。
在其中一个实施例中，创建模块用于在所述子应用运行环境中，将所述子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；所述第一对象类型为在视频编辑时不直接进行操作的对象类型；为所述空对象添加相应的对象属性，获得适配于所述子应用运行环境的第一对象类型的目标浏览器对象。
在其中一个实施例中，创建模块用于在所述子应用运行环境中，引用所述子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象；为所述第二对象类型的浏览器内部对象添加自定义属性，获得适配于所述子应用运行环境的第二对象类型的目标浏览器对象；所述第二对象类型是指不能在所述子应用运行环境中创建的对象类型。
在其中一个实施例中，所述第二对象类型的目标浏览器对象包括目标浏览器画布对象。绘制模块用于调用所述目标浏览器画布对象将所述视频中的视频帧绘制在画布。渲染模块用于调用所述目标浏览器画布对象获取所述画布中视频帧的像素数据；调用目标浏览器画布对象以及调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述像素数据进行渲染，获得视频帧画面。
在其中一个实施例中，创建模块还用于在所述子应用运行环境中通过所述第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；所述第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型；为所述第三对象类型的浏览器对象添加自定义对象属性，获得适配于所述子应用运行环境的第三对象类型的目标浏览器对象。
在其中一个实施例中，所述第三对象类型的目标浏览器对象包括目标浏览器图片对象。所述编辑模块用于响应于对所述子应用所显示的所述视频帧画面的特效效果或滤镜效果选取操作，调用所述目标浏览器图片对象以及调用所述浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对所述视频帧画面进行相应的编辑处理。
在其中一个实施例中，绘制模块用于将所述视频中的视频帧绘制在二维浏览器画布。渲染模块用于调用所述浏览器运行环境所提供的浏览器图像渲染方式，将所述二维浏览器画布中视频帧的像素数据渲染在浏览器图形库画布中，获得视频帧画面。
在其中一个实施例中，绘制模块用于通过所述子应用运行环境所提供的视频标签，在所述子应用的不可见区域渲染所述视频中的视频帧；将在所述不可见区域中渲染的视频帧绘制在二维浏览器画布。
在其中一个实施例中，编辑模块用于响应于对所述子应用所显示的所述视频帧画面的编辑操作，显示候选视频编辑效果；响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果对所述视频帧画面进行编辑处理。
在其中一个实施例中，编辑模块用于响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与所述触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频。
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现各方法实施例的步骤。
一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现各方法实施例的步骤。
上述基于子应用的视频处理方法、装置、计算机设备和存储介质，子应用运行环境和原生的浏览器运行环境有很大的不同，因此基于子应用运行环境模拟浏览器运行环境，在模拟的浏览器运行环境下，将视频的视频帧绘制在画布上，通过绘制在画布中的视频帧获取到视频帧的像素数据；进而能够调用浏览器运行环境所提供的图像渲染方式，基于像素数据进行渲染，获得视频帧画面，在运行于子应用运行环境的子应用中显示视频帧画面，即此时显示的是一个能被编辑的视频帧画面；响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理，则实现了在子应用中的视频编辑处理，增加了子应用的功能，并且由于子应用的使用频次高，因此还可以提高视频编辑的简便性。
附图说明
图1为一个实施例中基于子应用的视频处理方法的流程示意图；
图2为一个实施例中模拟浏览器运行环境的流程示意图；
图3为另一个实施例中基于子应用的视频处理方法的流程示意图；
图4为一个实施例中用于视频编辑的界面示意图；
图5为一个实施例中显示候选滤镜效果的界面示意图；
图6为一个实施例中视频文字添加的界面示意图；
图7为一个实施例中显示候选特效效果的界面示意图；
图8为一个实施例中编辑后的视频导出的界面示意图；
图9为一个实施例中基于子应用的视频处理装置的结构框图；
图10为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
在一个实施例中，如图1所示，提供了一种基于子应用的视频处理方法，该方法可以由终端设备执行，也可以由终端设备和服务器共同执行。终端设备可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。本申请对终端设备和服务器的数量不做限制。本方法实施例以该方法由终端设备执行为例进行说明，终端设备中安装有母应用，母应用中包含子应用。包括以下步骤：
步骤102，在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，获得视频帧的像素数据。
其中，母应用是承载子应用的应用程序，为子应用的实现提供运行环境。母应用是原生应用程序。原生应用程序是可直接运行于操作系统的应用程序。在母应用中能运行子应用。子应用在子应用运行环境中运行。母应用可以是社交应用程序、专门支持子应用的专用应用程序、文件管理应用程序、邮件应用程序或者游戏应用程序等。社交应用包括即时通信应用、SNS(Social Network Service，社交网站)应用或者直播应用等。即时通信应用如微信、QQ等。
浏览器运行环境是指用于实现web浏览器相关功能的运行环境。浏览器运行环境中包含多种接口以及对象。基于子应用运行环境所模拟的浏览器运行环境与原生的浏览器运行环境不完全一致。计算机设备通过在子应用运行环境中创建所缺失的浏览器对象或接口等能够模拟浏览器运行环境。即模拟的浏览器运行环境中包含子应用运行环境，也包含基于子应用运行环境所创建的浏览器对象。
视频中包括有图像数据和音频数据或者只有图像数据。视频帧是指视频的一帧数据。例如一秒的视频中可以包括30个视频帧。
具体地，在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，获取视频，并解析该视频，将视频中的视频帧绘制在模拟的浏览器运行环境所提供的画布中，通过在画布中的视频帧获得视频帧的像素数据。获取的视频可以是当前通过本地的摄像头录制的视频，或者本地存储的已录制的视频，或者其他设备传输的视频等不限于此。
步骤104，调用浏览器运行环境所提供的浏览器图像渲染方式，基于画布中视频帧的像素数据进行渲染，获得视频帧画面。
其中，浏览器图像渲染方式是指可在浏览器运行环境中进行图像渲染的方式，具体可以是函数。例如，浏览器图像渲染方式可以是texImage2D、texImage3D等。texImage2D、texImage3D等均是webGL(浏览器图像库)函数，功能是根据指定的参数，生成对应的纹理。像素数据用于表示视频帧的每个像素点的数据。视频帧画面是指可显示在终端设备上的视频帧的画面。
具体地，终端设备获取在画布中的视频帧的像素数据，调用浏览器运行环境所提供的浏览器图像渲染方式，基于视频帧的像素数据进行渲染，获得视频帧画面。
在一个实施例中，终端设备通过浏览器画布对象中的getImageData函数可获取画布中的视频帧的像素数据。终端设备调用浏览器运行环境所提供的浏览器图像渲染方式如texImage2D方法，将视频帧的像素数据传入texImage2D方法，实现渲染获得视频帧画面的效果。
步骤106，在运行于子应用运行环境的子应用中显示视频帧画面。
具体地，终端设备在运行于子应用运行环境的子应用中显示视频帧画面。其中，子应用是能够在母应用提供的环境中运行的应用程序。子应用是一种不需要下载安装即可使用的应用。子应用具体可以是视频编辑应用。用户可以通过扫描二维码、搜索以及公众号等多种入口快捷方便地使用子应用。
步骤108，响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理。
其中，编辑处理可以是对显示的所有视频帧画面进行同一编辑处理，也可以是对视频的一部分视频帧画面进行同一类型的编辑处理，对视频帧的另一部分视频帧画面进行另一类型的编辑处理。
对视频帧画面的编辑操作具体可以包括但不限于视频裁切、视频滤镜添加、视频特效添加、视频音乐添加、视频文字添加中至少一种。还可以进行视频录制、视频合成导出等。视频裁切可以是保留视频帧的至少一部分画面，也可以是保留视频的一部分视频帧。
视频滤镜添加是指为视频帧添加滤镜。如白皙滤镜、清透滤镜、鲜亮滤镜、日系滤镜、薄暮滤镜、宁静滤镜、自然滤镜、晨光滤镜、冷光滤镜等。
视频音乐添加是指为视频添加音乐。音乐具体可以是子应用中提供的音乐，也可以是终端设备本地的音乐等不限于此。
视频文字添加是指为视频添加文字。文字具体可以是按照子应用中提供的默认字体显示的文字，也可以按照所选择子应用中提供的其他字体显示的文字。
具体地，终端设备响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理，获得编辑处理后的视频。用户可在显示的视频帧画面上进行个性化的视频编辑。终端设备响应于对子应用所显示的视频帧画面的编辑操作，对所显示的视频帧画面进行相应的编辑处理。例如，终端设备响应于对子应用所显示的视频帧画面的视频裁切操作，对所显示的视频帧画面进行裁切处理。终端设备响应于对子应用所显示的视频帧画面的视频特效添加操作，对所显示的视频帧画面进行特效添加。终端设备响应于对子应用所显示的视频帧画面的视频音乐添加，对所显示的视频帧画面添加音乐。终端设备响应于对子应用所显示的视频帧画面的视频文字添加，对所显示的视频帧画面添加文字。
本实施例中基于子应用的视频编辑方法，子应用运行环境和原生的浏览器运行环境有很大的不同，主流的视频编辑相关的技术无法直接运行在子应用内。子应用运行环境与浏览器运行环境的一个区别在于，在浏览器运行环境中能够直接将视频元素当作一个参数传递给图像渲染方式，而在子应用运行环境中则不允许直接将视频元素当作一个参数传递给图像渲染方式；考虑到视频的本质是一组连续的画面组合，那么在不能直接渲染视频的情况下，可通过渲染视频帧来达到渲染视频的效果，因此基于子应用运行环境模拟浏览器运行环境，在模拟的浏览器运行环境下，将视频的视频帧绘制在画布上；并且由于子应用运行环境中也无法直接获取到像素数据，因此需要通过绘制在画布中的视频帧获取到视频帧的像素数据；进而能够调用浏览器运行环境所提供的图像渲染方式，基于像素数据进行渲染，获得视频帧画面，在运行于子应用运行环境的子应用中显示视频帧画面，即此时显示的是一个能被编辑的视频帧画面；响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理，则实现了在子应用中的视频编辑处理，增加了子应用的功能，并且由于子应用的使用频次高，因此还可以提高视频编辑的简便性。
在一个实施例中，如图2所述，为一个实施例中模拟浏览器运行环境的流程示意图。该基于子应用的视频处理方法还包括：
步骤202，在子应用运行环境中创建子应用运行环境所缺失的浏览器对象。
其中，子应用运行环境所缺失的浏览器对象包括第一对象类型的浏览器对象、第二对象类型的浏览器对象和第三对象类型的浏览器对象。并且第一对象类型、第二对象类型和第三对象类型不相同。不同对象类型的浏览器对象的创建方式不同。创建的子应用运行环境所缺失的浏览器对象中可已包含对应的对象属性。
具体地，在子应用运行环境中。终端设备采用不同的适配方式创建对应的子应用运行环境所缺失的浏览器对象。如采用第一适配方式创建第一对象类型的浏览器对象，采用第二适配方式创建第二对象类型的浏览器对象，采用第三适配方式创建第三对象类型的浏览器对象。例如，所缺失的浏览器对象包括但不限于画布(canvas)对象、文件(document)对象、目标事件(EventTarget)对象、超文本标记语言元素(HTMLElement)对象、图片(Image)对象、窗口(window)对象。
在一个实施例中，采用第一适配方式创建第一对象类型的浏览器对象，包括：在子应用运行环境中，将子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；第一对象类型在视频编辑时不直接进行操作的对象类型。
在一个实施例中，采用第二适配方式创建第二对象类型的浏览器对象，包括：在子应用运行环境中，引用子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象。
在一个实施例中，采用第三适配方式创建第三对象类型的浏览器对象，包括：在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型。
步骤204，为缺失的浏览器对象添加相应的对象属性，获得适配于子应用运行环境的目标浏览器对象。
其中，对象属性是指与对象相关的属性值等。对象属性通常可以被修改、添加和删除，但是某些对象属性是只读的。适配于子应用运行环境的目标浏览器对象是指能够在子应用运行环境直接被调用的浏览器对象。
具体地，终端设备为缺失的浏览器对象添加相应的对象属性，获得适配于子应用运行环境的目标浏览器对象。如为画布对象添加画布大小属性等。
步骤206，基于目标浏览器对象以及子应用运行环境组成模拟的浏览器运行环境。
具体地，由于子应用运行环境中还提供了模拟浏览器运行环境的其他构件，因此终端设备基于目标浏览器对象以及子应用运行环境组成模拟的浏览器运行环境。例如，子应用运行环境中提供了解析视频的能力，因此在对视频处理时，能够直接使用子应用运行环境所提供的能力。
本实施例中，在子应用运行环境内，很多浏览器运行环境中常用的浏览器对象以及接口等缺失，因此需要在子应用运行环境中模拟适配出缺失的对象，并且缺失的对象可以应用在子应用运行环境中；为浏览器对象添加相应的对象属性，再加上原有的子应用运行环境，能够组成浏览器运行环境的框架，由此可在子应用运行环境中模拟浏览器运行环境，从而在子应用运行环境中实现视频编辑，增加了子应用的功能，并且提高视频编辑的简便性。
在一个实施例中，在子应用运行环境中创建子应用运行环境所缺失的浏览器对象，包括：在子应用运行环境中，将子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；第一对象类型为在视频编辑时不直接进行操作的对象类型。
为缺失的浏览器对象添加相应的对象属性，获得适配于子应用运行环境的目标浏览器对象，包括：为空对象添加相应的对象属性，获得适配于子应用运行环境的第一对象类型的目标浏览器对象。
其中，第一对象类型为在视频编辑时不直接进行操作的对象类型。即第一对象类型是构成浏览器运行环境所必须的对象类型，且在视频编辑中不直接调用的对象类型。例如，第一对象类型的浏览器对象包括但不限于文件(document)对象、目标事件(EventTarget)对象、超文本标记语言元素(HTMLElement)对象和窗口(window)对象。
具体地，在子应用运行环境中，将子应用运行环境中所缺失的、且在视频编辑时不直接进行操作的对象类型的浏览器对象创建为空对象。终端设备为空对象添加相应的对象属性，获得适配于子应用运行环境的第一对象类型的目标浏览器对象。具体为空对象所添加的对象属性可以是原生的浏览器运行环境中第一对象类型的浏览器对象的对象属性。以窗口对象为例，属性可以包括Window.closed、Window.devicePixelRatio等，其中Window.closed这个属性指示当前窗口是否关闭，Window.devicePixelRatio用于返回当前显示器的物理像素和设备独立像素的比例。
例如，对于类似window、document、EventTarget、HTMLElement这种复杂对象，由于视频编辑过程中无需对这种对象进行直接操作，因此可以直接以一个空对象的方式创建，伪代码如下(以document为例)
Var document＝{}；document.style＝{}document.location＝{}...
由于document对象属性众多，在此不全部列出。
本实施例中，在浏览器运行环境中，有一些对象是视频编辑过程中无需直接进行操作的对象，称之为第一对象类型的浏览器对象，那么可以将子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象，并为第一对象类型的浏览器对象添加对象属性，从而模拟获得浏览器运行环境，并让浏览器运行环境能够运行。
在一个实施例中，在子应用运行环境中创建子应用运行环境所缺失的浏览器对象，包括：在子应用运行环境中，引用子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象。
为缺失的浏览器对象添加相应的对象属性，获得适配于子应用运行环境的目标浏览器对象，包括：为第二对象类型的浏览器内部对象添加自定义属性，获得适配于子应用运行环境的第二对象类型的目标浏览器对象；第二对象类型是指不能在子应用运行环境中创建的对象类型。
其中，外部对象也称为全局变量，全局变量可以是由某对象函数创建，并且。第二对象类型是指不能在子应用运行环境中创建的对象类型。第二对象类型的浏览器对象具体可以是浏览器画布对象。子应用运行环境所缺失的第二对象类型的浏览器外部对象可以母应用提供的，也可以是其他应用程序的。浏览器外部对象可以被母应用的所有对象或函数引用。浏览器内部对象又称指浏览器局部对象，是指能被浏览器内部引用的对象。自定义属性是指适配于子应用的属性。以第二对象类型的浏览器对象为浏览器画布对象为例，自定义属性可以是画布大小等。
具体地，在子应用运行环境中，终端设备引用子应用运行环境所缺失的第二对象类型的浏览器对象，基于引用的第二对象类型的浏览器外部对象创建相同对象类型的且与浏览器外部对象相对应的浏览器内部对象。即浏览器内部对象拥有浏览器外部对象的属性。终端设备为第二对象类型的浏览器内部对象添加自定义属性，获得适配于子应用运行环境的第二对象类型的目标浏览器对象。添加的自定义属性可以是添加画布大小属性值、添加画布标识等。
例如，对于浏览器画布对象，这个对象比较特殊，无法直接在子应用内创建，需要支持外部传入引用。WebGL，又称Web图形库(浏览器图形库)，它是一系列Javascript APi(Application Programming Interface，应用程序接口),主要用于在浏览器运行环境中渲染高性能的3D或2D图形。2d canvas是HTML(Hyper Text Markup Language，超级文本标记语言)基础元素的一部分，可通过脚本语言如Javascript进行动态渲染并展示图像。在通过2d canvas和WebGL canvas渲染图像时，均可以调用目标浏览器对象。
核心代码如下：
export default function Canvas(type,canvasObject)//定义一个名称为画布的方法，该方法接收2个参数，type表示画布类型，其中type有webgl/2dcanvas两种类型，canvasObject表示一个浏览器画布外部对象{
let canvas＝canvasObject//基于引用的第二对象类型的浏览器外部对象初始化一个浏览器画布内部对象
mixin(canvas)//给浏览器画布内部对象增加自定义属性
return canvas//返回处理好的画布对象，即获得适配于子应用运行环境的第二对象类型的目标浏览器对象
}
上述代码为伪代码，用于表示创建第二类型的目标浏览器对象的逻辑。
本实施例中，由于有一些浏览器运行环境中所需的对象无法直接在子应用运行环境中创建，这种对象类型称之为第二对象类型，因此需要使用外部传入引用的方式，引用第二类型的浏览器外部对象，并基于引用的第二类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象，并添加自定义属性，从而获得适配于子应用运行环境的第二类型的目标浏览器对象，能够模拟获得浏览器运行环境，并让浏览器运行环境能够运行。
在一个实施例中，第二对象类型的目标浏览器对象包括目标浏览器画布对象。将视频中的视频帧绘制在画布，包括：调用目标浏览器画布对象将视频中的视频帧绘制在画布。
调用浏览器运行环境所提供的浏览器图像渲染方式，基于画布中视频帧的像素数据进行渲染，获得视频帧画面，包括：调用目标浏览器画布对象获取画布中视频帧的像素数据；调用目标浏览器画布对象以及调用浏览器运行环境所提供的浏览器图像渲染方式，基于像素数据进行渲染，获得视频帧画面。
具体地，目标浏览器画布对象作为一个图形容器，支持通过脚本如javascript来绘制图形。终端设备调用目标浏览器画布对象将视频中的视频帧绘制在画布中。并且终端设备可调用目标浏览器画布对象获取在画布中的视频帧的像素数据，至此终端设备能够获得视频帧的像素数据。终端设备调用目标浏览器画布对象以及调用浏览器运行环境所提供的浏览器图像渲染方式，将像素数据渲染在画布中，获得视频帧画面。
以canvas对象为目标浏览器画布对象，图像渲染方式为texImage2D为例进行说明，终端设备调用canvas对象将视频中的视频帧绘制在画布中，并调用canvas对象所提供的getImageData函数获取画布中视频帧的像素数据。终端设备调用canvas对象以及调用浏览器运行环境所提供的texImage2D方式，将获得的像素数据传入texImage2D，渲染获得视频帧画面。
本实施例中，通过调用目标浏览器画布对象，能够实现在画布中渲染视频帧，从而获取到在画布中的视频帧的像素数据，从而调用浏览器运行环境所提供的浏览器图像渲染方式，基于像素数据进行渲染，得到视频帧画面，将不可编辑的视频转换为可编辑的视频帧画面，从而实现了基于子应用进行视频编辑。
在一个实施例中，在子应用运行环境中创建子应用运行环境所缺失的浏览器对象，还包括：在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型。
为浏览器对象添加相应的对象属性，获得适配于子应用运行环境的目标浏览器对象，还包括：为第三对象类型的浏览器对象添加自定义对象属性，获得适配于子应用运行环境的第三对象类型的目标浏览器对象。
其中，第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型。即第三对象类型所对应的浏览器对象无法直接在子应用运行环境中直接创建，并且需要通过第二对象类型的浏览器对象创建。第三对象类型的浏览器对象具体可以是浏览器内部对象，也可称为浏览器局部对象，是指能够在子应用运行环境中直接调用的对象。第三对象类型的浏览器对象包括但不限于图片(Image)对象。图片对象的属性包括但不限于图片对象的长度和宽度、图片名称、是否完成对图片的加载。
具体地，终端设备在成功创建第二对象类型的目标浏览器对象后，在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象。终端设备为第三对象类型的浏览器对象添加自定义对象属性，获得适配于子应用运行环境的第三对象类型的目标浏览器对象。第三对象类型的目标浏览器对象用于浏览器运行环境的构建，且第三对象的目标浏览器对象可以被调用以进行视频编辑。
以第二对象类型的浏览器对象为canvas对象、第三对象类型的浏览器对象为Image对象为例进行说明。对于Image对象，这个对象比较特殊，由于子应用运行环境内无法直接创建Image对象，需要将其与canvas对象即画布对象的createImage(创建图片对象)方法关联起来，核心代码如下：
Figure BDA0002816229710000131
Figure BDA0002816229710000141
上述代码为伪代码，用于表示创建第三类型的目标浏览器对象的逻辑。
本实施例中，由于第三对象类型无法在子应用运行环境中直接创建，并且需要通过第二对象类型的浏览器对象创建，因此在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器局部对象；为第三对象类型的浏览器局部变量添加自定义对象属性，获得适配于子应用运行环境的第三对象类型的目标浏览器对象，则能够通过创建子应用运行环境所缺失的对象以模拟获得浏览器运行环境，并让浏览器运行环境能够运行。
在一个实施例中，第三对象类型的目标浏览器对象包括目标浏览器图片对象。响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理，包括：响应于对子应用所显示的视频帧画面的特效效果或滤镜效果选取操作，调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对视频帧画面进行相应的编辑处理。
其中，特效效果包括但不限于分屏效果、动态效果。滤镜效果如白皙滤镜、清透滤镜、鲜亮滤镜、日系滤镜、薄暮滤镜、宁静滤镜、自然滤镜、晨光滤镜、冷光滤镜等。浏览器运行环境所提供的图形库着色器对象是指WebGL中的shader对象。通过调用图形库着色器对象能够实现特效以及滤镜。
具体地，终端设备响应于对子应用所显示的视频帧画面的特效效果选取操作，调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象，从而基于所选中的特效效果对视频帧画面进行特效处理。或者，终端设备响应于对子应用所显示的视频帧华民的滤镜效果选取操作，调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象，基于所选中的滤镜效果对视频帧画面添加滤镜。
以子应用为小程序、特效效果为分屏效果、目标浏览器图片对象为Image对象、浏览器运行环境所提供的图形库着色器对象为WebGL中的shader对象为例进行说明。终端设备响应于对小程序所显示的视频帧画面的选择操作，调用Image对象以及调用WebGL中的shader对象，基于分屏效果对视频帧画面进行分屏处理。
本实施例中，在视频编辑时，需要实现较多种类的视频效果如特效效果和滤镜效果，这些效果需要调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象实现，以获得编辑好的视频，增加了子应用的功能，提高视频编辑的简便性。
在一个实施例中，子应用环境适配：这是子应用运行环境内运行浏览器图形库相关代码的基石。在子应用运行环境内，很多浏览器运行环境常用的JavaScript对象以及接口缺失，因此需要在子应用运行环境内模拟适配出缺失的部分。如表1，为与子应用运行环境适配的JavaScript对象主要列表：
Figure BDA0002816229710000151
适配方法1：对于类似window、document、EventTarget、HTMLElement这种复杂对象，由于视频编辑过程中无需对这种对象进行直接操作，因此可以直接以一个空对象的方式创建，伪代码如下(以document为例)
Var document＝{}；document.style＝{}document.location＝{}...
由于document对象属性众多，在此不全部列出。
适配方法2：对于Canvas对象，这个对象比较特殊，无法直接在子应用内创建，需要支持外部传入引用。
export default function Canvas(type,canvasObject)//定义一个名称为画布的方法，该方法接收2个参数，type表示画布类型，其中有webgl/2dcanvas两种类型，canvasObject表示一个浏览器画布外部对象{
let canvas＝canvasObject//基于引用的第二对象类型的浏览器外部对象初始化一个浏览器画布内部对象
mixin(canvas)//给浏览器画布内部对象增加自定义属性
return canvas//返回处理好的画布对象，即获得适配于子应用运行环境的第二对象类型的目标浏览器对象
}
适配方法3：对于Image对象，这个对象比较特殊，由于子应用运行环境内无法直接创建Image对象，需要将其与canvas对象即画布对象的createImage(创建图片对象)方法关联起来，核心代码如下：
Figure BDA0002816229710000161
上述代码为伪代码，用于表示创建第三类型的目标浏览器对象的逻辑。
本实施例中，在子应用运行环境内，很多浏览器运行环境中常用的浏览器对象以及接口等缺失，因此需要在子应用运行环境中模拟适配出缺失的对象，并且缺失的对象可以应用在子应用运行环境中；为浏览器对象添加相应的对象属性，再加上原有的子应用运行环境，能够组成浏览器运行环境的框架，由此可在子应用运行环境中模拟浏览器运行环境，从而在子应用运行环境中实现视频编辑，增加了子应用的功能，并且提高视频编辑的简便性。
在一个实施例中，将视频中的视频帧绘制在画布，包括：将视频中的视频帧绘制在二维浏览器画布。
调用浏览器运行环境所提供的浏览器图像渲染方式，基于画布中视频帧的像素数据进行渲染，获得视频帧画面，包括：调用浏览器运行环境所提供的浏览器图像渲染方式，将二维浏览器画布中视频帧的像素数据渲染在浏览器图形库画布中，获得视频帧画面。
其中，二维浏览器画布即2d canvas。2d canvas是HTML(Hyper Text MarkupLanguage，超级文本标记语言)基础元素的一部分，可通过脚本语言如Javascript进行动态渲染并展示图像。浏览器图形库画布是指WebGL canvas。
具体地，终端设备将视频帧的视频帧绘制在二维浏览器画布。终端设备获取在二维浏览器画布中的视频帧的像素数据。终端设备调用浏览器运行环境所提供的浏览器图像渲染方式，将二维浏览器画布中视频帧的像素数据渲染在浏览器图像画布中，获得视频帧画面。
以二维浏览器画布为2d canvas、浏览器图形库画布中为WebGL canvas、图像渲染方式为texImage2D为例进行说明。终端设备将视频中的视频帧绘制在2d canvas，并获取在2d canvas中的视频帧的像素数据，调用texImage2D将像素数据渲染在WebGL canvas中，获得视频帧画面。
本实施例中，由于要实现视频编辑，需要将视频帧渲染在浏览器图像库画布中，而通过浏览器图像库画布无法直接获得像素数据，因此将视频中的视频帧绘制在二维浏览器画布中，以获得视频帧的像素数据；然后调用浏览器运行环境所提供的浏览器图像渲染方式，将该像素数据渲染在浏览器图像库画布中，使得获得的视频帧画面具有被编辑的能力，增加了子应用的功能，并且提高了视频编辑的简便性。
在一个实施例中，将视频中的视频帧绘制在二维浏览器画布，包括：通过子应用运行环境所提供的视频标签，在子应用的不可见区域渲染视频中的视频帧；将在不可见区域中渲染的视频帧绘制在二维浏览器画布。
其中，不可见区域是指用户肉眼不可见区域。不可见区域具体可以是肉眼不可见的大小的区域、可以是在屏幕可见区域外、也可以是透明区域等不限于此。通过子应用运行环境所提供的视频标签可解析视频，得到一帧帧的视频帧。肉眼不可见的大小的区域例如可以是像素点大小的区域，由于区域较小，因此用户不可见。在屏幕可见区域外可以是指在屏幕的显示区域外，例如手机屏幕的“刘海”部分、或者屏幕的边框区域等。当区域的透明度达到透明度阈值时，在该透明区域中渲染视频帧可达到用户肉眼不可见该视频帧的效果。
具体地，终端设备通过子应用运行环境所提供的视频标签，能够解析得到各个视频帧，并且在子应用的不可见区域渲染视频中的视频帧。终端设备将在不可见区域中渲染的视频帧绘制在二维浏览器画布中，以获得视频帧的像素数据。例如，以子应用为小程序、视频标签为<video>标签、不可见区域为在屏幕可见区域外、二维浏览器画布为2d canvas为例进行说明。终端设备通过小程序运行环境的<video>标签，在小程序的屏幕可见区域外渲染视频中的视频帧；将在屏幕可见区域外渲染的视频帧绘制在2d canvas。
本实施例中，子应用运行环境与浏览器运行环境的一个区别在于，在浏览器运行环境中能够直接将视频元素当作一个参数传递给图像渲染方式，而在子应用运行环境中则不允许直接将视频元素当作一个参数传递给图像渲染方式，因此需要借助子应用运行环境所提供的视频标签，在子应用中的不可见区域渲染视频中的视频帧，以获得视频源数据，并且由于要对视频进行编辑，所以原始视频暂时不需要展示；并将在不可见区域中渲染的视频帧绘制在二维浏览器画布，从而获得视频帧的像素数据，并基于像素数据实现后续的视频编辑处理。
在一个实施例中，将视频中的视频帧绘制在画布，获得视频帧的像素数据，包括：通过子应用运行环境的视频标签，在子应用的不可见区域渲染视频中的视频帧；将在不可见区域中渲染的视频帧绘制在画布，获得视频帧的像素数据。如，以子应用为小程序、视频标签为<video>标签、不可见区域为在屏幕可见区域外、画布为2d canvas为例进行说明。终端设备通过小程序运行环境所提供的<video>标签，在小程序的屏幕可见区域外渲染视频中的视频帧；将在屏幕可见区域外渲染的视频帧绘制在2d canvas，获得视频帧的像素数据。
在一个实施例中，如图3所示，为另一个实施例中基于子应用的视频处理方法的流程示意图。子应用运行环境与浏览器运行环境最大的区别在于，浏览器运行环境下可以直接把一个video元素当做参数传递给texImage2D方法，而子应用运行环境则不支持这样做，因此我们需要想别的办法。通过技术分析，可以认为视频的本质是一组连续的画面组合，因此直接渲染整个视频不行的情况下，我们思考通过快速的渲染图片，来达到同样的渲染视频效果。首先，在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，获取视频。
1.渲染视频，视频在不可见区域中。为了拿到视频的数据源以及为了对视频进行编辑，原始视频暂时不需要显示，因此终端设备可通过子应用运行环境所提供的视频标签，在子应用中的不可见区域渲染视频中的视频帧。其中，不可见区域具体可以是肉眼不可见的大小的区域、可以是在屏幕可见区域外、也可以是透明区域等不限于此。
2.渲染2d canvas，从视频获取数据：在第一步我们可以拿到视频的数据节点，因此可以将视频渲染到2d canvas上。注意，第2步的渲染仅仅能获得当前视频展示的数据，该数据可以理解为当前视频的一个静态图片(也可称为当前视频的一帧)，因此这里需要在一秒钟内执行多次(例如30次)，后面几个步骤也是如此。即，将视频中的视频帧绘制在画布。
3.获取2d canvas数据，调用getImageData拿到像素数据buffer：在第二步，我们把视频当前的一帧绘制到了2d canvas上，然后我们可以通过canvas对象的getImageData拿到当前帧的像素数据buffer。其中，buffer是指数据buffer，可认为是内存里存储的一段数据。即获取画布中的视频帧的像素数据。
4.渲染WebGL canvas，gltexImage2D渲染buffer data:这一步核心就是我们使用前面提到的texImage2D方法，将第三步获得的buffer数据传入，实现渲染当前视频帧的效果。即，调用浏览器运行环境所提供的浏览器图像渲染方式texImage2D，基于在画布中的视频帧的像素数据进行渲染，获得视频帧画面。
5.渲染滤镜/特效，使用shader处理主纹理：这一步可不对视频中的所有视频帧进行处理，如果需要视频特效的话可以运行，这一步主要是使用shader来对视频数据进行处理，添加各种静态或者动态效。即调用浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对视频帧画面进行相应的编辑处理。
本实施例中，由于子应用内置的基础运行环境跟主流的浏览器运行环境有很多不同，这导致主流的WebGL相关技术无法直接运行在子应用内；子应用内置的视频播放器跟主流浏览器的视频播放器有很大差异，无法直接获得视频帧数据，也无法直接渲染在画布中，本实施例完整模拟了主流浏览器的运行环境，使得基本的WebGL接口可以顺利运行；在针对视频播放器差异上，本方案通过一个2d canvas画布来实时获取视频的每帧数据，并可渲染到另一个canvas画布即WebGL canvas中实现视频预览，从而能够实现视频编辑。本实施例亦提供一个完整的子应用插件方案，可提供给需要视频编辑能力的客户，客户可在自己的子应用内集成并简单配置该插件，即可快速在自己的子应用内实现视频编辑能力。
在一个实施例中，响应于对子应用所显示的视频帧画面的编辑操作，对视频帧进行编辑处理，包括：响应于对子应用所显示的视频帧画面的编辑操作，显示候选视频编辑效果；响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理。
其中，候选视频编辑效果是指在终端设备上显示的暂未被用户选中的视频编辑效果。对视频帧画面的编辑操作具体可以包括但不限于视频裁切、视频滤镜添加、视频特效添加、视频音乐添加、视频文字添加中至少一种。还可以进行视频录制、视频合成导出等。视频裁切可以是保留视频帧的至少一部分画面，也可以是保留视频的一部分视频帧等。
具体地，终端设备响应于对子应用所显示的视频帧画面的编辑操作，显示候选视频编辑效果；并响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理，获得编辑后的视频。终端设备还可以响应于对编辑后的视频的导出操作，导出编辑后的视频并保存。或者，终端设备还可以响应于对编辑后的视频的导出操作，导出编辑后的视频并上传至母应用。
如图4所示，为一个实施例中用于视频编辑的界面示意图。其中包括视频帧画面402、音乐添加控件404、滤镜添加控件406、特效添加控件408以及文字添加控件410。其中，触发音乐添加控件404即触发音乐添加操作，触发滤镜添加控件406即触发滤镜添加操作，触发特效添加控件408即触发特效添加操作，触发文字添加控件410即触发文字添加操作。通过触发“下一步”控件即可进行进一步的编辑操作。
以编辑操作为音乐添加操作、候选视频编辑效果为候选音乐AAA和候选音乐BBB、选中的视频编辑效果为添加AAA歌曲、编辑处理为添加音乐为例进行说明。响应于对子应用所显示的视频帧画面的视频音乐添加操作，显示候选音乐；响应于对候选视频音乐的选择操作，按照所选中的AAA歌曲对视频帧画面进行音乐添加处理。
以编辑操作为视频特效添加操作、候选视频编辑效果为分屏效果和动感效果和梦幻效果、选中的视频编辑效果为四屏效果、编辑处理为四屏显示为例进行说明。响应于对子应用所显示的视频帧画面的视频特效添加操作，终端设备显示候选视频编辑效果：分屏效果、动感效果和梦幻效果。终端设备响应于对分屏效果的选择操作，显示两屏效果、三屏效果、四屏效果和六屏效果；响应于对四屏效果的选择操作，按照四屏效果对视频帧画面进行四屏显示。
响应于触控图4中滤镜添加控件406所触发的滤镜添加操作，显示如图5所示的候选滤镜效果。图5为一个实施例中显示候选滤镜效果的界面示意图。图5中包括无滤镜效果、鲜亮滤镜效果、白皙滤镜效果和清透滤镜效果。响应于对候选滤镜效果的选择操作，选中“白皙滤镜效果”，终端设备按照“白皙滤镜效果”对视频帧画面进行编辑处理。
图6为一个实施例中视频文字添加的界面示意图。响应于对文字添加控件410的触发操作，显示文字输入区域602；获取在文字输入区域602所输入的文字“我爱聊天”，在视频上显示所输入的文字“我爱聊天”。所输入的文字的字体大小、字体样式、字体尺寸均可根据需要设置。并且文字显示位置也可根据需要设置。
本实施例中，在模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，并调用浏览器运行环境所提供的浏览器图像渲染方式，基于画布中视频帧的像素数据进行渲染，获得视频帧画面，此时的子应用具有对该视频帧进行编辑的能力，因此可响应于对子应用所显示的视频帧画面的编辑操作，显示候选视频编辑效果，那么用户可从候选视频编辑效果中选择想要的效果，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理，获得编辑后的视频，即实现了在子应用中进行视频编辑。
在一个实施例中，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理，包括：
响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频。
其中，触发时长是指对所选中的视频编辑效果的触发时间长度。例如触发时长可以是1秒、2秒、3秒等不限于此。与触发时长相应的至少一部分视频帧画面具体可以是与触发时长的时长相同的部分视频帧画面、也可以是与触发时长呈比例的时长的部分视频帧画面等。
具体地，终端设备响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与触发时长相应的视频的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频。例如，当触发时长为1秒时，与触发时长的时长相同的部分视频帧画面为1秒的视频帧画面。当触发时长为1秒时，与触发时长的时长呈1：5的时长的部分视频帧画面为5秒的视频帧画面。
在一个实施例中，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对从当前视频起始点开始的且与触发时长相应的至少一部分视频帧画面进行编辑处理；将该至少一部分视频帧画面所对应的最后一个视频帧作为当前视频起始点，返回执行响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对从当前视频起始点开始的且与触发时长相应的至少一部分视频帧画面进行编辑处理的操作，直至当当前视频起始点为该视频的最后一帧，获得编辑处理后的视频。
例如，如图7所示，为一个实施例中显示候选特效效果的界面示意图。其中包括梦幻特效、动感特效和分屏特效，分屏特效中包括两屏特效、三屏特效、四屏特效和六瓶特效。其中包括采用第一特效效果处理后的第一部分视频帧画面702、采用第二特效效果处理后的第二部分视频帧画面704、采用第三特效效果处理后的第三部分视频帧画面706以及当前视频起始点708。以选中的视频编辑效果为分屏中的四屏为例，用户触控第一特效效果2秒钟，那么终端设备对从视频起始帧开始对2秒钟的视频帧画面进行第一特效处理，那么得到第一特效效果处理后的第一部分视频帧画面702。702后的视频帧画面暂未进行视频编辑。用户可触控第二特效效果1秒钟，那么终端设备将702中的最后一帧作为起始帧，对702中的最后一帧之后的1秒内的视频进行第二特效处理，获得第二特效效果处理后的第二部分视频帧画面704。同样地，用户可触控第三特效效果如四屏特效1秒钟，那么终端设备将704的最后一帧的作为起始帧，对704的最后一帧进行第三特效效果处理，获得第三特效效果处理后的第三部分视频帧画面706。此时视频起始点708为706的最后一帧。视频帧画面702、视频帧画面704、视频帧画面706均为经过编辑处理后的视频帧画面，视频中其余视频帧可不进行操作。响应于确认操作，即图中的“√”控件，获得编辑处理后的视频。
如图8所示，为一个实施例中编辑后的视频导出的界面示意图。其中包括标题和描述，用户可在“请输入视频标题”处输入视频标题，可在“请输入视频描述”处输入视频描述。响应于对“保存并发布”控件的触发操作，终端设备将编辑后的视频导出并保存到本地，并且将编辑后的视频发布至母应用中。或者，终端设备将编辑后的视频导出并保存到本地，并且将所输入的视频标题以及编辑后的视频发布至母应用中。或者，终端设备将编辑后的视频导出并保存到本地，并且将所输入的视频描述以及编辑后的视频发布至母应用中。或者，终端设备将编辑后的视频导出并保存到本地，并且将所输入的视频标题、视频描述以及编辑后的视频发布至母应用中。
本实施例中，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频，则能够对至少一部分视频帧画面进行编辑处理，可不对视频中的所有视频帧进行编辑处理，也同时能够为一个视频帧的不同视频片段添加不同的视频编辑效果，提高用户体验从而提高子应用以及母应用的用户留存率。
在一个实施例中，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理，包括：响应于对子应用所显示的至少一部分视频帧画面的选择操作，显示与所选中的至少一部分视频帧画面相对应的候选视频编辑效果；响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果，对所选中的至少一部分视频帧进行编辑处理。通过上述操作能够仅对一部分视频帧进行编辑处理，得到编辑处理后的视频。
在一个实施例中，一种基于子应用的视频处理方法，包括以下步骤：
步骤(a1)，在子应用运行环境中，将子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；第一对象类型为在视频编辑时不直接进行操作的对象类型。
步骤(a2)，为空对象添加相应的对象属性，获得适配于子应用运行环境的第一对象类型的目标浏览器对象。
步骤(a3)，在子应用运行环境中，引用子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象。
步骤(a4)，为第二对象类型的浏览器内部对象添加自定义属性，获得适配于子应用运行环境的第二对象类型的目标浏览器对象。第二对象类型是指不能在子应用运行环境中创建的对象类型。
步骤(a5)，在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型。
步骤(a6)，为第三对象类型的浏览器对象添加自定义对象属性，获得适配于子应用运行环境的第三对象类型的目标浏览器对象。
步骤(a7)，基于目标浏览器对象以及子应用运行环境组成模拟的浏览器运行环境，目标浏览器对象包括第一对象类型的目标浏览器对象、第二对象类型的目标浏览器对象和第三对象类型的目标浏览器对象。
步骤(a8)，在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，调用目标浏览器画布对象通过子应用运行环境所提供的视频标签，在子应用的不可见区域渲染视频中的视频帧。
步骤(a9)，将在不可见区域中渲染的视频帧绘制在二维浏览器画布，获得视频帧的像素数据。
步骤(a10)，调用目标浏览器画布对象获取二维浏览器画布中视频帧的像素数据。
步骤(a11)，调用浏览器运行环境所提供的浏览器图像渲染方式，将二维浏览器画布中视频帧的像素数据渲染在浏览器图形库画布中，获得视频帧画面。
步骤(a12)，在运行于子应用运行环境的子应用中显示视频帧画面。
步骤(a13)，响应于对子应用所显示的视频帧画面的特效效果或滤镜效果选取操作，调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对视频帧画面进行相应的编辑处理。
应该理解的是，虽然上述各个步骤按照数字的指示依次显示，但是这些步骤并不是必然按照数字指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，上述至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
本实施例中基于子应用的视频编辑方法，子应用运行环境和原生的浏览器运行环境有很大的不同，主流的视频编辑相关的技术无法直接运行在子应用内。子应用运行环境与浏览器运行环境的一个区别在于，在浏览器运行环境中能够直接将视频元素当作一个参数传递给图像渲染方式，而在子应用运行环境中则不允许直接将视频元素当作一个参数传递给图像渲染方式；考虑到视频的本质是一组连续的画面组合，那么在不能直接渲染视频的情况下，可通过渲染视频帧来达到渲染视频的效果，因此基于子应用运行环境模拟浏览器运行环境，在模拟的浏览器运行环境下，将视频的视频帧绘制在二维浏览器画布上；并且由于子应用运行环境中也无法直接获取到视频数据，因此通过绘制在二维浏览器画布中的视频帧获取到视频帧的像素数据，从而获取到了视频帧的数据；进而能够调用浏览器运行环境所提供的图像渲染方式，基于像素数据进行渲染，获得视频帧画面，在运行于子应用运行环境的子应用中显示视频帧画面，即此时显示的是一个能被编辑的视频帧画面；响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理，则实现了在子应用中的视频编辑处理，增加了子应用的功能，并且由于子应用的使用频次高，因此还可以提高视频编辑的简便性。
本申请还提供一种应用场景，该应用场景应用上述的基于子应用的视频处理方法。具体地，以母应用为微信、子应用为小程序、图像渲染方式为texImage2D、画布包括2dcanvas和WebGL canvas、第二对象类型的浏览器对象为canvas对象、第三对象类型的浏览器对象为Image对象为例进行说明，该基于子应用的视频处理方法在该应用场景的应用如下：
在小程序运行环境中，将小程序运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；第一对象类型为在视频编辑时不直接进行操作的对象类型。为空对象添加相应的对象属性，获得适配于小程序运行环境的第一对象类型的目标浏览器对象。在小程序运行环境中，引用小程序运行环境所缺失的浏览器canvas外部对象，基于引用的浏览器canvas外部对象创建对应的浏览器canvas内部对象。为浏览器canvas内部对象添加自定义属性，获得适配于小程序运行环境的目标浏览器canvas对象。在小程序运行环境中通过目标浏览器canvas对象创建浏览器Image对象。为浏览器Image对象添加自定义对象属性，获得适配于小程序运行环境的目标浏览器Image对象。在由微信应用提供的小程序运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在2d canvas，获得视频帧的像素数据。调用浏览器运行环境所提供的texImage2D，基于2d canvas中视频帧的像素数据进行渲染，获得视频帧画面。在运行于小程序运行环境的小程序中显示视频帧画面。响应于对小程序所显示的视频帧画面的编辑操作，显示候选视频编辑效果。响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理。采用本实施例的方式可以在微信小程序中适配WebGL运行环境，并通过Javascript对视频进行编辑以及预览，最终可导出一个完整的编辑后的视频文件。
应该理解的是，虽然图1和2的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1和2中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中，如图9所示，提供了一种基于子应用的视频处理装置，该装置可以采用软件模块或硬件模块，或者是二者的结合成为计算机设备的一部分，该装置具体包括：绘制模块902、渲染模块904、显示模块906和编辑模块908，其中：
绘制模块902，用于在由母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，获得视频帧的像素数据；
渲染模块904，用于调用浏览器运行环境所提供的浏览器图像渲染方式，基于画布中视频帧的像素数据进行渲染，获得视频帧画面；
显示模块906，用于在运行于子应用运行环境的子应用中显示视频帧画面；
编辑模块908，用于响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理。
本实施例中基于子应用的视频编辑装置，子应用运行环境和原生的浏览器运行环境有很大的不同，主流的视频编辑相关的技术无法直接运行在子应用内。子应用运行环境与浏览器运行环境的一个区别在于，在浏览器运行环境中能够直接将视频元素当作一个参数传递给图像渲染方式，而在子应用运行环境中则不允许直接将视频元素当作一个参数传递给图像渲染方式；考虑到视频的本质是一组连续的画面组合，那么在不能直接渲染视频的情况下，可通过渲染视频帧来达到渲染视频的效果，因此基于子应用运行环境模拟浏览器运行环境，在模拟的浏览器运行环境下，将视频的视频帧绘制在画布上；并且由于子应用运行环境中也无法直接获取到像素数据，因此通过绘制在画布中的视频帧获取到视频帧的像素数据；进而能够调用浏览器运行环境所提供的图像渲染方式，基于像素数据进行渲染，获得视频帧画面，在运行于子应用运行环境的子应用中显示视频帧画面，即此时显示的是一个能被编辑的视频帧画面；响应于对子应用所显示的视频帧画面的编辑操作，对视频帧画面进行编辑处理，则实现了在子应用中的视频编辑处理，增加了子应用的功能，并且由于子应用的使用频次高，因此还可以提高视频编辑的简便性。
在一个实施例中，该基于子应用的视频处理装置还包括创建模块。创建模块用于在子应用运行环境中创建子应用运行环境所缺失的浏览器对象；为缺失的浏览器对象添加相应的对象属性，获得适配于子应用运行环境的目标浏览器对象；基于目标浏览器对象以及子应用运行环境组成模拟的浏览器运行环境。
本实施例中，在子应用运行环境内，很多浏览器运行环境中常用的浏览器对象以及接口等缺失，因此需要在子应用运行环境中模拟适配出缺失的对象，并且缺失的对象可以应用在子应用运行环境中；为浏览器对象添加相应的对象属性，再加上原有的子应用运行环境，能够组成浏览器运行环境的框架，由此可在子应用运行环境中模拟浏览器运行环境，从而在子应用运行环境中实现视频编辑，增加了子应用的功能，并且提高视频编辑的简便性。
在一个实施例中，创建模块用于在子应用运行环境中，将子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；第一对象类型为在视频编辑时不直接进行操作的对象类型；为空对象添加相应的对象属性，获得适配于子应用运行环境的第一对象类型的目标浏览器对象。
本实施例中，在浏览器运行环境中，有一些对象是视频编辑过程中无需直接进行操作的对象，称之为第一对象类型的浏览器对象，那么可以将子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象，并为第一对象类型的浏览器对象添加对象属性，从而模拟获得浏览器运行环境，并让浏览器运行环境能够运行。
在一个实施例中，创建模块用于在子应用运行环境中，引用子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象；为第二对象类型的浏览器内部对象添加自定义属性，获得适配于子应用运行环境的第二对象类型的目标浏览器对象；第二对象类型是指不能在子应用运行环境中创建的对象类型。
本实施例中，由于有一些浏览器运行环境中所需的对象无法直接在子应用运行环境中创建，这种对象类型称之为第二对象类型，因此需要使用外部传入引用的方式，引用第二类型的浏览器外部对象，并基于引用的第二类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象，并添加自定义属性，从而获得适配于子应用运行环境的第二类型的目标浏览器对象，能够模拟获得浏览器运行环境，并让浏览器运行环境能够运行。
在一个实施例中，第二对象类型的目标浏览器对象包括目标浏览器画布对象。绘制模块902用于调用目标浏览器画布对象将视频中的视频帧绘制在画布。渲染模块904用于调用目标浏览器画布对象获取画布中视频帧的像素数据；调用目标浏览器画布对象以及调用浏览器运行环境所提供的浏览器图像渲染方式，基于像素数据进行渲染，获得视频帧画面。
本实施例中，通过调用目标浏览器画布对象，能够实现在画布中渲染视频帧，从而获取到在画布中的视频帧的像素数据，从而调用浏览器运行环境所提供的浏览器图像渲染方式，基于像素数据进行渲染，得到视频帧画面，将不可编辑的视频转换为可编辑的视频帧画面，从而实现了基于子应用进行视频编辑。
在一个实施例中，创建模块还用于在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型；为第三对象类型的浏览器对象添加自定义对象属性，获得适配于子应用运行环境的第三对象类型的目标浏览器对象。
本实施例中，由于第三对象类型无法在子应用运行环境中直接创建，并且需要通过第二对象类型的浏览器对象创建，因此在子应用运行环境中通过第二对象类型的目标浏览器对象创建第三对象类型的浏览器局部对象；为第三对象类型的浏览器局部变量添加自定义对象属性，获得适配于子应用运行环境的第三对象类型的目标浏览器对象，则能够通过创建子应用运行环境所缺失的对象以模拟获得浏览器运行环境，并让浏览器运行环境能够运行。
在一个实施例中，第三对象类型的目标浏览器对象包括目标浏览器图片对象。编辑模块908用于响应于对子应用所显示的视频帧画面的特效效果或滤镜效果选取操作，调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对视频帧画面进行相应的编辑处理。
本实施例中，在视频编辑时，需要实现较多种类的视频效果如特效效果和滤镜效果，这些效果需要调用目标浏览器图片对象以及调用浏览器运行环境所提供的图形库着色器对象实现，以获得编辑好的视频，增加了子应用的功能，提高视频编辑的简便性。
在一个实施例中，绘制模块902用于将视频中的视频帧绘制在二维浏览器画布。渲染模块904用于调用浏览器运行环境所提供的浏览器图像渲染方式，将二维浏览器画布中视频帧的像素数据渲染在浏览器图形库画布中，获得视频帧画面。
本实施例中，由于要实现视频编辑，需要将视频帧渲染在浏览器图像库画布中，而通过浏览器图像库画布无法直接获得像素数据，因此将视频中的视频帧绘制在二维浏览器画布中，以获得视频帧的像素数据；然后调用浏览器运行环境所提供的浏览器图像渲染方式，将该像素数据渲染在浏览器图像库画布中，使得获得的视频帧画面具有被编辑的能力，增加了子应用的功能，并且提高了视频编辑的简便性。
在一个实施例中，绘制模块902用于通过子应用运行环境所提供的视频标签，在子应用的不可见区域渲染视频中的视频帧；将在不可见区域中渲染的视频帧绘制在二维浏览器画布。
本实施例中，子应用运行环境与浏览器运行环境的一个区别在于，在浏览器运行环境中能够直接将视频元素当作一个参数传递给图像渲染方式，而在子应用运行环境中则不允许直接将视频元素当作一个参数传递给图像渲染方式，因此需要借助子应用运行环境所提供的视频标签，在子应用中的不可见区域渲染视频中的视频帧，以获得视频源数据，并且由于要对视频进行编辑，所以原始视频暂时不需要展示；并将在不可见区域中渲染的视频帧绘制在二维浏览器画布，从而获得视频帧的像素数据，并基于像素数据实现后续的视频编辑处理。
在一个实施例中，编辑模块908用于响应于对子应用所显示的视频帧画面的编辑操作，显示候选视频编辑效果；响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理。
本实施例中，在模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，并调用浏览器运行环境所提供的浏览器图像渲染方式，基于画布中视频帧的像素数据进行渲染，获得视频帧画面，此时的子应用具有对该视频帧进行编辑的能力，因此可响应于对子应用所显示的视频帧画面的编辑操作，显示候选视频编辑效果，那么用户可从候选视频编辑效果中选择想要的效果，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果对视频帧画面进行编辑处理，获得编辑后的视频，即实现了在子应用中进行视频编辑。
在一个实施例中，编辑模块908用于响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频。
本实施例中，响应于对候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频，则能够对至少一部分视频帧画面进行编辑处理，可不对视频中的所有视频帧进行编辑处理，也同时能够为一个视频帧的不同视频片段添加不同的视频编辑效果，提高用户体验从而提高子应用以及母应用的用户留存率。
关于基于子应用的视频处理装置的具体限定可以参见上文中对于基于子应用的视频处理方法的限定，在此不再赘述。上述基于子应用的视频处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端设备，其内部结构图可以如图10所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种基于子应用的视频处理方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图10中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
在一个实施例中，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各方法实施例中的步骤。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (24)

1.一种基于子应用的视频处理方法，其特征在于，所述方法包括：
在由母应用提供的子应用运行环境中，将所述子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；所述第一对象类型为在视频编辑时不直接进行操作的对象类型；
为所述空对象添加相应的对象属性，获得适配于所述子应用运行环境的第一对象类型的目标浏览器对象；
基于所述目标浏览器对象以及所述子应用运行环境组成模拟的浏览器运行环境；
在由所述母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布，获得所述视频帧的像素数据；
调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面；
在运行于所述子应用运行环境的子应用中显示所述视频帧画面；
响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理。
2.根据权利要求1所述的方法，其特征在于，所述第一对象类型的浏览器对象是视频编辑过程中无需直接进行操作的对象。
3.根据权利要求2所述的方法，其特征在于，所述视频为当前通过本地的摄像头录制的视频，或者本地存储的已录制的视频，或者其他设备传输的视频。
4.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在所述子应用运行环境中，引用所述子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象；
为所述第二对象类型的浏览器内部对象添加自定义属性，获得适配于所述子应用运行环境的第二对象类型的目标浏览器对象；所述第二对象类型是指不能在所述子应用运行环境中创建的对象类型。
5.根据权利要求4所述的方法，其特征在于，所述第二对象类型的目标浏览器对象包括目标浏览器画布对象；
所述将视频中的视频帧绘制在画布，包括：
调用所述目标浏览器画布对象将所述视频中的视频帧绘制在画布；
所述调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面，包括：
调用所述目标浏览器画布对象获取所述画布中视频帧的像素数据；
调用目标浏览器画布对象以及调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述像素数据进行渲染，获得视频帧画面。
6.根据权利要求4所述的方法，其特征在于，所述方法还包括：
在所述子应用运行环境中通过所述第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；所述第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型；
为所述第三对象类型的浏览器对象添加自定义对象属性，获得适配于所述子应用运行环境的第三对象类型的目标浏览器对象。
7.根据权利要求6所述的方法，其特征在于，所述第三对象类型的目标浏览器对象包括目标浏览器图片对象；
所述响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理，包括：
响应于对所述子应用所显示的所述视频帧画面的特效效果或滤镜效果选取操作，调用所述目标浏览器图片对象以及调用所述浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对所述视频帧画面进行相应的编辑处理。
8.根据权利要求1至7任一项所述的方法，其特征在于，所述将视频中的视频帧绘制在画布，包括：
将所述视频中的视频帧绘制在二维浏览器画布；
所述调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面，包括：
调用所述浏览器运行环境所提供的浏览器图像渲染方式，将所述二维浏览器画布中视频帧的像素数据渲染在浏览器图形库画布中，获得视频帧画面。
9.根据权利要求8所述的方法，其特征在于，所述将所述视频中的视频帧绘制在二维浏览器画布，包括：
通过所述子应用运行环境所提供的视频标签，在所述子应用的不可见区域渲染所述视频中的视频帧；
将在所述不可见区域中渲染的视频帧绘制在二维浏览器画布。
10.根据权利要求1所述的方法，其特征在于，所述响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理，包括：
响应于对所述子应用所显示的所述视频帧画面的编辑操作，显示候选视频编辑效果；
响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果对所述视频帧画面进行编辑处理。
11.根据权利要求10所述的方法，其特征在于，所述响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果对所述视频帧画面进行编辑处理，包括：
响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与所述触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频。
12.一种基于子应用的视频处理装置，其特征在于，所述装置包括：
创建模块，在由母应用提供的子应用运行环境中，将所述子应用运行环境中所缺失的第一对象类型的浏览器对象创建为空对象；所述第一对象类型为在视频编辑时不直接进行操作的对象类型；为所述空对象添加相应的对象属性，获得适配于所述子应用运行环境的第一对象类型的目标浏览器对象；基于所述目标浏览器对象以及所述子应用运行环境组成模拟的浏览器运行环境；
绘制模块，用于在由所述母应用提供的子应用运行环境所模拟的浏览器运行环境中，将视频中的视频帧绘制在画布；
渲染模块，用于调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面；
显示模块，用于在运行于所述子应用运行环境的子应用中显示所述视频帧画面；
编辑模块，用于响应于对所述子应用所显示的所述视频帧画面的编辑操作，对所述视频帧画面进行编辑处理。
13.根据权利要求12所述的装置，其特征在于，所述第一对象类型的浏览器对象是视频编辑过程中无需直接进行操作的对象。
14.根据权利要求12所述的装置，其特征在于，所述视频为当前通过本地的摄像头录制的视频，或者本地存储的已录制的视频，或者其他设备传输的视频。
15.根据权利要求12所述的装置，其特征在于，所述创建模块，还用于：
在所述子应用运行环境中，引用所述子应用运行环境所缺失的第二对象类型的浏览器外部对象，基于引用的第二对象类型的浏览器外部对象创建对应的第二对象类型的浏览器内部对象；
为所述第二对象类型的浏览器内部对象添加自定义属性，获得适配于所述子应用运行环境的第二对象类型的目标浏览器对象；所述第二对象类型是指不能在所述子应用运行环境中创建的对象类型。
16.根据权利要求15所述的装置，其特征在于，所述第二对象类型的目标浏览器对象包括目标浏览器画布对象；
所述绘制模块，还用于：
调用所述目标浏览器画布对象将所述视频中的视频帧绘制在画布；
所述渲染模块，还用于：
调用所述目标浏览器画布对象获取所述画布中视频帧的像素数据；
调用目标浏览器画布对象以及调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述像素数据进行渲染，获得视频帧画面。
17.根据权利要求15所述的装置，其特征在于，所述创建模块，还用于：
在所述子应用运行环境中通过所述第二对象类型的目标浏览器对象创建第三对象类型的浏览器对象；所述第三对象类型是指基于第二对象类型的浏览器对象创建的对象类型；
为所述第三对象类型的浏览器对象添加自定义对象属性，获得适配于所述子应用运行环境的第三对象类型的目标浏览器对象。
18.根据权利要求17所述的装置，其特征在于，所述第三对象类型的目标浏览器对象包括目标浏览器图片对象；
所述编辑模块，还用于：
响应于对所述子应用所显示的所述视频帧画面的特效效果或滤镜效果选取操作，调用所述目标浏览器图片对象以及调用所述浏览器运行环境所提供的图形库着色器对象，基于所选中的特效效果或滤镜效果对所述视频帧画面进行相应的编辑处理。
19.根据权利要求12至18任一项所述的装置，其特征在于，所述绘制模块，还用于：
将所述视频中的视频帧绘制在二维浏览器画布；
所述调用所述浏览器运行环境所提供的浏览器图像渲染方式，基于所述画布中视频帧的像素数据进行渲染，获得视频帧画面，包括：
调用所述浏览器运行环境所提供的浏览器图像渲染方式，将所述二维浏览器画布中视频帧的像素数据渲染在浏览器图形库画布中，获得视频帧画面。
20.根据权利要求19所述的装置，其特征在于，所述绘制模块，还用于：
通过所述子应用运行环境所提供的视频标签，在所述子应用的不可见区域渲染所述视频中的视频帧；
将在所述不可见区域中渲染的视频帧绘制在二维浏览器画布。
21.根据权利要求12所述的装置，其特征在于，所述编辑模块，还用于：
响应于对所述子应用所显示的所述视频帧画面的编辑操作，显示候选视频编辑效果；
响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果对所述视频帧画面进行编辑处理。
22.根据权利要求21所述的装置，其特征在于，所述编辑模块，还用于：
响应于对所述候选视频编辑效果的选择操作，按照所选中的视频编辑效果所对应的触发时长，对与所述触发时长相应的至少一部分视频帧画面进行编辑处理，获得编辑处理后的视频。
23.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至11中任一项所述的方法的步骤。
24.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至11中任一项所述的方法的步骤。
CN202011398448.5A 2020-12-04 2020-12-04 基于子应用的视频处理方法、装置和计算机设备 Active CN113411664B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011398448.5A CN113411664B (zh) 2020-12-04 2020-12-04 基于子应用的视频处理方法、装置和计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011398448.5A CN113411664B (zh) 2020-12-04 2020-12-04 基于子应用的视频处理方法、装置和计算机设备

Publications (2)

Publication Number Publication Date
CN113411664A CN113411664A (zh) 2021-09-17
CN113411664B true CN113411664B (zh) 2023-05-12

Family

ID=77677558

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011398448.5A Active CN113411664B (zh) 2020-12-04 2020-12-04 基于子应用的视频处理方法、装置和计算机设备

Country Status (1)

Country Link
CN (1) CN113411664B (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113938619A (zh) * 2021-10-28 2022-01-14 稿定（厦门）科技有限公司 一种基于浏览器的视频合成方法、系统、储存装置
CN116095413B (zh) * 2022-05-30 2023-11-07 荣耀终端有限公司 视频处理方法及电子设备
CN117915020A (zh) * 2022-05-30 2024-04-19 荣耀终端有限公司 用于视频裁剪的方法和装置
CN117857719A (zh) * 2022-09-30 2024-04-09 北京字跳网络技术有限公司 视频素材剪辑方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1182841A2 (de) * 2000-08-23 2002-02-27 Deutsche Telekom AG Verfahren zum Plattformunabhängigen Streaming von Multimedia-Inhalten für IP-basierte Netze
CN102752493A (zh) * 2011-09-29 2012-10-24 新奥特（北京）视频技术有限公司 一种特效时间线加载流程图的剪辑编辑方法
CN106598655A (zh) * 2016-12-05 2017-04-26 腾讯科技（深圳）有限公司 应用程序页面处理方法和装置
CN110989878A (zh) * 2019-11-01 2020-04-10 百度在线网络技术（北京）有限公司 小程序中的动画展示方法、装置、电子设备及存储介质

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090064005A1 (en) * 2007-08-29 2009-03-05 Yahoo! Inc. In-place upload and editing application for editing media assets
US8639086B2 (en) * 2009-01-06 2014-01-28 Adobe Systems Incorporated Rendering of video based on overlaying of bitmapped images
US20140047413A1 (en) * 2012-08-09 2014-02-13 Modit, Inc. Developing, Modifying, and Using Applications

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1182841A2 (de) * 2000-08-23 2002-02-27 Deutsche Telekom AG Verfahren zum Plattformunabhängigen Streaming von Multimedia-Inhalten für IP-basierte Netze
CN102752493A (zh) * 2011-09-29 2012-10-24 新奥特（北京）视频技术有限公司 一种特效时间线加载流程图的剪辑编辑方法
CN106598655A (zh) * 2016-12-05 2017-04-26 腾讯科技（深圳）有限公司 应用程序页面处理方法和装置
CN110989878A (zh) * 2019-11-01 2020-04-10 百度在线网络技术（北京）有限公司 小程序中的动画展示方法、装置、电子设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
如何在小程序上实现视频剪辑;腾讯微剪;《https://developers.weixin.qq.com/community/develop/article/doc/0002e88ced8c109711ba6045a56c13》;正文第1-2页 *

Also Published As

Publication number Publication date
CN113411664A (zh) 2021-09-17

Similar Documents

Publication Publication Date Title
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
TWI776066B (zh) 圖片生成方法、裝置、終端、伺服器及儲存媒體
TWI808393B (zh) 頁面處理方法、裝置、設備及儲存媒體
CN107832108B (zh) 3D canvas网页元素的渲染方法、装置及电子设备
CN108959392B (zh) 在3d模型上展示富文本的方法、装置及设备
US20100329642A1 (en) Dynamic Icons Associated with Remote Content
WO2016200448A1 (en) Generating layout for content presentation structures
US20150248722A1 (en) Web based interactive multimedia system
JP2014524623A (ja) テンプレートファイルの処理方法及び装置
CN112307403B (zh) 页面渲染方法、装置、存储介质以及终端
US20230325989A1 (en) Image processing method, apparatus, and device, storage medium, and computer program product
CN111949908A (zh) 媒体信息的处理方法、装置、电子设备及存储介质
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
CN108134906A (zh) 图像处理方法及其系统
CN113744377A (zh) 一种动画处理系统、方法、装置、设备及介质
CN116437153A (zh) 虚拟模型的预览方法、装置、电子设备及存储介质
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN112417345B (zh) 渲染方法、装置、电子设备及存储介质
CN114747228A (zh) 图像纪念物生成
CN112037341A (zh) 基于Web前端处理VR全景交互功能的方法及装置
WO2023169089A1 (zh) 一种视频播放方法、装置、电子设备、介质和程序产品
CN117014689A (zh) 弹幕的显示方法、装置以及电子设备
Korhonen et al. Creating Mashups with Adobe Flex and AIR
CN117290628A (zh) 一种表单控件的统一定义方法及电子设备
CN118733032A (zh) 一种嵌套应用程序开发的方法、系统、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 40052355

Country of ref document: HK

SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant