Electron+React前端应用如何加载本地大体积媒体资源

Electron作为桌面端应用框架，完全支持前端直接加载本地媒体文件，不需要走base64转码跨进程传输的方案，后者仅适合几MB级别的小文件，大文件场景下会造成内存飙升、IPC阻塞、播放卡顿等问题。

该方案不需要修改安全配置、不需要额外依赖，支持任意体积的本地视频文件，系统会自动以流的方式读取文件，不会把整个文件加载到内存，支持进度拖动、倍速播放等所有原生video能力。
实现步骤：

• 配置BrowserWindow基础参数，保持安全配置默认开启，不要为了省事直接关闭webSecurity：

// 主进程窗口创建代码
const { BrowserWindow } = require('electron')
const path = require('path')

const mainWindow = new BrowserWindow({
  width: 1280,
  height: 800,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false,
    // 保持webSecurity为默认true即可，不需要关闭
  }
})

• 主进程处理文件选择逻辑，拿到文件绝对路径后直接转为标准file协议URL，通过IPC返回给渲染层：

// 主进程IPC逻辑
const { ipcMain, dialog } = require('electron')
const { pathToFileURL } = require('url')

ipcMain.handle('dialog:selectVideo', async () => {
  const selectResult = await dialog.showOpenDialog(mainWindow, {
    properties: ['openFile'],
    filters: [{ name: '视频文件', extensions: ['mp4', 'mkv', 'mov', 'avi', 'flv', 'webm'] }]
  })
  if (selectResult.canceled || !selectResult.filePaths.length) return null
  const realFilePath = selectResult.filePaths[0]
  // 转换为标准file:// 格式URL，直接返回
  return pathToFileURL(realFilePath).toString()
})

• 在preload脚本中暴露IPC调用接口给前端：

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('desktopAPI', {
  selectLocalVideo: () => ipcRenderer.invoke('dialog:selectVideo')
})

• React组件中直接调用接口拿到URL，赋值给video标签的src属性即可：

// React组件代码
import { useState } from 'react'

function VideoPlayer() {
  const [videoSrc, setVideoSrc] = useState('')

  const handleSelectFile = async () => {
    const fileUrl = await window.desktopAPI.selectLocalVideo()
    if (fileUrl) setVideoSrc(fileUrl)
  }

  return (
    <div>
      <button onClick={handleSelectFile}>选择本地视频</button>
      {videoSrc && <video src={videoSrc} controls style={{ width: '100%' }} />}
    </div>
  )
}

export default VideoPlayer

该方案在Electron 20及以上版本可直接运行，不需要额外权限配置，加载10GB级别的视频文件内存占用也不会超过几百MB，和系统原生播放器的内存表现基本一致。

如果不想把用户本地真实文件路径暴露给前端逻辑，或者需要对视频资源做访问鉴权，可以注册自定义的流式协议专门处理媒体资源加载：

• 在app ready事件触发前注册自定义协议的权限：

const { protocol, app } = require('electron')
// 必须在app ready前调用
protocol.registerSchemesAsPrivileged([
  {
    scheme: 'app-media',
    privileges: {
      standard: true,
      secure: true,
      supportFetchAPI: true,
      stream: true, // 开启流支持，大文件必备
      bypassCSP: true
    }
  }
])

• app ready后注册协议的处理逻辑，直接返回本地文件流：

const { net } = require('electron')
app.whenReady().then(() => {
  protocol.handle('app-media', async (request) => {
    const requestUrl = new URL(request.url)
    const realFilePath = decodeURIComponent(requestUrl.pathname)
    // 这里可以加自定义校验逻辑，比如判断请求的文件是否在用户授权的目录下，防止任意文件读取
    // 直接返回文件流，不需要读取整个文件到内存
    return net.fetch(pathToFileURL(realFilePath).toString())
  })
  // 后续窗口创建逻辑不变
})

前端拿到的资源地址格式为app-media:///D:/edit/demo.mp4，不会暴露真实文件路径，加载性能和file协议完全一致。

• 绝对不要用base64、Uint8Array等形式把整个文件内容通过IPC传给渲染进程：base64会让文件体积膨胀33%，IPC传输GB级数据会阻塞主进程和渲染进程的事件循环，造成界面长时间无响应，且渲染进程解析完整数据后才会开始播放，不支持进度拖动。
• 不要用Blob URL加载GB级大文件：Blob对象会完整存在渲染进程内存中，4GB以上的Blob很容易触发渲染进程OOM崩溃。
• 如果需要做视频剪辑、帧提取等重计算逻辑，不要把计算逻辑放在渲染进程，放在主进程或者独立的utility进程中处理，渲染层只负责播放展示。

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