Electron+Angular环境下流式播放URL中MKV视频文件求助

方案一：替换Electron的FFmpeg库以支持MKV解码 #

Electron默认自带的FFmpeg是精简版，移除了MKV等格式的解码支持。替换为全功能FFmpeg后，原生HTML5 video标签就能直接播放MKV：

• 下载对应Electron版本的全功能FFmpeg库：从Electron官方Releases中找到与当前版本匹配的ffmpeg-full-xxx.zip文件
• 替换Electron安装目录下的对应文件：Windows替换ffmpeg.dll，Mac替换libffmpeg.dylib，Linux替换libffmpeg.so
• Angular组件中直接使用video标签加载远程MKV：

<video controls>
  <source src="http://example.com/videos/test.mkv" type="video/x-matroska">
</video>

注意：打包Electron应用时，需将替换后的FFmpeg文件一同打包到应用目录，确保路径正确。

方案二：主进程本地代理+实时转码 #

如果不想替换FFmpeg库，可在Electron主进程搭建本地代理服务器，将远程MKV流实时转码为Chromium支持的WebM/MP4格式，再提供给Angular渲染进程：

1. 主进程安装依赖：

npm install fluent-ffmpeg axios

2. 主进程核心代码：

const { app, BrowserWindow } = require('electron');
const http = require('http');
const axios = require('axios');
const ffmpeg = require('fluent-ffmpeg');

let proxyServer;

function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: false, // 若Angular启用上下文隔离，需改用preload脚本传递数据
      nodeIntegration: true
    }
  });
  mainWindow.loadURL('http://localhost:4200'); // 你的Angular开发服务地址
}

app.whenReady().then(() => {
  // 启动本地代理服务器，端口设为3000
  proxyServer = http.createServer((req, res) => {
    const remoteMkvUrl = req.url.slice(1); // 截取请求URL中的远程MKV地址
    if (!remoteMkvUrl) {
      res.writeHead(400);
      res.end('缺少远程MKV地址');
      return;
    }

    // 请求远程MKV流
    const remoteStream = axios({
      method: 'get',
      url: remoteMkvUrl,
      responseType: 'stream'
    }).then(res => res.data);

    // 实时转码为WebM并返回给渲染进程
    ffmpeg(remoteStream)
      .format('webm')
      .videoCodec('libvpx')
      .audioCodec('libvorbis')
      .on('error', err => {
        console.error('转码失败:', err);
        res.writeHead(500);
        res.end('转码错误');
      })
      .pipe(res);
  });

  proxyServer.listen(3000, 'localhost', () => {
    console.log('代理服务器运行于 http://localhost:3000');
  });

  createMainWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    proxyServer.close();
    app.quit();
  }
});

3. Angular组件中使用代理URL播放：

<video controls>
  <source src="http://localhost:3000/http://example.com/videos/test.mkv" type="video/webm">
</video>

方案三：渲染进程本地转码（适合小体积文件） #

借助@ffmpeg/core在Angular渲染进程完成MKV转码，适合小体积视频：

1. 安装依赖：

npm install @ffmpeg/core @ffmpeg/ffmpeg

2. Angular组件代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

@Component({
  selector: 'app-mkv-player',
  template: `<video controls #player></video>`
})
export class MkvPlayerComponent {
  @ViewChild('player') playerRef!: ElementRef<HTMLVideoElement>;
  private ffmpeg = new FFmpeg();

  async ngAfterViewInit() {
    await this.ffmpeg.load();
    // 加载远程MKV文件
    await this.ffmpeg.writeFile('source.mkv', await fetchFile('http://example.com/videos/test.mkv'));
    // 转码为MP4
    await this.ffmpeg.exec(['-i', 'source.mkv', 'output.mp4']);
    // 生成播放URL
    const outputData = await this.ffmpeg.readFile('output.mp4');
    const blobUrl = URL.createObjectURL(new Blob([outputData], { type: 'video/mp4' }));
    this.playerRef.nativeElement.src = blobUrl;
  }
}

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