Mic*_*ael 2 javascript file node.js electron
我正在尝试使用电子构建一个简单的视频显示应用程序。然而，我在尝试使用正确的 registerSchemesAsPrivileged 方法让视频显示在渲染器中时遇到了巨大的困难。我目前在控制台中没有显示与网络无法找到该文件相关的错误，所以我觉得我的设置是正确的，但我在渲染器线程上看到的是黑屏。
如果您可以快速查看我的代码和日志输出，以确保我没有遗漏一些明显的内容，那么这将是一个很大的帮助。浏览器窗口中的开发人员工具中也没有显示任何内容
main.ts 的片段
import path from 'path';
import { app, BrowserWindow, shell, ipcMain, protocol,net } from 'electron';
import { autoUpdater } from 'electron-updater';
import log from 'electron-log';
import MenuBuilder from './menu';
import { resolveHtmlPath } from './util';
import fs from 'fs'
protocol.registerSchemesAsPrivileged([
{
scheme: 'appfile',
privileges: {
standard: true,
secure: true,
supportFetchAPI: true,
bypassCSP: true,
},
},
]);
app.whenReady().then(() => {
protocol.handle('appfile', (request) => {
// Get the file path from the request url
const filePath = request.url.replace('appfile://', '');
// Resolve the file path to the absolute file path
//const absoluteFilePath = path.resolve(filePath);
// Fetch the file
console.log(filePath);
return net.fetch(`file:///${filePath}`);
});
});
应用程序.tsx：
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import icon from '../../assets/icon.svg';
import './App.css';
import { useState, useEffect } from 'react';
function Hello() {
//const [videoSource, setVideoSource] = useState<string | null>(null);
return (
<body>
<video id="videoPlayer" width="100%" height="100%" autoPlay muted loop>
<source src="appfile:///home/user/Desktop/project/videos/video1.mp4" />
</video>
</body>
);
}
export default function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Hello />} />
</Routes>
</Router>
);
}
通常会显示错误的控制台输出片段（包括文件路径的控制台日志）：
home/user/Desktop/project/videos/video1.mp4
[14091:0823/181240.250752:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[14091:0823/181240.250873:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)
再次提前致谢。
小智 7
在过去 3 天阅读了数十页、github 问题和文档后，我终于弄清楚了如何实现这一点。您需要在创建自定义协议时指定bypassCSP 和stream 。true
基于电子快速启动项目，我创建了一个自定义animation://协议来从文件系统（）中读取/tmp/video.mp4。
main.js：
// Modules to control application life and create native browser window
const { app, protocol, net, BrowserWindow } = require('electron')
const path = require('node:path')
protocol.registerSchemesAsPrivileged([
{
scheme: 'animation',
privileges: {
bypassCSP: true,
stream: true,
}
}
])
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
protocol.handle('animation', function (request) {
return net.fetch('file://' + request.url.slice('animation://'.length))
})
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
<div class="video-wrapper">
<video autoPlay loop muted>
<source src="animation:///tmp/video.mp4" type="video/mp4"/>
</video>
</div>
</body>
</html>