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

本文链接：https://blog.youkuaiyun.com/Ms_Smart/article/details/149722114

7. 音频基础交互功能

获取默认背景音乐

功能介绍

目前模版提供部分默认背景音乐供开发者获取、使用，后续音乐内容将进行扩充，其中获取默认背景音乐主要分为以下两个步骤：

获取默认背景音乐在线地址。
下载在线背景音乐至手机本地。

相关代码段

import { backgroundMusicList, backgroundMusicDownload } from "@ray-js/ray";

const createLocalMusicPath = (idx: number) => {
  const fileRoot = ty.env.USER_DATA_PATH;
  const filePath = `${fileRoot}/music${idx + 1}.mp4`;
  return filePath;
};

// 下载所有音乐
const downloadMusic = (musicArray: Array<ItemMusic>) => {
  // 使用 map 遍历每个 URL，并用 Promise 包裹同步调用
  const downloadPromises = musicArray.map((music, index) => {
    const localPath = createLocalMusicPath(index);

    return new Promise((resolve, reject) => {
      try {
        backgroundMusicDownload({
          musicUrl: music.musicUrl,
          musicPath: localPath,
          success: (res) => {
            console.log("==backgroundMusicDownload==success", res);
            resolve({
              id: music.musicTitle,
              ...music,
              musicLocalPath: localPath,
            });
          },
          fail: ({ errorMsg }) => {
            console.log("==backgroundMusicDownload==fail", errorMsg);
          },
        });
      } catch (error) {
        reject(error);
      }
    });
  });

  return Promise.all(downloadPromises)
    .then((localMusicArray) => {
      console.log("下载完成:", localMusicArray);
      return localMusicArray;
    })
    .catch((error) => {
      console.error("下载过程中出现错误:", error);
    });
};

// 初始化本地音乐资源列表
const initLocalMusicSource = () => {
  backgroundMusicList({
    success: ({ musicList }) => {
      console.log("===backgroundMusicList==", musicList);

      downloadMusic(musicList)
        .then((resList) => {
          console.log("===downloadMusic==success", resList);
          // 将背景音乐数据缓存至面板 redux 中
          dispatch(updateMusicInfoList(resList));
        })
        .catch((error) => {
          console.log("===downloadMusic==fail", error);
        });
    },
    fail: ({ errorMsg }) => {
      console.log("====backgroundMusicList==fail", errorMsg);
    },
  });
};

// 在面板初始化时完成背景音乐初始化
initLocalMusicSource();

展示、试听默认背景音乐

功能介绍

目前模版提供 LocalMusicList 组件，用于展示、试听背景音乐；其中音乐的试听能力，主要通过 InnerAudioContext 实例实现。

相关代码段

import { createInnerAudioContext } from "@ray-js/ray";

// 初始化 audioManager 实例
const audioManager = createInnerAudioContext({
  success: (res) => {
    console.log("==createInnerAudioContext==success", res);
  },
  fail: (error) => {
    console.log("==createInnerAudioContext==fail", error);
  },
});

// 通过本地路径播放本地音乐
audioManager.play({
  src: currentMusic.musicLocalPath,
  success: (res) => {
    console.log("==play==success", res);
  },
  fail: (error) => {
    console.log("==play==fail", error);
  },
});

// 暂停音乐播放
audioManager.pause({
  success: (res) => {
    console.log("==stop==pause", res);
  },
  fail: (error) => {
    console.log("==stop==pause", error);
  },
});

// 销毁音频管理实例
audioManager.destroy({
  success: (res) => {
    console.log("==destroy==success", res);
  },
  fail: (error) => {
    console.log("==destroy==fail", error);
  },
});

8. AI 视频流处理功能

宠物、人像主体突出

功能介绍

C 端用户可在模版中选择希望突出的主体分类，AI 将根据用户选项自动处理。

视频流背景音乐编辑

功能介绍

C 端用户可在模版中选择希望与 AI 视频合并导出的背景音乐，同时模版支持 C 端用户自定义原视频音频与背景音乐的混音比例。

关键 API 代码段

import { ai } from "@ray-js/ray";
import { createTempVideoRoot } from "@/utils";

const {
  objectDetectCreate,
  objectDetectDestroy,
  objectDetectForVideo,
  objectDetectForVideoCancel,
  offVideoObjectDetectProgress,
  onVideoObjectDetectProgress,
} = ai;

// 当前 AI 视频的编辑状态
const [handleState, setHandleState] = useState("idle");
// 当前 AI 视频流处理进度
const [progressState, setProgressState] = useState(0);

// 注册 App AI 实例
useEffect(() => {
  objectDetectCreate();

  return () => {
    // 页面销毁时同时销毁 App AI 实例
    objectDetectDestroy();
    audioManager.destroy({
      success: (res) => {
        console.log("==destroy2==success", res);
      },
      fail: (error) => {
        console.log("==destroy2==fail", error);
      },
    });
  };
}, []);

// AI 视频流处理功能
const handleVideoByAI = (
  detectType: number,
  imageEditType: number,
  musicPath = ""
) => {
  // 生成 AI 主体突出视频时建议关闭音乐播放，避免系统出现未知错误
  paseVideo();

  // 生成 AI 主体突出视频导出路径
  const tempVideoPath = createTempVideoRoot();

  // 开启 AI 主体突出视频生成进度监听
  onVideoObjectDetectProgress(handleListenerProgress);
  objectDetectForVideo({
    inputVideoPath: videoSrc,
    outputVideoPath: tempVideoPath,
    detectType,
    musicPath,
    originAudioVolume: volumeObj.video / 100,
    overlayAudioVolume: volumeObj.music / 100,
    imageEditType,
    audioEditType: 2,
    success: ({ path }) => {
      // 注销 AI 主体突出视频生成进度监听
      offVideoObjectDetectProgress(handleListenerProgress);
      setProgressState(0);
      fetchVideoThumbnails({
        filePath: path,
        startTime: 0,
        endTime: 1,
        thumbnailCount: 1,
        thumbnailWidth: 375,
        thumbnailHeight: 212,
        success: (res) => {
          setHandleState("success");
          setVideoSrc(path);
          showToast({
            title: Strings.getLang("dsc_ai_generates_success"),
            icon: "success",
          });
        },
        fail: ({ errorMsg }) => {
          console.log("==fetchVideoThumbnails==fail==", errorMsg);
        },
      });
    },
    fail: ({ errorMsg }) => {
      console.log("==objectDetectForVideo==fail==", errorMsg);
      offVideoObjectDetectProgress(handleListenerProgress);
      setProgressState(0);
      setHandleState("fail");
      setHandleState("selectSkill");
      setIsShowAISkills(true);
      showToast({
        title: Strings.getLang("dsc_ai_generates_fail"),
        icon: "error",
      });
    },
  });
};

// 打断 AI 主体突出视频流生成
const handleCancelAIProcess = () => {
  objectDetectForVideoCancel({
    success: () => {
      setHandleState("select");
    },
  });
};

具体 AI 技术方案介绍，详见：视频解决方案—视频主体突出方案

具体 API 相关介绍，详见：开发者文档—AI 基础包