如何解决Angular中ArrayBuffer转Blob后音视频无法播放的问题？

通过NodeJS后端向Angular传输媒体数据，将ArrayBuffer转为Blob并使用URL.createObjectURL生成地址后，图片可正常展示，但音频和视频无法播放。相关代码如下：

组件处理数据代码 #

this.socket.on('nextQuestion', (data) => {
      switch(data.multimedia){
        case "image":
          const Iblob = new Blob([data.file], { type: 'image/*' });
          data.file = URL.createObjectURL(Iblob)
          break;
        case "audio":
          const Ablob = new Blob([data.file], { type: 'audio/*' });
          data.file = URL.createObjectURL(Ablob)
          break;
        case "video":
          const Vblob = new Blob([data.file], { type: 'video/*' });
          data.file = URL.createObjectURL(Vblob)
          break;
      }
this.question = data
}

HTML渲染代码 #

<div class="audio" *ngIf="pregunta.multimedia == 'audio'">
  <audio controls>
    <source [src]="pregunta?.file" type="audio/*">
  </audio>
</div>
<div class="video" *ngIf="pregunta.multimedia == 'video'">
  <video controls width="400" height="300" #videoPlayer></video>
</div>
<div class="image" *ngIf="pregunta.multimedia == 'image'">
  <img [src]="pregunta?.file" alt="" type="image/*">
</div>

尝试过的ElementRef设置视频源代码 #

playVideo(arrayBuffer: ArrayBuffer) {
    const blob = new Blob([arrayBuffer], { type: 'video/*' });
    const blobUrl = URL.createObjectURL(blob);
    const videoPlayer = this.videoPlayerRef.nativeElement;
    videoPlayer.src = blobUrl;
    videoPlayer.play();
  }

不想将Buffer转为Base64，担心影响画质，求解决办法。

排查方向与解决办法 #

1. 使用精确的MIME类型，避免通配符 #

浏览器对音视频的MIME类型识别比图片严格，audio/*、video/*这类通配符可能导致浏览器无法正确解析媒体编码，必须使用精确类型（比如audio/mpeg对应MP3，video/mp4对应H.264编码的MP4）。

• 后端需要返回媒体文件的精确MIME类型（可通过mime-types库获取），给数据增加mimeType字段。
• 前端修改Blob创建逻辑：

this.socket.on('nextQuestion', (data) => {
  // 优先用后端返回的精确MIME类型，兜底设置常用格式
  let exactMimeType = data.mimeType;
  switch(data.multimedia){
    case "image":
      exactMimeType = exactMimeType || 'image/png';
      break;
    case "audio":
      exactMimeType = exactMimeType || 'audio/mpeg';
      break;
    case "video":
      exactMimeType = exactMimeType || 'video/mp4';
      break;
  }
  const blob = new Blob([data.file], { type: exactMimeType });
  data.file = URL.createObjectURL(blob);
  this.question = data;
});

2. 确保Socket传输二进制数据的完整性 #

NodeJS后端通过Socket发送二进制数据时，可能存在格式转换问题，导致前端接收的ArrayBuffer损坏：

• 后端发送时，确保媒体数据以Buffer/ArrayBuffer格式传递，Socket.io需开启二进制支持（默认开启，但可显式配置）：

// NodeJS后端示例
const socket = io(server);
socket.on('connection', (client) => {
  // 读取媒体文件为Buffer
  const videoBuffer = fs.readFileSync('./test.mp4');
  client.emit('nextQuestion', {
    multimedia: 'video',
    file: videoBuffer,
    mimeType: 'video/mp4'
  });
});

• 前端初始化Socket时，显式开启二进制支持：

import { io } from 'socket.io-client';

this.socket = io('你的后端地址', {
  transports: ['websocket'],
  binary: true
});

3. 修复视频元素的数据源绑定 #

你的HTML中视频元素没有绑定[src]，即使通过ElementRef设置，也可能因时机问题失败：

• 修改HTML视频元素：

<div class="video" *ngIf="question.multimedia == 'video'">
  <video controls width="400" height="300" [src]="question?.file"></video>
</div>

• 若用ElementRef，需等待媒体加载完成再播放，避免因数据未就绪报错：

playVideo(arrayBuffer: ArrayBuffer, mimeType: string) {
  const blob = new Blob([arrayBuffer], { type: mimeType });
  const blobUrl = URL.createObjectURL(blob);
  const videoPlayer = this.videoPlayerRef.nativeElement;
  videoPlayer.src = blobUrl;
  // 等待元数据加载完成再执行播放
  videoPlayer.addEventListener('loadedmetadata', () => {
    videoPlayer.play().catch(err => console.error('播放失败:', err));
  });
}

4. 确认媒体编码的浏览器兼容性 #

即使Blob创建正确，若音视频使用了浏览器不支持的编码（比如VP9编码的MP4、某些小众格式），也无法播放。建议将媒体转成浏览器通用编码：

• 视频：H.264编码+MP4容器
• 音频：AAC编码+MP3/M4A容器

5. 及时释放ObjectURL避免内存泄漏 #

使用URL.createObjectURL生成的链接会占用内存，组件销毁时需手动释放：

ngOnDestroy() {
  if (this.question?.file) {
    URL.revokeObjectURL(this.question.file);
  }
}

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