Load an external URL and load a file from the local directory using Electron

For an upcoming art exhibition, I have a video installation that consists of large videos (several GBs) and an online hosted web application.

To conserve bandwidth during the exhibition, I am considering packaging the videos into an electron app. This way, the webpage can be loaded once during startup, and the videos can then be accessed from the local filesystem or the packaged electron app.

I have successfully disabled webSecurity (as this is a private application), but I am encountering an error message in the JavaScript console:

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

I am struggling to find the correct path or folder structure to reference the local files. Could you provide any guidance on how to achieve this? It is important to note that using a fixed or absolute filepath is not feasible since the online server does not have access to the local filepath.

I have attempted placing the video files in both the main and renderer folders, but it has not resolved the issue and the error message persists. Thank you for your help!

The current method of referencing the videos in my web application is as follows:

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

Here is the folder structure I am working with: https://i.sstatic.net/ZG7Wz.png

javascriptelectron

Answer №1

After some experimenting, I managed to solve the issue on my own. All it took was creating a fileProtocol interceptor within my electron application:

function initializeWindow() {

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error thrown when attempting to access properties of null values (Uncaught TypeError: Cannot read properties of undefined (reading 'map'))

import React, { useState, useEffect } from "react"; import { TaskLists } from "./TaskLists"; import { Daycard } from "./daycard"; import { getTasks, deleteTask } from "../api/task.api"; export function TaskManager() { const [tasks, setTasks] = useState( ...

javascriptreactjsstate

Tips on stopping the page from scrolling following an ajax request (return false not effective or potentially misplaced)

I am working on a project that involves displaying a tree with information from the Catalogue of Life, including details such as Kingdom, phylum, order, and more. My approach includes using ajax/php to interact with a mySQL database and javascript to handl ...

phpjavascriptajaxscroll

Developing a digital sound system using JavaScript

I am currently in the process of developing a music player. Below is my HTML code: <div id="main"> <div id="list" draggable="true"> </div> <div id="player"> <div id="buttons"> < ...

javascriptjquery

The jQuery .each function is malfunctioning specifically on Google Chrome browsers

I developed a web application that utilizes jQuery to automatically submit all forms on the page. The code snippet is as follows: $('form').each(function() { $(this).submit(); }); While this functionality works perfectly in Internet Explore ...

javascriptjqueryhtmlgoogle-chromesubmit

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js

Numerous sections with tabs on the webpage

I am in need of incorporating multiple tabbed sections on a single page, but unfortunately they are currently interconnected. When one tab is clicked, it impacts the others. To see this issue in action, you can visit: https://jsfiddle.net/pxpsvoc6/ This ...

javascriptjqueryhtmlcss

Is there a way for me to convert my (TypeScript Definition) .d.ts file into a (JavaScript) .js file?

It seems that there are plenty of guides available on converting a file from .js to .d.ts, but not the other way around. Specifically, I have some code in .d.ts format and I would like to convert it into JavaScript. Can anyone offer assistance with this t ...

javascriptreactjstypescriptleafletgatsby

Display and conceal individual divs using jQuery

Despite my lack of experience with jQuery, I am struggling with even the simplest tasks. The goal is to display/hide specific messages when certain icons are clicked. Here is the HTML code: <div class="container"> <div class="r ...

javascripthtmljquerycssjquery-events

The function .click does not function properly when used with an anchor element within a figure tag

In my JavaScript-loaded figure, there is an image description and two buttons. Sometimes the description contains a link with a fig attribute, like this: <a fig="allow" href="#tt5">[1]</a> If the anchor is not in a figure and has a fig attrib ...

javascriptjqueryhtmlcss

Looking for a drag-and-drop solution using Vanilla Javascript, no need for jQuery

Looking for assistance with creating a click-and-drag solution for a background image using Vanilla Javascript. I came across a jQuery solution on Codepen, but I need help translating it into Vanilla Javascript. Draggable.create(".box", { ...

javascripthtmljquerycssvue.js

Save the JSON response from JavaScript to a different file extension in a visually appealing layout

I've created a script to generate both the CSR and private key. The response displayed in the <textarea> is well-formatted with newline characters (assuming familiarity with the correct CSR/Private key format). However, I'm encountering a ...

javascriptjson

What is the method for extracting a list of properties from an array of objects, excluding any items that contain a particular value?

I have an array of objects, and I want to retrieve a list with a specific property from those objects. However, the values in the list should only include objects that have another property set to a certain value. To clarify, consider the following example ...

javascriptarraysreactjsreact-nativesorting

Display user account balances in real-time on the web browser by retrieving data from a secure private Ethereum

I am seeking to create a website that can display real-time updates of a user's wealth from a private Ethereum blockchain. Ongoing Issue (buggy) Currently, I have attempted to connect to a private Ethereum blockchain that is mining using a WebSocket ...

javascriptnode.jsexpressethereumweb3js

Retrieve data from the database at the optimal time interval, and halt the process once the data has been successfully received

I'm new to this, so please bear with me :) What is the easiest way to check for, fetch, and utilize newly received data from a MySQL database? The database is constantly updated through an external API. Ideally, I would like to capture the data as i ...

phpjavascriptjquerymysqllogic

Combining PHP code within JavaScript nested inside PHP code

I am currently facing an issue with my PHP while loop. The loop is supposed to iterate through a file, extract three variables for every three lines, and then use those variables to create markers using JavaScript. However, when I try to pass the PHP varia ...

javascriptphp

Adjusting the Connection header in a jQuery ajax request

I've been attempting to modify the Connection header using the code below, but so far, I haven't had any success jQuery.ajax({ url: URL, async: boolVariable, beforeSend: function(xhr) { xhr.setRequestHeader("Connection ...

javascriptjqueryxmlhttprequestjquery-1.3

What causes MySQL connection to drop unexpectedly in a Node.js environment?

Currently, I am working on developing a Facebook chatbot using Node.js and have implemented a MySQL Database to store data. Everything seems to be working fine, but I have come across a query - should I be closing the database connection? I attempted to c ...

javascriptmysqlnode.js

Issue with Angular 7 service worker caching audio files leads to range header problems in Safari browser

I am encountering an issue in my Angular application with the range request header for audio files when using Safari. When requesting audio from a server, the duration of the audio file is returned correctly. However, when requesting the audio from the ser ...

javascriptangularcachingaudioservice-worker

Passing PHP data to a JavaScript file using JSON格式

I have a query regarding how to pass php variables and send their values to a js file using json. Here is what I currently have: <?php $data = array('artist' => $artistname, 'title' => $songname); echo json_encode($data); // ...

javascriptphpjson

Avoiding default action on keyboard tab event resets cursor position while typing consecutively

Issue with cursor position resetting to start when tab is the last key pressed I am working on a chrome extension for Gmail using React and need to customize the behavior of the tab key. I have found that using preventDefault and stopImmediatePropagation ...

javascriptreactjseventsgmailpreventdefault