如何在Ionic Angular Capacitor项目中实现安卓/Web/iOS跨端视频录制？

一、视频录制实现 #

因为@capacitor/camera不支持视频录制，且无法使用Cordova插件，我们采用Web标准API+Capacitor官方插件的组合实现三端兼容：

1. 跨端视频捕获（Web/Android/iOS通用） #

使用浏览器原生的MediaDevices.getUserMedia() API捕获视频流，三端WebView均支持：

async function startRecording() {
  // 先检查权限（见下文权限处理）
  await checkPermissions();

  const stream = await navigator.mediaDevices.getUserMedia({ 
    video: { facingMode: 'environment' }, // 优先后置摄像头
    audio: true 
  });
  const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/mp4' });
  const chunks = [];

  mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: 'video/mp4' });
    const savedUri = await saveVideoToDevice(blob);
    stream.getTracks().forEach(track => track.stop()); // 释放媒体资源
    return savedUri;
  };

  mediaRecorder.start();
  // 示例：录制10秒后自动停止，可根据业务逻辑调整
  setTimeout(() => mediaRecorder.stop(), 10000);
}

2. 移动端本地存储 #

用@capacitor/filesystem将录制的Blob保存到设备本地，替代Cordova的media-capture：

import { Filesystem, Directory } from '@capacitor/filesystem';

async function saveVideoToDevice(blob) {
  const arrayBuffer = await blob.arrayBuffer();
  const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
  
  const fileName = `video_recording_${Date.now()}.mp4`;
  const result = await Filesystem.writeFile({
    path: fileName,
    data: base64,
    directory: Directory.Documents,
    recursive: true
  });

  return result.uri; // 返回本地文件URI，用于后续播放
}

3. 权限处理（必填） #

使用@capacitor/permissions确保获取相机和麦克风权限：

import { Permissions, PermissionType } from '@capacitor/permissions';

async function checkPermissions() {
  const [cameraStatus, micStatus] = await Promise.all([
    Permissions.check({ type: PermissionType.Camera }),
    Permissions.check({ type: PermissionType.Microphone })
  ]);

  if (cameraStatus.state !== 'granted' || micStatus.state !== 'granted') {
    const requestResult = await Permissions.request([
      { type: PermissionType.Camera },
      { type: PermissionType.Microphone }
    ]);
    if (requestResult.Camera.state !== 'granted' || requestResult.Microphone.state !== 'granted') {
      throw new Error('必须授予相机和麦克风权限才能录制视频');
    }
  }
}

二、视频播放实现 #

替代Cordova的streaming-media，采用两种方案满足不同需求：

1. 通用HTML5播放（轻量跨端） #

直接用HTML5 <video>标签播放，三端通用：

<video id="videoPlayer" controls style="width:100%;"></video>

async function playVideo(fileUri) {
  const videoElement = document.getElementById('videoPlayer');
  
  if (fileUri.startsWith('http')) {
    videoElement.src = fileUri;
  } else {
    // 移动端本地文件，转换为可访问的URI
    const fileInfo = await Filesystem.getUri({
      path: fileUri.split('/').pop(),
      directory: Directory.Documents
    });
    videoElement.src = fileInfo.uri;
  }
  
  try {
    await videoElement.play();
  } catch (err) {
    console.error('播放失败:', err);
  }
}

2. 原生播放增强（可选） #

如果需要全屏、锁屏播放等原生体验，使用@capacitor-community/video-player（纯Capacitor插件，非Cordova）：

import { VideoPlayer } from '@capacitor-community/video-player';

async function playVideoWithNativeUI(fileUri) {
  await VideoPlayer.play({
    url: fileUri,
    options: {
      autoplay: true,
      controls: true,
      fullscreen: true,
      backgroundColor: '#000000'
    }
  });
}

三、三端兼容配置要点 #

• Web端：必须在HTTPS环境下使用getUserMedia（本地开发localhost不受限制）。
• Android：在android/app/src/main/AndroidManifest.xml中添加权限：

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

• iOS：在ios/App/App/Info.plist中添加权限描述：

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机录制视频</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>需要访问麦克风录制音频</string>
  

• 格式兼容：统一使用MP4格式（H.264编码），确保三端都能正常解码播放。

内容的提问来源于stack exchange，提问作者Lokeshwari T