# UniappScreenCapture

**Repository Path**: scenario-samples/uniapp-screen-capture

## Basic Information

- **Project Name**: UniappScreenCapture
- **Description**: 在uni-app开发HarmonyOS应用的过程中，通常可以搜到各种功能的实现方案。本示例将以屏幕录制功能为例，将HarmonyOS示例代码的功能移植到uni-app。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2026-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 将屏幕录制功能移植到uni-app示例

## 场景介绍
在uni-app开发HarmonyOS应用的过程中，通常可以搜到各种功能的实现方案。本示例将以屏幕录制功能为例，将HarmonyOS示例代码的功能移植到uni-app。

### 效果预览

<img src="screenshots/output.gif" width="320">
<img src="screenshots/output_1.gif" width="320">

### 使用说明
点击录制按钮，会向用户发起权限申请。用户同意后将会开启屏幕录制，期间可以退出到后台进行录制。然后点击结束录制或者点击屏幕顶部胶囊的停止按钮会停止视频录制。录制完成后页面会进行刷新，显示录制完成的文件路径，点击播放按钮，会跳转播放页面播放录制好的视频文件。


## 实现思路
<br>

**迁移前后工程映射。**<br>
<img src="screenshots/img.png" width="200">

<br>

**本示例涉及知识点**

