Electron：使用自定义协议从文件系统中删除本地视频

s2j5cfk0 于 8个月前发布在 Electron

关注(0)|答案(1)|浏览(92)

我试图使用electron来构建一个简单的视频显示应用程序。然而，我一直在尝试使用适当的registerSchemesAslogged方法在渲染器中显示视频时遇到了巨大的困难。我目前没有在控制台中显示与net无法找到文件有关的错误，所以我觉得我有正确的，但我在渲染器线程上得到的是黑屏。
如果你能快速查看一下我的代码和日志输出，以确保我没有遗漏一些明显的东西，那将是一个很大的帮助。
主要.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}`);
  });
});

字符串
App.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)

型
再次感谢提前。

electron

来源：https://stackoverflow.com/questions/76965217/electron-displaying-a-local-video-from-filesystem-with-custom-protocol

1条答案

按热度按时间

unhi4e5o1#

在过去的3天里，在阅读了十几页，github问题和文档之后，我终于弄清楚了如何使其工作。您需要在创建自定义协议时将bypassCSP and stream指定为true。
基于electron-quick-start项目，我创建了一个自定义的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>

型

赞(0）回复(0）举报 8个月前

我来回答

Electron：使用自定义协议从文件系统中删除本地视频

1条答案

相关问题

热门标签

最新问答