AI 视频流主体突出功能模版开发流程（一）-优快云博客

1. 准备工作

前提条件

已阅读 Ray 新手村任务，了解 Ray 框架的基础知识。
已阅读使用 Ray 开发万能面板，了解 Ray 面板开发的基础知识。
AI 视频流主体突出功能模版使用 SDM（Smart Device Model） 开发，了解 SDM 相关请查看 SDM 文档。

开发环境

详见面板小程序 > 搭建环境。

2. 需求分析

在复杂视频场景中，利用 AI 技术识别并突出显示关键主体（如宠物、人像等），以增强视觉焦点。

功能拆分

视频基本交互功能：
- 视频导入
- 视频导出
- 视频首帧渲染
- 视频播放暂停
- 视频进度条
音频基础交互功能：
- 获取默认背景音乐
- 展示默认背景音乐列表
- 试听默认背景音乐
AI 视频流处理功能：
- 宠物主体突出（支持猫、狗、鸟等 80 余种动物）
- 人像主体突出
- 视频流添加背景音乐
- 调节混音（视频原声、背景音乐）权重

3. 创建项目

开发者平台创建面板小程序

面板小程序的开发在 小程序开发者 平台上进行操作，首先请前往小程序开发者平台完成平台的注册登录。

详细操作步骤，请参考创建面板小程序。

IDE 基于示例模板创建项目工程

打开物料广场基于 IPC 精彩时刻通用模版物料，创建一个小程序项目，需要在 Tuya MiniApp IDE 上操作。

4. 工程目录

完成以上步骤后，一个面板小程序的开发模板初始化完成。以下为工程目录的介绍：

├── src
│  	├── api // 面板所有云端 API 请求聚合文件
│  	├── components
│  	│   ├── GlobalToast // 全局轻弹窗
│  	│   ├── IconFont // svg 图标容器组件
│  	│   ├── MusicSelectModal // 背景音乐选择弹窗
│  	│   ├── TopBar // 顶部信息栏
│  	│   ├── TouchableOpacity // 点击按钮组件
│  	│   ├── Video // 视频容器组件
│  	│   ├── VideoSeeker // 视频滑动条组件
│  	├── constant
│  	│   ├── dpCodes.ts // dpCode 常量
│  	│   ├── index.ts // 存放所有的常量配置
│  	├── devices // 设备模型
│  	├── hooks // hooks
│  	├── i18n // 多语言
│  	├── pages
│   │   ├── home // 首页
│   │       ├── AISkillBtn // AI 视频处理能力按钮组件
│   │       ├── MusicSelectBtn // 背景音乐选择按钮组件
│  	├── redux // redux
│   ├── res // 图片资源 & svg 相关
│   ├── styles // 全局样式
│   ├── types // 全局类型定义
│   ├── utils // 业务常用工具方法
│   ├── app.config.ts
│   ├── app.less
│   ├── app.tsx
│   ├── composeLayout.tsx // 处理监听子设备添加、解绑、DP 变化等
│   ├── global.config.ts
│   ├── mixins.less // less mixins
│   ├── routes.config.ts // 配置路由
│   ├── variables.less // less variables

5. 关键能力依赖

区域：全区可用
App 版本：涂鸦 App、智能生活 App v6.5.0 及以上版本
Kit 依赖：
- BaseKit: v3.0.6
- MiniKit: v3.0.1
- DeviceKit: v4.0.8
- BizKit: v4.2.0
- AIKit: v1.0.0-objectDetection.11
- baseversion: v2.19.0
组件依赖：
- @ray-js/panel-sdk: "^1.13.1"
- @ray-js/ray: "^1.6.1"
- @ray-js/ray-error-catch: "^0.0.25"
- @ray-js/smart-ui: "^2.1.5"
- @ray-js/cli: "^1.6.1"
- @ray-js/cli: "^1.6.1"

6. 视频基本交互功能

视频初始化导入

功能介绍

视频资源在初始化导入阶段依赖以下两个关键能力：

1.用户素材采集
- 支持 C 端用户通过实时录制视频或从手机相册导入的方式，提交原始视频素材。
2.视频预标准化处理
- 自动统一源视频的分辨率与角度，避免因格式差异导致后续 AI 视频生成流程出现异常。

相关代码段

import { chooseMedia, clipVideo } from "@ray-js/ray";

// 由于系统兼容性问题，该路径用于视频展示
const [videoSrc, setVideoSrc] = useState("");
// 由于系统兼容性问题，该路径用于视频生成
const [videoFileSrc, setVideoFileSrc] = useState("");
// 存储视频首帧渲染图片
const [posterSrc, setPosterSrc] = useState("");

// 导入视频资源
const getVideoSourceList = () => {
  paseVideo();
  chooseMedia({
    mediaType: "video",
    sourceType: ["album", "camera"],
    isFetchVideoFile: true,
    success: (res) => {
      initState();
      const { tempFiles } = res;
      console.log("==tempFiles", tempFiles);
      clipVideo({
        filePath: tempFiles[0].tempFilePath,
        startTime: 0,
        endTime: tempFiles[0].duration * 1000,
        level: 4,
        success: ({ videoClipPath }) => {
          console.log("====clipVideo==success", videoClipPath);
          setVideoSrc(videoClipPath);
          setPosterSrc(tempFiles[0].thumbTempFilePath);
          setHandleState("inputDone");
        },
        fail: (error) => {
          console.log("====clipVideo==fail", error);
          setHandleState("idle");
        },
      });
    },
  });
};

视频 AI 生成后导出

功能介绍

视频 AI 生成后导出功能，主要用于支持 C 端用户完成视频素材编辑后将视频转存至手机相册。

相关代码段

import { saveVideoToPhotosAlbum, showToast } from "@ray-js/ray";

// 由于系统兼容性问题，该路径用于视频生成
const [videoFileSrc, setVideoFileSrc] = useState("");

// 导出视频资源
const handleOutputVideo = () => {
  saveVideoToPhotosAlbum({
    filePath: videoFileSrc,
    success: (res) => {
      // 进行视频导出成功提示
      showToast({
        title: Strings.getLang("dsc_output_video_success"),
        icon: "success",
      });
    },
    fail: (error) => {
      console.log("==saveVideoToPhotosAlbum==fail", error);
    },
  });
};

视频展示组件

组件介绍

视频展示组件用于原始视频素材、AI 生成视频素材的展示，支持 C 端用户随时播放、暂停视频，同时组件内部镶嵌了视频进度条，支持 C 端用户滑动预览视频内容。

相关代码段

import { saveVideoToPhotosAlbum, showToast } from "@ray-js/ray";

// 由于系统兼容性问题，该路径用于视频展示
const [videoSrc, setVideoSrc] = useState("");
// 存储视频首帧渲染图片
const [posterSrc, setPosterSrc] = useState("");

<Video id="video-editor" type="previewer" src={videoSrc} poster={posterSrc} />;

AI 视频流主体突出功能模版开发流程（二）