Electron 加载远程 URL 并加载本地文件答案

【问题标题】：Electron load remote URL and load local fileElectron 加载远程 URL 并加载本地文件
【发布时间】：2018-03-21 05:51:02
【问题描述】：

我有一个用于艺术展览的视频装置，其中包含大型视频（数 GB）和一个在线托管的 web 应用程序。

由于我想在展览期间节省一些带宽，我想将视频打包到一个电子应用程序中，在启动时加载一次网页，然后从本地文件系统/打包的电子应用程序加载视频。强>

我已经实现禁用webSecurity（没关系，我旁边没有人运行这个应用程序）并且我已经在JS控制台中收到错误消息

GET file:///idle.mp4 net::ERR_FILE_NOT_FOUND.

我找不到引用本地文件的正确路径/文件夹，您有什么提示吗？我不能使用固定/绝对文件路径，因为在线服务器不知道本地文件路径..

我尝试将视频文件放入主文件夹和渲染器文件夹，但没有成功，只显示上面的错误消息。谢谢！

目前我在我的 webapp 中引用这样的视频：

<video id="id12">
  <source src="file:///ship.mp4" type="video/mp4"></source>
</video>

我的文件夹结构如下：

【问题讨论】：

我们无法知道您需要什么路径，除非您可以向我们展示您的文件夹结构，同时突出显示文件所在的位置和引用它的位置。此外，您禁用webSecurity 的决定违背了recommend security practices。你是唯一运行应用程序的人并不重要 - 你不应该这样做。
我已经更新了我的帖子 - 是的，您对最佳做法的看法是正确的，但对于这种情况（以及出于教育目的），我想以这种不安全的方式进行。

标签： javascript electron

【解决方案1】：

我自己找到了解决方案，我只需要在我的电子应用程序中创建一个 fileProtocol 拦截器：

function createMainWindow() {

  protocol.interceptFileProtocol('file', function(req, callback) {
    var url = req.url.substr(7);
    callback({path: path.normalize(__dirname + url)})
  },function (error) {
    if (error)
      console.error('Failed to register protocol')
  })
...

【讨论】：