鸿蒙Next XComponentController如何实现视频录制功能

在鸿蒙Next开发中，使用XComponentController实现视频录制功能时遇到了问题。具体场景是：通过XComponent获取Surface后，如何正确配置MediaRecorder进行视频采集？目前尝试绑定Surface到MediaRecorder时总提示"surface not valid"，但XComponent的宽高和显示都正常。想知道XComponentController是否需要特殊初始化？官方示例中缺少相关案例，求完整的视频录制实现流程或关键代码片段。

2 回复

在鸿蒙Next中，使用XComponentController实现视频录制的基本步骤：

  1. 创建XComponentController实例并设置Surface
let xComponentController: XComponentController = new XComponentController();
// 获取Surface用于视频录制
let surfaceId = xComponentController.getXComponentSurfaceId();
  1. 配置相机参数并启动预览
// 创建Camera实例
let camera = CameraManager.createCamera(cameraPosition);
// 设置输出配置
let profile = camera.getSupportedOutputCapability().previewProfiles[0];
let output = camera.createPreviewOutput(profile, surfaceId);
  1. 配置视频录制
// 创建视频录制会话
let videoRecorder = new VideoRecorder();
// 设置录制配置
let config = {
  audioSourceType: AudioSourceType.AUDIO_SOURCE_MIC,
  videoSourceType: VideoSourceType.VIDEO_SOURCE_SURFACE_YUV,
  profile: {
    audioBitrate: 48000,
    fileFormat: FileFormat.FORMAT_MP4
  }
};
  1. 开始/停止录制
// 开始录制
videoRecorder.prepare(config);
videoRecorder.start();

// 停止录制
videoRecorder.stop();
videoRecorder.release();

注意：需要申请相机和麦克风权限，并在XComponent的onSurfaceCreated回调中初始化相机。

更多关于鸿蒙Next XComponentController如何实现视频录制功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，使用XComponentController实现视频录制功能，主要涉及以下步骤：

1. 添加权限

在module.json5中配置权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.MICROPHONE"
      },
      {
        "name": "ohos.permission.CAMERA"
      },
      {
        "name": "ohos.permission.WRITE_MEDIA"
      }
    ]
  }
}

2. 创建XComponentController

在ArkUI中声明XComponentController：

import { XComponentController, XComponentType } from '@kit.ArkUI';

@Entry
@Component
struct VideoRecorderPage {
  private xComponentController: XComponentController = new XComponentController();

  build() {
    Column() {
      // XComponent用于预览摄像头画面
      XComponent({
        id: 'xcomponent_video',
        type: XComponentType.SURFACE_VIEW,
        controller: this.xComponentController
      })
        .width('100%')
        .height('50%')

      Button('开始录制')
        .onClick(() => {
          this.startRecording();
        })
    }
  }
}

3. 初始化录制器

在startRecording方法中配置录制参数：

import { media } from '@kit.MediaKit';

private recorder: media.MediaRecorder | undefined;

async startRecording() {
  // 1. 获取XComponent的SurfaceID
  let surfaceId = this.xComponentController.getXComponentSurfaceId();
  
  // 2. 创建录制配置
  let profile: media.RecorderProfile = {
    audioBitrate: 48000,
    audioChannels: 2,
    audioCodec: media.CodecMimeType.AUDIO_AAC,
    audioSampleRate: 48000,
    fileFormat: media.ContainerFormatType.CFT_MPEG_4,
    videoBitrate: 2000000,
    videoCodec: media.CodecMimeType.VIDEO_AVC,
    videoFrameWidth: 640,
    videoFrameHeight: 480,
    videoFrameRate: 30
  };

  // 3. 创建录制器
  this.recorder = await media.createMediaRecorder();
  
  // 4. 准备录制（绑定Surface和配置）
  let config: media.RecorderConfig = {
    videoSourceType: media.VideoSourceType.VIDEO_SOURCE_SURFACE_YUV,
    profile: profile,
    url: 'file:///data/media/video.mp4', // 保存路径
    rotation: 0,
    location: { latitude: 0, longitude: 0 }
  };
  
  await this.recorder.prepare(config);
  await this.recorder.bindInputSurface(surfaceId);
  
  // 5. 开始录制
  await this.recorder.start();
}

4. 停止录制

async stopRecording() {
  if (this.recorder) {
    await this.recorder.stop();
    await this.recorder.release();
    this.recorder = undefined;
  }
}

关键说明：

  1. XComponentController：用于获取SurfaceID，将摄像头预览画面与录制器绑定
  2. MediaRecorder：鸿蒙媒体录制核心类，负责视频编码和存储
  3. Surface绑定：通过bindInputSurface将XComponent的绘制表面与录制器连接

注意事项：

  • 需要动态申请摄像头和存储权限
  • 确保保存路径可写
  • 录制结束后及时释放资源

以上代码提供了基础的视频录制实现框架，实际使用时需要添加错误处理和状态管理。

回到顶部