Capacitor多媒体处理：拍照、录音与视频编辑功能实现
项目地址: https://gitcode.com/gh_mirrors/ca/capacitor 引言：跨平台应用的多媒体挑战
在移动应用开发中，多媒体功能（拍照、录音、视频处理）是提升用户体验的关键要素。然而，实现跨平台的多媒体功能往往面临三大挑战：设备API差异、性能优化和权限管理。Capacitor作为一款优秀的跨平台应用开发框架，通过插件化架构和统一API，为开发者提供了便捷的多媒体解决方案。本文将深入探讨如何在Capacitor应用中实现拍照、录音和视频编辑功能，帮助开发者轻松应对跨平台多媒体处理的复杂性。
Capacitor多媒体架构概述
Capacitor采用插件化架构，将原生平台的多媒体能力封装为JavaScript API，使开发者能够使用熟悉的Web技术调用设备功能。其核心优势在于：
- 统一API接口：无论iOS还是Android平台，使用相同的JavaScript API调用多媒体功能
- 原生性能：直接调用设备原生API，避免WebView性能瓶颈
- 权限自动管理：简化相机、麦克风等敏感权限的申请流程
下面是Capacitor多媒体处理的基本工作流程：
环境准备与插件安装
基础环境配置
在开始实现多媒体功能前，请确保你的开发环境满足以下要求：
- Node.js 14.0.0+
- npm 6.0.0+
- Capacitor 3.0.0+
安装多媒体相关插件
Capacitor的多媒体功能主要通过官方和社区插件实现。以下是常用的多媒体插件安装命令：
# 安装相机插件
npm install @capacitor/camera
npx cap sync
# 安装媒体插件（音频录制）
npm install @capacitor/media
npx cap sync
# 安装文件系统插件（处理媒体文件）
npm install @capacitor/filesystem
npx cap sync
# 安装权限插件（管理媒体权限）
npm install @capacitor/permissions
npx cap sync
配置平台权限
iOS配置
在ios/App/App/Info.plist文件中添加以下权限描述：
<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄照片和视频</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风以录制音频</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问相册以保存媒体文件</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择媒体文件</string>
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" />
<!-- 读取外部存储权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- 相机功能声明 -->
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
对于Android 10及以上设备，还需要在android/app/src/main/AndroidManifest.xml的<application>标签中添加：
android:requestLegacyExternalStorage="true"
拍照功能实现
基础拍照功能
以下是使用Capacitor Camera插件实现基础拍照功能的完整代码示例：
import { Camera, CameraResultType, CameraSource, CameraDirection } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Permissions, PermissionStatus } from '@capacitor/permissions';
// 检查相机权限
async function checkCameraPermissions(): Promise<boolean> {
const { state } = await Permissions.check({ name: 'camera' });
if (state === 'granted') {
return true;
}
const { status } = await Permissions.request({ name: 'camera' });
return status === 'granted';
}
// 拍摄照片
async function takePhoto(): Promise<string | null> {
// 检查权限
const hasPermission = await checkCameraPermissions();
if (!hasPermission) {
alert('需要相机权限才能拍摄照片');
return null;
}
try {
// 调用相机
const image = await Camera.getPhoto({
quality: 90, // 图片质量 (0-100)
allowEditing: true, // 是否允许编辑
resultType: CameraResultType.Uri, // 返回类型：Uri/Base64/Path
source: CameraSource.Camera, // 来源：相机/相册
direction: CameraDirection.Rear, // 摄像头方向：前置/后置
saveToGallery: true // 是否保存到相册
});
// 图片路径或数据
const imageUrl = image.webPath;
// 如果需要进一步处理图片，可以使用Filesystem API
if (imageUrl) {
// 这里可以添加图片压缩、裁剪等处理逻辑
console.log('拍摄成功，图片URL:', imageUrl);
return imageUrl;
}
return null;
} catch (error) {
console.error('拍照失败:', error);
// 处理取消操作
if ((error as Error).message.includes('cancelled')) {
console.log('用户取消了拍照');
}
return null;
}
}
// 在HTML中显示照片
function displayPhoto(imageUrl: string) {
const imgElement = document.createElement('img');
imgElement.src = imageUrl || '';
imgElement.style.maxWidth = '100%';
imgElement.style.margin = '10px 0';
const container = document.getElementById('photo-container');
if (container) {
container.appendChild(imgElement);
}
}
// 绑定到按钮点击事件
document.getElementById('take-photo-btn')?.addEventListener('click', async () => {
const photoUrl = await takePhoto();
if (photoUrl) {
displayPhoto(photoUrl);
}
});
高级拍照功能与参数配置
Camera插件提供了丰富的配置选项，可以满足不同场景的需求：
// 高级拍照配置示例
const advancedImage = await Camera.getPhoto({
quality: 80,
allowEditing: true,
resultType: CameraResultType.Base64, // 返回Base64数据
source: CameraSource.Photos, // 从相册选择
direction: CameraDirection.Front, // 使用前置摄像头
saveToGallery: true,
height: 1024, // 调整图片高度
width: 1024, // 调整图片宽度
presentationStyle: 'fullscreen', // 相机界面样式
promptLabelHeader: '拍照', // 自定义提示文本（部分平台支持）
promptLabelCancel: '取消',
promptLabelPhoto: '从相册选择',
promptLabelPicture: '拍照'
});
不同返回类型的使用场景对比：
| 返回类型 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Uri | 内存占用小，加载快 | 需要处理文件路径 | 直接显示图片 |
| Base64 | 无需处理文件路径 | 内存占用大，数据量大 | 小图片、即时预览 |
| Path | 可直接操作文件 | 平台路径差异大 | 需要进一步处理图片文件 |
图片保存与文件系统交互
拍摄照片后，通常需要保存到设备或上传到服务器。以下是使用Filesystem插件保存图片的示例：
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
async function saveImageToFilesystem(base64Data: string, fileName: string): Promise<string> {
// 移除base64前缀
const base64 = base64Data.replace('data:image/jpeg;base64,', '');
const savedFile = await Filesystem.writeFile({
path: `photos/${fileName}.jpg`,
data: base64,
directory: Directory.Data,
encoding: Encoding.Base64
});
console.log('图片保存成功:', savedFile.uri);
return savedFile.uri;
}
async function getImageFromFilesystem(fileName: string): Promise<string> {
const file = await Filesystem.readFile({
path: `photos/${fileName}.jpg`,
directory: Directory.Data,
encoding: Encoding.Base64
});
return `data:image/jpeg;base64,${file.data}`;
}
async function listSavedImages(): Promise<string[]> {
const files = await Filesystem.readdir({
path: 'photos',
directory: Directory.Data
});
return files.files.map(file => file.name);
}
录音功能实现
音频录制基础实现
Capacitor的Media插件提供了音频录制功能。以下是基础录音功能的实现：
import { Media, MediaObject } from '@capacitor/media';
import { Permissions } from '@capacitor/permissions';
let audioRecorder: MediaObject | null = null;
// 检查麦克风权限
async function checkMicrophonePermission(): Promise<boolean> {
const { state } = await Permissions.check({ name: 'microphone' });
if (state === 'granted') {
return true;
}
const { status } = await Permissions.request({ name: 'microphone' });
return status === 'granted';
}
// 开始录音
async function startRecording(): Promise<boolean> {
const hasPermission = await checkMicrophonePermission();
if (!hasPermission) {
alert('需要麦克风权限才能录音');
return false;
}
try {
// 创建录音对象
audioRecorder = await Media.create({
path: `recording-${Date.now()}.m4a`,
format: 'mpeg4'
});
// 开始录音
await audioRecorder.startRecord();
console.log('录音开始');
return true;
} catch (error) {
console.error('录音启动失败:', error);
return false;
}
}
// 停止录音
async function stopRecording(): Promise<string | null> {
if (!audioRecorder) {
console.error('没有活动的录音会话');
return null;
}
try {
await audioRecorder.stopRecord();
console.log('录音停止');
// 获取录音文件路径
const result = await audioRecorder.getInfo();
return result.fullPath;
} catch (error) {
console.error('停止录音失败:', error);
return null;
} finally {
// 释放资源
if (audioRecorder) {
await audioRecorder.release();
audioRecorder = null;
}
}
}
// 播放录音
async function playRecording(filePath: string): Promise<boolean> {
try {
const audioPlayer = await Media.create({ path: filePath });
await audioPlayer.play();
// 监听播放完成事件
audioPlayer.setOnStatusUpdate(status => {
if (status === 'completed') {
console.log('播放完成');
audioPlayer.release();
}
});
console.log('开始播放录音');
return true;
} catch (error) {
console.error('播放录音失败:', error);
return false;
}
}
// 绑定录音控制按钮
document.getElementById('start-record-btn')?.addEventListener('click', async () => {
const success = await startRecording();
if (success) {
// 更新UI显示录音状态
(document.getElementById('record-status') as HTMLSpanElement).textContent = '正在录音...';
}
});
document.getElementById('stop-record-btn')?.addEventListener('click', async () => {
const recordingPath = await stopRecording();
(document.getElementById('record-status') as HTMLSpanElement).textContent = '录音已停止';
if (recordingPath) {
// 显示播放按钮
const playBtn = document.createElement('button');
playBtn.textContent = '播放录音';
playBtn.onclick = () => playRecording(recordingPath);
document.getElementById('audio-controls')?.appendChild(playBtn);
}
});
音频格式与质量设置
Media插件支持多种音频格式和质量设置，可根据需求调整：
// 高质量录音配置
const highQualityRecorder = await Media.create({
path: `high-quality-recording-${Date.now()}.wav`,
format: 'wav', // 音频格式: mpeg4, wav, aac, amr
quality: 'high', // 质量: low, medium, high
sampleRate: 44100, // 采样率(Hz)
bitRate: 128000, // 比特率(bps)
channels: 2 // 声道数: 1(单声道), 2(立体声)
});
// 低质量录音配置（适合语音备忘录）
const lowQualityRecorder = await Media.create({
path: `low-quality-recording-${Date.now()}.amr`,
format: 'amr',
quality: 'low',
sampleRate: 22050,
bitRate: 12200,
channels: 1
});
不同音频格式的对比：
| 格式 | 压缩率 | 音质 | 文件大小 | 兼容性 | 适用场景 |
|---|---|---|---|---|---|
| WAV | 无压缩 | 最佳 | 最大 | 广泛 | 高质量音频录制 |
| MPEG4 | 高压缩 | 优秀 | 中等 | 现代设备 | 平衡质量和大小 |
| AAC | 高压缩 | 良好 | 小 | iOS优先 | 移动端音频 |
| AMR | 极高压缩 | 一般 | 最小 | 有限 | 语音备忘录 |
视频处理功能实现
视频录制与基础编辑
Capacitor通过Camera插件支持视频录制，结合第三方库可以实现基础的视频编辑功能：
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
// 录制视频
async function recordVideo(): Promise<string | null> {
const hasPermission = await checkCameraPermissions(); // 使用前面定义的权限检查函数
if (!hasPermission) {
alert('需要相机权限才能录制视频');
return null;
}
try {
const video = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
saveToGallery: true,
mediaType: 'video' // 指定媒体类型为视频
});
console.log('视频录制成功:', video.webPath);
return video.webPath || null;
} catch (error) {
console.error('视频录制失败:', error);
return null;
}
}
// 视频压缩（使用ffmpeg.wasm）
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });
async function compressVideo(inputPath: string, outputName: string): Promise<string> {
// 加载ffmpeg核心
if (!ffmpeg.isLoaded()) {
await ffmpeg.load();
}
// 读取视频文件
const fileData = await Filesystem.readFile({
path: inputPath,
directory: Directory.Data
});
// 将视频文件写入ffmpeg虚拟文件系统
ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(fileData.uri));
// 执行压缩命令（降低分辨率和比特率）
await ffmpeg.run('-i', 'input.mp4', '-vf', 'scale=640:-1', '-b:v', '500k', 'output.mp4');
// 读取压缩后的视频
const data = ffmpeg.FS('readFile', 'output.mp4');
// 保存压缩后的视频
const outputPath = `compressed-${outputName}.mp4`;
await Filesystem.writeFile({
path: outputPath,
data: Uint8Array.from(data).buffer,
directory: Directory.Data,
encoding: 'raw'
});
return outputPath;
}
视频播放与进度控制
使用HTML5 Video元素结合Capacitor的文件系统功能，可以实现视频播放和进度控制：
function createVideoPlayer(videoUrl: string): HTMLVideoElement {
const videoElement = document.createElement('video');
videoElement.src = videoUrl;
videoElement.controls = true;
videoElement.style.width = '100%';
videoElement.style.margin = '10px 0';
// 添加自定义进度控制逻辑
videoElement.addEventListener('timeupdate', () => {
const progress = (videoElement.currentTime / videoElement.duration) * 100;
console.log(`视频进度: ${progress.toFixed(2)}%`);
// 可以在这里更新自定义进度条
});
return videoElement;
}
// 从文件系统加载视频并播放
async function playVideoFromFilesystem(filePath: string) {
const videoElement = document.createElement('video');
videoElement.controls = true;
videoElement.style.width = '100%';
// 获取视频文件的URL
const videoUrl = await Filesystem.getUri({
path: filePath,
directory: Directory.Data
});
// 在iOS上需要特殊处理
if (Capacitor.getPlatform() === 'ios') {
videoElement.src = videoUrl.uri;
} else {
// Android可以直接使用文件路径
videoElement.src = `file://${videoUrl.uri}`;
}
document.getElementById('video-container')?.appendChild(videoElement);
await videoElement.play();
}
跨平台兼容性处理
平台差异与适配策略
尽管Capacitor提供了统一的API，但iOS和Android在多媒体处理上仍存在差异，需要针对性适配：
import { Capacitor } from '@capacitor/core';
// 根据平台调整相机配置
function getPlatformSpecificCameraConfig() {
const isIOS = Capacitor.getPlatform() === 'ios';
return {
quality: 80,
allowEditing: true,
resultType: isIOS ? CameraResultType.Uri : CameraResultType.Path,
saveToGallery: true,
// iOS特定配置
presentationStyle: isIOS ? 'fullscreen' : undefined,
// Android特定配置
direction: isIOS ? CameraDirection.Rear : CameraDirection.Front
};
}
// 处理不同平台的文件路径
function normalizeFilePath(path: string): string {
if (Capacitor.getPlatform() === 'android' && !path.startsWith('file://')) {
return `file://${path}`;
}
return path;
}
// 平台特定的媒体格式选择
function getPreferredAudioFormat(): string {
return Capacitor.getPlatform() === 'ios' ? 'mpeg4' : 'aac';
}
iOS和Android平台主要差异对比：
| 功能 | iOS平台 | Android平台 |
|---|---|---|
| 相机界面 | 系统原生相机应用 | 部分设备使用自定义相机界面 |
| 文件路径 | app私有目录，需通过API访问 | 可直接访问文件系统路径 |
| 权限处理 | 统一权限弹窗 | 分步骤权限申请 |
| 视频格式支持 | MOV, MP4 | MP4, 3GP |
| 音频格式支持 | M4A, WAV | AAC, AMR |
性能优化建议
多媒体处理通常是应用性能瓶颈，以下是一些优化建议：
- 图片处理优化
- 根据显示需求调整图片分辨率
- 使用渐进式加载和懒加载
- 实现图片缓存机制
// 图片缓存实现
const imageCache = new Map<string, string>();
async function loadImageWithCache(url: string, cacheKey: string): Promise<string> {
if (imageCache.has(cacheKey)) {
return imageCache.get(cacheKey)!;
}
// 实际加载图片
const img = new Image();
img.src = url;
await new Promise((resolve, reject) => {
img.onload = resolve;
img.onerror = reject;
});
// 缓存图片
imageCache.set(cacheKey, url);
// 限制缓存大小，超过时清理最早缓存
if (imageCache.size > 20) {
const oldestKey = imageCache.keys().next().value;
imageCache.delete(oldestKey);
}
return url;
}
-
音频/视频优化
- 根据网络状况选择合适的媒体质量
- 实现分段加载大视频文件
- 使用硬件加速编码/解码
-
内存管理
- 及时释放不再使用的媒体资源
- 避免同时加载多个大型媒体文件
- 使用Web Workers处理媒体数据
错误处理与调试
常见错误及解决方案
多媒体功能开发中常见的错误和解决方法：
| 错误类型 | 可能原因 | 解决方案 |
|---|---|---|
| 权限被拒绝 | 用户拒绝授予权限 | 引导用户到应用设置开启权限 |
| 相机启动失败 | 设备无相机或被占用 | 检查设备是否有相机，提示关闭其他使用相机的应用 |
| 媒体文件保存失败 | 存储空间不足 | 检查存储空间，提示用户清理空间 |
| 录音质量差 | 麦克风被遮挡或有干扰 | 提示用户检查麦克风，降低环境噪音 |
| 视频播放卡顿 | 视频分辨率过高或设备性能不足 | 降低视频分辨率，使用硬件加速 |
调试工具与技巧
Capacitor提供了多种调试多媒体功能的工具：
- Capacitor日志系统
import { Plugins } from '@capacitor/core';
const { Logger } = Plugins;
// 启用详细日志
Logger.setLevel({ level: 'DEBUG' });
// 记录媒体处理日志
Logger.debug({
tag: 'MediaProcessing',
message: `正在处理视频: ${videoPath}, 大小: ${fileSize}KB`
});
- Chrome DevTools远程调试
# 启用Android远程调试
npx cap open android
# 启用iOS远程调试
npx cap open ios
- 媒体文件检查工具
// 检查媒体文件信息
async function inspectMediaFile(path: string) {
try {
const fileInfo = await Filesystem.stat({
path: path,
directory: Directory.Data
});
console.log('文件信息:', {
size: `${(fileInfo.size / (1024 * 1024)).toFixed(2)}MB`,
modified: new Date(fileInfo.mtime).toLocaleString(),
path: fileInfo.uri
});
return fileInfo;
} catch (error) {
console.error('检查文件失败:', error);
return null;
}
}
总结与高级应用展望
功能回顾
本文详细介绍了Capacitor框架下多媒体处理的核心功能：
- 拍照功能：使用Camera插件实现拍照、图片选择和基础编辑
- 录音功能：通过Media插件录制、播放和管理音频文件
- 视频处理：结合Camera插件和ffmpeg.wasm实现视频录制与压缩
- 跨平台适配：处理iOS和Android平台差异，实现统一体验
高级应用场景
基于本文介绍的基础功能，可以扩展实现更复杂的多媒体应用：
- 社交媒体应用：结合拍照、录音和视频功能，实现类似Instagram的内容创作
- 视频会议应用：使用Capacitor结合WebRTC实现实时音视频通信
- AR/VR应用：结合相机和AR引擎实现增强现实体验
- 媒体编辑应用：集成高级编辑功能，实现专业媒体处理
未来发展趋势
随着Web技术和Capacitor框架的发展，多媒体处理将迎来更多可能性：
- WebAssembly加速：使用WASM技术提升媒体处理性能
- AI增强处理：集成机器学习模型实现智能媒体分析和编辑
- WebRTC集成：实现更强大的实时音视频通信能力
- PWA特性融合：结合Service Worker和Background Sync实现离线媒体处理
通过Capacitor框架，开发者可以充分利用Web技术栈的优势，同时获得接近原生的多媒体处理能力，为跨平台应用开发带来更多可能性。
附录：完整代码示例
多媒体处理综合示例
以下是一个集成了拍照、录音和视频功能的完整页面示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capacitor多媒体示例</title>
<style>
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
.section { margin-bottom: 30px; padding: 20px; border: 1px solid #eee; }
button { padding: 10px 20px; margin: 5px; cursor: pointer; }
#photo-container, #video-container { margin: 15px 0; min-height: 200px; }
img, video { max-width: 100%; margin: 10px 0; }
</style>
</head>
<body>
<div class="container">
<h1>Capacitor多媒体功能示例</h1>
<!-- 拍照功能区 -->
<div class="section">
<h2>拍照功能</h2>
<button id="take-photo-btn">拍摄照片</button>
<button id="pick-photo-btn">从相册选择</button>
<div id="photo-container"></div>
</div>
<!-- 录音功能区 -->
<div class="section">
<h2>录音功能</h2>
<button id="start-record-btn">开始录音</button>
<button id="stop-record-btn">停止录音</button>
<span id="record-status"></span>
<div id="audio-controls"></div>
</div>
<!-- 视频功能区 -->
<div class="section">
<h2>视频功能</h2>
<button id="record-video-btn">录制视频</button>
<button id="compress-video-btn">压缩视频</button>
<div id="video-container"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@capacitor/core@3/dist/capacitor.js"></script>
<script type="module">
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Media, MediaObject } from '@capacitor/media';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Permissions } from '@capacitor/permissions';
// 全局变量
let audioRecorder = null;
let currentVideoPath = null;
// 初始化所有事件监听
function initEventListeners() {
// 拍照按钮
document.getElementById('take-photo-btn').addEventListener('click', takePhoto);
document.getElementById('pick-photo-btn').addEventListener('click', pickPhoto);
// 录音按钮
document.getElementById('start-record-btn').addEventListener('click', startRecording);
document.getElementById('stop-record-btn').addEventListener('click', stopRecording);
// 视频按钮
document.getElementById('record-video-btn').addEventListener('click', recordVideo);
document.getElementById('compress-video-btn').addEventListener('click', () => {
if (currentVideoPath) compressVideo(currentVideoPath, 'compressed-video');
});
}
// 拍照功能实现
async function takePhoto() {
try {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
saveToGallery: true
});
displayPhoto(image.webPath);
} catch (error) {
console.error('拍照失败:', error);
}
}
// 从相册选择照片
async function pickPhoto() {
try {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri,
source: CameraSource.Photos
});
displayPhoto(image.webPath);
} catch (error) {
console.error('选择照片失败:', error);
}
}
// 显示照片
function displayPhoto(imageUrl) {
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
document.getElementById('photo-container').appendChild(imgElement);
}
// 录音功能实现
async function startRecording() {
try {
// 检查权限
const status = await Permissions.check({ name: 'microphone' });
if (status.state !== 'granted') {
const permResult = await Permissions.request({ name: 'microphone' });
if (permResult.state !== 'granted') {
alert('需要麦克风权限才能录音');
return;
}
}
audioRecorder = await Media.create({
path: `recording-${Date.now()}.m4a`
});
await audioRecorder.startRecord();
document.getElementById('record-status').textContent = '正在录音...';
} catch (error) {
console.error('开始录音失败:', error);
}
}
async function stopRecording() {
if (!audioRecorder) return;
try {
await audioRecorder.stopRecord();
document.getElementById('record-status').textContent = '录音已停止';
const audioInfo = await audioRecorder.getInfo();
createAudioPlayer(audioInfo.fullPath);
// 释放资源
await audioRecorder.release();
audioRecorder = null;
} catch (error) {
console.error('停止录音失败:', error);
}
}
// 创建音频播放按钮
function createAudioPlayer(audioPath) {
const audioContainer = document.createElement('div');
const audioElement = document.createElement('audio');
audioElement.controls = true;
audioElement.src = audioPath;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.onclick = () => {
audioContainer.remove();
// 这里可以添加删除文件的代码
};
audioContainer.appendChild(audioElement);
audioContainer.appendChild(deleteBtn);
document.getElementById('audio-controls').appendChild(audioContainer);
}
// 视频功能实现
async function recordVideo() {
try {
const video = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
saveToGallery: true,
mediaType: 'video'
});
displayVideo(video.webPath);
currentVideoPath = video.webPath;
} catch (error) {
console.error('录制视频失败:', error);
}
}
// 显示视频
function displayVideo(videoUrl) {
const videoElement = document.createElement('video');
videoElement.controls = true;
videoElement.src = videoUrl;
document.getElementById('video-container').appendChild(videoElement);
}
// 压缩视频（简化版，实际项目中需集成ffmpeg.wasm）
async function compressVideo(inputPath, outputName) {
alert('视频压缩功能需要集成ffmpeg.wasm，请参考本文档中的详细实现');
// 实际实现请参见前面的完整代码示例
}
// 初始化应用
document.addEventListener('DOMContentLoaded', initEventListeners);
</script>
</body>
</html>
结语
Capacitor为跨平台应用开发提供了强大的多媒体处理能力，通过统一的API接口和原生性能，大大降低了实现拍照、录音和视频编辑功能的复杂度。本文详细介绍了各项功能的实现方法，并提供了完整的代码示例和最佳实践建议。
随着移动应用对多媒体体验要求的不断提高，开发者还可以结合AI技术实现更高级的功能，如人脸识别、语音转文字、视频内容分析等。Capacitor的插件化架构使得集成这些高级功能变得简单，只需添加相应的插件即可扩展应用能力。
希望本文能够帮助开发者更好地利用Capacitor框架实现丰富的多媒体功能，为用户提供出色的应用体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
