在电子中播放本地 mp4 文件 [英] Playing local mp4 file in electron

问题描述

我正在尝试开发一个小型应用程序，我首先通过 aperture 包捕获屏幕，然后尝试使用 video 标记将其显示在屏幕中.

I am trying to develop a small application in which I first capture screen via aperture package and then try to show it in the screen using video tag.

我通过以下方式截屏:

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 中有此文件的路径.是这样的:

Please ignore the mess. Aperture package writes captured video to disk and eventually, I have the path to this file in captureUrl. It is something like this:

/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4

我可以验证这个文件是否存在并且可以正常播放，如果我输入:file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4到谷歌浏览器地址吧.

I can verify that this file exists and plays just fine, if I type: file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4 to Google Chrome address bar.

所以我尝试使用这个地址作为我的 video 标签的来源，如下所示:

So I try to use this address as the source of my video tag like this:

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

抱怨文件不存在(404):

Which complains that file is not there (404):

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

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

And yes, it indeed tries to go to localhost:9080 because in this case it is my development server host and there is no such a file.

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

So I decide to add 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://"安全的东西或其他东西.

I wonder if I missed something that makes "file://" secure or something else.

我还考虑过通过fs"读取整个文件并通过 base64 将其提供为 data: 的视频，但由于该视频文件可能很大，我觉得我不应该这样做大大地.

I also thought about reading the whole file via "fs" and base64'ing it providing video as data: but as this video file might be large, I feel like I shouldn't go that way.

由于我是 electron 的新手，我希望我错过了一些基本的东西.任何帮助表示赞赏.谢谢！

As I am new to electron I hope I miss something basic. Any help is appreciated. Thanks!

推荐答案

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

It's nice to see a question from someone familiar here. :)

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

I'd suggest you to disable web security preference within BrowserWindow. Also there is an issue related to this topic.

这篇关于在电子中播放本地 mp4 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！