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

Electron load remote URL and load local file(Electron 加载远程 URL 并加载本地文件)

本文介绍了Electron 加载远程 URL 并加载本地文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a video installation for an art exhibition with big videos (several GBs) and a online hosted webapp.

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

Since I want to save some bandwith during the exhibition, I would like to package the videos into an electron app, load the webpage once during startup and load the videos from the local filesystem / packaged electron app.

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

I've already achieved to disable the webSecurity (it's fine, no one beside me runs this application) and I already get the error message in the JS console

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

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

I cannot find the right path/folder to reference the local file, do you have a hint for me? I can't use a fixed/absolute filepath, since the onlineserver has no knowledge about the local filepath..

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

I tried to put the video files into the main and renderer folders, but it doesn't work out and only shows the error message above. Thank you!

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

Currently I'm referencing the videos like this in my webapp:

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

我的文件夹结构如下所示:

My folder structure looks like following:

推荐答案

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

I found the solution by myself, I just had to create a fileProtocol interceptor in my electron app:

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')
  })
...

这篇关于Electron 加载远程 URL 并加载本地文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Electron 加载远程 URL 并加载本地文件

基础教程推荐