当 React 组件中的音频元素 src 属性发生更改并且在 linux 上重新加载窗口时，Electron 变为空白

Posted 2023-02-25

【中文标题】当 React 组件中的音频元素 src 属性发生更改并且在 linux 上重新加载窗口时，Electron 变为空白

【英文标题】：Electron goes blank when audio element src attribute has changed in a React component and the window reloads on linux

【发布时间】：2017-09-10 10:20:49

【问题描述】：

你好！

在我的 linux mint x64 中，Electron 与 React 一起使用时遇到了这个奇怪的问题。 在组件中有一个音频元素。我用一个名为 stream_url 的道具填充 scr 属性。一切都很好，曲目已加载并播放音乐。我换了一个轨道，没问题。

但是当页面重新加载时（只需点击默认菜单项重新加载），主窗口变为空白。我可以通过 devtools 看到 DOM 中的元素，并且在控制台中没有错误。此外，当我调整窗口大小时，我可以看到我的应用程序的背景，但没有其他内容..

据我所知，我必须清除一些东西..但我找不到什么。

我也注册了 main.js

process.on('uncaughtException', function (err) 
 console.log(err);
)

但没有异常发生

我的第一个想法是渲染器进程已经崩溃，所以我在主进程中注册了 crashed 事件

mainWin.webContents.on('crashed', event => 
 console.log('crashed');
)

但控制台上没有打印任何内容。

我尝试了https://github.com/justinmc/react-audio-player，结果相同..

我还在主进程中添加了 crashReported 模块

crashReporter.start(
 productName: 'name',
 companyName: 'company',
 submitURL: 'http://127.0.0.1:3001/submit',
 uploadToServer: true
);

在测试 nodejs 服务器中发送崩溃日志，但没有发布任何内容。

需要你的帮助:)

这里是代码

在父组件渲染中

    render() 
     return (
      <div className="app-content">
        <Header />
        <Main track=this.state.active_track />
        <AppPlayer track=this.state.active_track/>
      </div>
     )
    

AppPlayer 组件

    import config from './config';
    import React from 'react';

    export default class AppPlayer extends React.Component 
     constructor(props) 
      super(props);

      this.setAudiosrc = this.setAudioSrc.bind(this);
      this.play = this.play.bind(this);
      this.stop = this.stop.bind(this);
     

     setAudioSrc() 
       if (this.props.track && this.props.track.stream_url) 
        return this.props.track.stream_url + "?client_id=" + 
        config.client_id
       ;
       return null;
     

     play(e) 
      e.preventDefault();

      let playPromise = this.audioEl.play();
      if (playPromise !== undefined) 
       playPromise.then(() => ).catch(function(error) 
        throw new Error(error);
       );
      
     

     componentWillUnmount() 
      this.audioEl.pause();
     

     stop(e) 
      if (e) 
       e.preventDefault();
      
      this.audioEl.pause();
      this.audioEl.currentTime = 0;
     

     render() 
      return (
       <section className="current-track">
        <audio src=this.setAudioSrc() ref=(audioEl) => 
            this.audioEl = audioEl
          />
        <div className="current-track__actions hide">
          <a href="#" onClick=this.play>
            <i className="fa fa-play"></i>
          </a>
          <a href="#" onClick=this.stop>
            <i className="fa fa-stop"></i>
          </a>
        </div>
       </section>
      )
          
    

在 Windows 10 x64 中没有问题

【参考方案1】：

可以通过禁用 GPU 合成来避免该问题：

如果操作系统是 linux，则在主进程中运行命令

app.commandLine.appendSwitch('disable-gpu-compositing');

在带有 AMD GPU 的 Linux Mint 上发生在我身上。您可以通过在 Electron 中打开 chrome://gpu/ 或在 Chrome/Chromium 中进行比较来轻松查看是否启用了 GPU 合成。

测试正常。

哟！ :)