uniapp中如何使用uts开发安卓视频录制插件并实现实时预览界面

在uniapp中使用uts开发安卓视频录制插件时，如何实现实时预览界面？目前已经通过uts调用了摄像头API，但预览画面无法同步到前端页面。请问具体需要怎么处理？是否需要通过SurfaceView或TextureView来实现？能否提供一个简单的代码示例？

2 回复

在UniApp中，使用UTS开发安卓视频录制插件，需先配置Android权限（如摄像头、录音）。通过UTS调用原生Android API（如Camera2或MediaRecorder）实现录制功能。实时预览可通过SurfaceView或TextureView显示摄像头画面。建议封装为uni.requireNativePlugin供JS调用。


在 UniApp 中使用 UTS 开发安卓视频录制插件并实现实时预览，需通过原生 Android 开发集成摄像头和预览功能。以下是关键步骤和示例代码：

1. 创建 UTS 插件项目

在 UniApp 项目中创建 utssdk 目录，并配置 package.json 定义插件信息。

2. 实现安卓视频录制功能

在 android-index.uts 中编写原生代码：

// 引入 Android API
import { Camera } from 'android.hardware.Camera'
import { SurfaceView } from 'android.view.SurfaceView'
import { MediaRecorder } from 'android.media.MediaRecorder'

export class VideoRecorder {
  private camera: Camera | null = null
  private mediaRecorder: MediaRecorder | null = null
  private surfaceView: SurfaceView

  constructor(surfaceView: SurfaceView) {
    this.surfaceView = surfaceView
  }

  // 初始化摄像头预览
  startPreview(): void {
    try {
      this.camera = Camera.open()
      this.camera.setPreviewDisplay(this.surfaceView.holder)
      this.camera.startPreview()
    } catch (e) {
      console.error("Preview failed: " + e.message)
    }
  }

  // 开始录制
  startRecording(filePath: string): void {
    this.mediaRecorder = MediaRecorder()
    this.camera?.unlock()
    this.mediaRecorder?.setCamera(this.camera)
    
    this.mediaRecorder?.setAudioSource(MediaRecorder.AudioSource.CAMCORDER)
    this.mediaRecorder?.setVideoSource(MediaRecorder.VideoSource.CAMERA)
    this.mediaRecorder?.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4)
    this.mediaRecorder?.setAudioEncoder(MediaRecorder.AudioEncoder.AAC)
    this.mediaRecorder?.setVideoEncoder(MediaRecorder.VideoEncoder.H264)
    this.mediaRecorder?.setOutputFile(filePath)
    this.mediaRecorder?.setPreviewDisplay(this.surfaceView.holder.surface)
    this.mediaRecorder?.prepare()
    this.mediaRecorder?.start()
  }

  // 停止录制
  stopRecording(): void {
    this.mediaRecorder?.stop()
    this.mediaRecorder?.release()
    this.camera?.reconnect()
    this.camera?.startPreview()
  }

  // 释放资源
  release(): void {
    this.camera?.stopPreview()
    this.camera?.release()
  }
}

3. 在 Vue 页面中调用

<template>
  <view>
    <surface-view class="preview-surface" ref="surfaceRef"></surface-view>
    <button @click="startRecord">开始录制</button>
    <button @click="stopRecord">停止录制</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        recorder: null
      }
    },
    mounted() {
      // 初始化录制器（需等待原生组件渲染）
      setTimeout(() => {
        const surface = this.$refs.surfaceRef
        this.recorder = new VideoRecorder(surface)
        this.recorder.startPreview()
      }, 500)
    },
    methods: {
      startRecord() {
        const filePath = '/sdcard/Movies/video.mp4'
        this.recorder.startRecording(filePath)
      },
      stopRecord() {
        this.recorder.stopRecording()
      }
    },
    beforeDestroy() {
      this.recorder.release()
    }
  }
</script>

<style>
  .preview-surface {
    width: 100%;
    height: 400rpx;
  }
</style>

注意事项：

  1. 权限配置：在 manifest.json 中添加摄像头、录音和存储权限
  2. API 兼容性：注意不同 Android 版本的 API 差异
  3. 预览组件：使用 surface-view 组件承载原生预览画面
  4. 路径处理：实际文件路径需使用正确的沙箱路径

此方案通过 UTS 直接调用 Android 原生 API，实现了低延迟的实时预览和录制功能。注意在真机测试时处理权限申请和兼容性问题。

回到顶部