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

Question

你好！

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

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

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

我也在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 中没有问题

Answer 1

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

在主进程中，如果 OS 是 linux 运行命令

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

我在使用 AMD GPU 的 Linux Mint 上遇到过。您可以通过在 Electron 中打开 chrome://gpu/ 或在 Chrome/Chromium.

中进行比较，轻松查看是否启用了 GPU 合成

测试正常。

哟！ :)

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

Electron goes blank when audio element src attribute has changed in a React component and the window reloads on linux

javascript

reactjs

audio

electron

audio-streaming