| 知识点 | 说明 | 备注 | 
| - | - | - | 
| [调用ArkTS API](https://uniapp.dcloud.net.cn/tutorial/harmony/native-api.html) | 利用uts语法操作ArkTS API，并封装成一个uni_modules插件，供前端调用。 | 本示例的三个uts插件，都调用了ArkTS API。 | 
| 源码依赖 | 1.将依赖模块直接导入[harmony-configs目录](https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#config-dir)，<br>2.在harmony-configs目录的oh-package.json5文件中添加源码依赖，同时在build-profile.json5文件中引入模块 | 从本示例的依赖模块移植步骤中，介绍了如何导入源码依赖。 | 
| [申请权限](https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#%E9%80%9A%E8%BF%87-uts-%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE%E9%B8%BF%E8%92%99%E6%9D%83%E9%99%90) | 1.在uts插件的module.json5文件中可以声明权限。<br>2.[UTSHarmony.requestSystemPermission](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#requestsystempermission-permissions-success-fail)方法可以申请权限。 | 本示例在插件hongmeng-lifecycle中完成了声明和申请权限。 | 
| [生命周期注册](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle) | 在插件hongmeng-lifecycle中注册了[UTSHarmony.onAppAbilityWindowStageCreate](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#onappabilitywindowstagecreate)生命周期，在生命周期中执行了参数初始化和权限申请 | 触发时机同[UIAbility.onWindowStageCreate](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/uiability-lifecycle#onwindowstagecreate)  | 


**一、屏幕录制涉及到三项功能：长时任务、权限申请与参数初始化、屏幕录制。根据这三项功能分别创建uni-app侧的三个插件。**

| 插件名 | 插件实现功能 | 说明 |
| - | - | - |
| hongmeng-continuoustask | 桥接ArkTS侧的[长时任务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/continuous-task)功能，提供开始/结束长时任务的方法。 | / |
| hongmeng-lifecycle | 插件桥接ArkTS侧权限申请与参数初始化功能，本示例需要申请[麦克风权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user#ohospermissionmicrophone)和[后台持续运行权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all#ohospermissionkeep_background_running)。 | 函数[UTSHarmony.onAppAbilityWindowStageCreate](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#onappabilitywindowstagecreate)的触发时机同[UIAbility.onWindowStageCreate](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/uiability-lifecycle#onwindowstagecreate) |
| hongmeng-screencapture | 桥接ArkTS侧[屏幕录制](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/using-avscreencapture-arkts)功能，提供开始/结束录制的方法。 | / |

**二、[依赖模块](https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#config-dir)移植步骤。**
考虑到ArkTS项目中包含有两个依赖模块，移植步骤为：
1. 将两个依赖模块完整拷贝到harmony-configs目录中。<br>
   <img src="screenshots/img_1.png" width="200">
2. 先运行uni-app或发布到HarmonyOS，然后将构建的HarmonyOS工程中的build-profile.json5、oh-package.json5和entry/oh-package.json5文件拷贝到harmony-configs目录内。<br>
   <img src="screenshots/img_2.png" width="200">
3. 在build-profile.json5配置文件引入constants和utils模块。<br>
   <img src="screenshots/img_3.png" width="200">
4. 在oh-package.json5和entry/oh-package.json5中配置两个依赖模块的源码依赖。<br>
   <img src="screenshots/img_4.png" width="200">

**三、长时任务[功能移植](https://uniapp.dcloud.net.cn/tutorial/harmony/native-api.html)步骤。**
1. 将startContinuousTask开启长时任的方法移植到插件hongmeng-continuoustask中。方法里面的context需要通过[UTSHarmony.getuiabilitycontext](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#getuiabilitycontext)函数获取，包名需要通过Harmony的[包管理模块](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-bundlemanager#bundleflag)获取。<br>
   <img src="screenshots/img_5.png" width="200">

3. 将startContinuousTask（开启长时任务）和stopContinuousTask（中止长时任务）方法暴露出去。<br>
   <img src="screenshots/img_6.png" width="200">

4. 在uni-app应用[生命周期](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)'App Show'和'App Hide'，分别调用停止长时任务和开始长时任务。'App Show'触发时机同UIAbility.onForeground，'App Hide'触发时机同UIAbility.onBackground，如下图所示。<br>
   <img src="screenshots/img_7.png" width="200">

**四、[权限申请](https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#%E9%80%9A%E8%BF%87-uts-%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE%E9%B8%BF%E8%92%99%E6%9D%83%E9%99%90)与参数[初始化](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#onappabilitywindowstagecreate)功能移植步骤。**
1. 查看entry模块的module.json5配置的权限，将权限配置到插件hongmeng-lifecycle中。<br>
   <img src="screenshots/img_8.png" width="200">

2. 根据权限配置引用的资源文件string.json5，将entry的resources资源移植到插件hongmeng-lifecycle中。其余的资源Color.json和float.json的参数值会移植到css样式中，main_pages.json中注册的页面会添加到pages.json中。<br>
   <img src="screenshots/img_9.png" width="200">

3. 在插件hongmeng-lifecycle中使用函数[UTSHarmony.onAppAbilityWindowStageCreate](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#onappabilitywindowstagecreate)监听应用生命周期，在生命周期中执行权限申请和参数初始化功能。
    - UTSHarmony.onAppAbilityWindowStageCreate函数触发时机同[UIAbility.onWindowStageCreate](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/uiability-lifecycle#onwindowstagecreate)。
    - 权限申请使用uts接口[UTSHarmony.requestSystemPermission](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#requestsystempermission-permissions-success-fail)。<br>
      <img src="screenshots/img_10.png" width="200">


**五、[屏幕录制功能移植](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-harmony.html#uts-for-harmonyos)步骤。**
1. 将屏幕录制的代码完整拷贝到插件hongmeng-screencapture中。<br>
   <img src="screenshots/img_11.png" width="200">

2. 将ArkTS侧的按钮处理逻辑封装到开始/结束录制方法，其余的页面绘制代码需要在uni-app重写。<br>
   <img src="screenshots/img_12.png" width="200">

3. uni-app有自己的视频播放组件，ArkTS侧的视频页面也需要在uni-app侧重新绘制。<br>
   <img src="screenshots/img_13.png" width="200">


<br>

**迁移技术点总结。**

| 技术点 | 本例中的映射 | 迁移方案 | 
| - | - | - | 
| ArkUI和ArkTS模块迁移 | 1.屏幕录制与播放页面<br>2.录制方法逻辑 | 1.录制和播放的页面，需要使用uni-app语法重写。<br>2.录制方法逻辑可以移植到uts插件，封装成接口供页面调用。 | 
| 长时任务| 让应用在后台长时间运行 | 将功能移植到uts插件。onShows时关闭长时任务，onHide时开启长时任务。 | 
| 权限 | 申请权限 | 权限申请可以使用[UTSHarmony.requestSystemPermission](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#requestsystempermission-permissions-success-fail)方法。 | 
| 生命周期 | 生命周期函数注册 | 1.[UTSHarmony.onAppAbilityCreate](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#onappabilitycreate)触发时机同UIAbility.onCreate。<br>2.[UTSHarmony.onAppAbilityWindowStageCreate](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#onappabilitywindowstagecreate)触发时机同UIAbility.onWindowStageCreate。<br> | 
| 依赖模块 | 源码依赖 | 需要将依赖模块完整拷入harmony-configs，然后在entry/oh-package.json5和oh-package.json5配置源码依赖。 | 
| 资源文件 | src/main/resources | 根据插件引用的资源，移植resources资源文件。 | 
| uiabilitycontext | this.getUIContext().getHostContext() | 在uts插件可以使用[UTSHarmony.getUIAbilityContext](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#getuiabilitycontext)方法获取uiabilitycontext | 


## 约束与限制
* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 权限说明
* 获取麦克风权限：[ohos.permission.MICROPHONE](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user#ohospermissionmicrophone)，
* 获取后台持续运行权限：[ohos.permission.KEEP_BACKGROUND_RUNNING](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all#ohospermissionkeep_background_running)。


## 工程目录
```
├─App.vue                                   // 应用配置，用来配置App全局样式以及监听、应用生命周期
├─index.html                                // 用于web加载渲染的root节点
├─main.js                                   // Vue初始化入口文件
├─manifest.json                             // 应用相关配置
├─pages.json                                // 配置页面路由、导航条、选项卡等页面类信息
├─uni.scss                                  // 内置的常用样式变量
├─harmony-configs                           // harmony工程定制化配置目录，每次编译执行HBuilderX都会检查这个目录，如果目录不存在则会自动创建。
│  └─entry
│      └─src
│          └─main
│              └─module.json5               // 应用配置文件，配置requestPermissions等信息
│              └─resources                  // 资源文件目录，会自动覆盖掉编译uni-app生成harmony工程中的同名文件
│  └─build-profile.json5                    // 全局配置，用于引入har模块、指定兼容SDK版本
│  └─oh-package.json5                       // 全局配置，用于配置依赖模块
│  └─constants                              // har模块，从HarmonyOS项目导入
│  └─utils                                  // har模块，从HarmonyOS项目导入
├─pages
│  └─index
│      └─index.vue                          // 首页
├─uni_modules                               // 插件目录，用于存放uniapp的插件
│   └─hongmeng-continuoustask               // uni-app插件，提供开始/结束长时任务的方法
│   └─hongmeng-lifecycle                    // uni-app插件，申请权限、参数初始化
│   └─hongmeng-screencapture                // uni-app插件，提供开始/结束录制的方法
```



## 参考文档
[基于AVScreenCapture实现屏幕录制](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-avscreencapture-for-screen-recording)<br>
[请求系统权限](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#requestsystempermission-permissions-success-fail)<br>
[uni-app应用生命周期](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)<br>
[长时任务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/continuous-task)<br>
[开放权限（用户授权）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user)<br>
[开放权限（系统授权）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all)<br>
[UIAbility组件生命周期](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/uiability-lifecycle)<br>
[使用AVScreenCaptureRecorder录屏写文件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/using-avscreencapture-arkts)<br>