macos - 在 Electron 中播放本地 mp4 文件

Question

我正在尝试开发一个小应用程序，其中我首先通过 aperture 捕获屏幕然后尝试使用 video 在屏幕上显示它标签。

我通过以下方式捕获屏幕:

import apertureConstructor from 'aperture';
const aperture = apertureConstructor();

const options = {
  fps: 30
};

(async () => {
  await aperture.startRecording(options);
  setTimeout(async () => {
    this.captureUrl = await aperture.stopRecording();
  }, 3000)
})();

请忽略困惑。 Aperture包将捕获的视频写入磁盘，最终，我在 captureUrl 中有此文件的路径.它是这样的:
/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4
如果我输入: file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4，我可以验证这个文件是否存在并且播放得很好到谷歌浏览器地址栏。

所以我尝试用这个地址作为我的 video的来源像这样标记:

 <video control autoplay>
   <source src="/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-8004145a2o4gugbVV.mp4" type="video/mp4">
 </video>

哪个提示文件不存在(404):

GET http://localhost:9080/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-8004145a2o4gugbVV.mp4 404 (Not Found)

是的，它确实试图转到 localhost:9080因为在这种情况下它是我的开发服务器主机并且没有这样的文件。

所以我决定添加 file:// ...

<video controls autoplay>
  <source src="file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-8004145a2o4gugbVV.mp4" type="video/mp4">
</video>

这次它说:

Not allowed to load local resource: file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-80041e3SlBZUNphLM.mp4

:/

我想知道我是否错过了使“file://”安全的东西或其他东西。

我还考虑过通过“fs”和 base64 读取整个文件，它提供的视频为 data:但由于这个视频文件可能很大，我觉得我不应该走那条路。

因为我是新来的 electron我希望我错过了一些基本的东西。任何帮助表示赞赏。谢谢!

Answer 1

很高兴看到这里熟悉的人提出问题。 :)

我建议您在 BrowserWindow 中禁用网络安全首选项。还有一个 issue与此主题相关。