多设备聊天室实战（三）：语音消息 + TV 展示 + 图片传输与结构优化 HarmonyOS 5.0.0 或以上

多设备聊天室实战（三）：语音消息 + TV 展示 + 图片传输与结构优化

适配版本：HarmonyOS 5.0.0 或以上
阅读目标：掌握分布式语音和图片消息的录制、上传、同步与 TV 展示方式，实现多媒体通信能力在多设备上的协同传输与渲染

---

🧠 一、核心能力列表

模块	实现目标
语音消息支持	录音、播放、分布式路径广播
图片传输	图片选择、压缩、本地存储路径同步
TV 渲染适配	语音消息 + 图片在 TV 上清晰展示
文件统一结构设计	图片/语音/文本消息统一结构，便于扩展与渲染

---

📦 二、消息结构扩展

interface ChatMessage {
  id: string
  groupId: string
  type: 'text' | 'image' | 'voice'
  content: string // 文本 or 文件路径
  mediaDuration?: number // 语音时长
  timestamp: number
  fromUser: string
  status: 'sent' | 'revoked'
}

---

🎤 三、语音消息录制与发送

使用 mediarecorder 模块录制音频

import mediarecorder from '@ohos.multimedia.mediarecorder'

const recorder = mediarecorder.getMediaRecorder()
await recorder.prepare({ audioSourceType: 1 })
await recorder.start()
// ... 停止录音
await recorder.stop()

const filePath = '/data/user/record/audio001.mp3'
kvStore.put(`group_${groupId}_msg_${msgId}`, JSON.stringify({
  id: msgId,
  type: 'voice',
  content: filePath,
  mediaDuration: 8,
  ...
}))

---

🖼️ 四、图片消息发送

1. 从本地选择图片
2. 压缩 + 存储至 /data/user/images
3. 发送同步路径至其他设备：

{
  id: 'img_001',
  type: 'image',
  content: '/data/user/images/img001.jpg',
  ...
}

---

📺 五、TV 大屏渲染逻辑建议

消息类型	展示方式
文本	字号放大，居中显示
图片	使用 <Image src> 原图展示，适配 TV 宽高
语音	显示带 icon 和时长的播放器 UI，支持点击播放

if (msg.type === 'voice') {
  AudioPlayer({ src: `distributed://${msg.deviceId}${msg.content}` })
}

---

🧩 六、统一渲染组件建议（多态渲染）

function renderMessage(msg: ChatMessage) {
  switch (msg.type) {
    case 'text':
      return Text(msg.content)
    case 'image':
      return Image({ src: `distributed://${msg.deviceId}${msg.content}` })
    case 'voice':
      return VoiceBubble({ path: msg.content, duration: msg.mediaDuration })
  }
}

📌 VoiceBubble 为自定义语音气泡组件，支持播放状态控制

---

🧠 七、语音/图片跨端同步说明

• 路径以 distributed://deviceId/xxx 拼接形式传输
• 接收端可直接使用系统支持的 distributed URI 加载
• 文件无需手动上传，HarmonyOS 会自动通过分布式 FS 拉取

---

✅ 八、小结

功能模块	实现说明
多媒体消息结构化设计	统一使用 type + content 字段支持文本/图片/音频
语音消息录制与发送	使用 mediarecorder 采集音频，路径同步 KVStore
图片选择与分发	图片压缩+路径同步，接收端使用分布式路径加载
TV 大屏展示优化	自适应分辨率与播放体验，语音/图片格式兼容