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 并加载本地文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)