Crash with Electron/React stack on OS X

[Haraldson]

With the following [boiled down] code, I get a crash in Electron when the Stream component mounts;

import React, { PropTypes } from 'react'
import Player from 'wcjs-player'
import wcp from 'wcjs-prebuilt'

var Stream = React.createClass({
    propTypes: {
        stream: PropTypes.shape({
            id: PropTypes.string.isRequired,
            url: PropTypes.string.isRequired
        })
    },

    addPlayer() {
        this.player = new Player('#player-' + this.props.stream.id).addPlayer({
            autoplay: true,
            wcjs: wcp
        })

        this.player.vlc.play(this.props.stream.url) // Same result with this.player.addPlaylist(...)
    },

    componentDidMount() {
        this.addPlayer()
    },

    render() {
        return (
            <div className='stream'>
                <div id={'player-' + this.props.stream.id}></div>
            </div>
        )
    }
})

export default Stream

The crash comes with no error messages, but the entire app disappears (only the Electron frame with white/no content is left) and ‘DevTools was disconnected from the page.’ As for that last DevTools error, I’ve read that this happens often with infinite loops, and if so, that infinite loop would be somewhere in the wcjs-player code as this doesn’t occur until the player is attempted initialized.

If I import jQuery and console.log($('#player-' + this.props.stream.id')) within the componentDidMount method, it finds the player element just fine.

Any tips on this? I’ve been stuck for days and haven’t really found any helpful resources.

[jaruba]

what electron version? did you try it with the electron version directly and without react to get a working version first?

[Haraldson]

Hi @jaruba!

I’m using electron-prebuilt @ ^1.2.8.

I did as you suggested, and removed all my React stuff from my index.js and added

import Player from 'wcjs-player'
import wcp from 'wcjs-prebuilt'

document.addEventListener('DOMContentLoaded', () => {
    let player = new Player('#player').addPlayer({
        autoplay: true,
        wcjs: wcp
    })

    player.addPlaylist('http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4');
})

The HTML’s body contains the <div id="player"></div>.

I still get the very same crash.

[jaruba]

I think I know what this is, check out these lines: https://github.com/jaruba/node-vlcPlayer-demo/blob/master/app.js#L1-L2

You need to set the path to the plugins folder of the VLC package that is included in your app. It's best to set it in your IPC file (not index.js) on the very first lines. This is an Electron specific issue and solution.

Make sure to also console.log the plugin path that you're setting if it's still not working, to be sure it is correct.

[Haraldson]

Not entirely sure how I would translate what seems like Windows specific code lines to my OS X environment, but I tried adding

if(process.platform == 'darwin')
    process.env['VLC_PLUGIN_PATH'] = require('path').join(__dirname, 'node_modules/wcjs-prebuilt/bin/lib/vlc/plugins')

as that’s the only plugins folder I can find that would kind of ‘fit the bill’. Same crash.

[jaruba]

right, i just noticed that it's on OSX, it is indeed a windows specific issue, but i have to run now.. This is a WebChimera.js loading issue, try to see if there's anything helpful for your case at https://github.com/RSATom/WebChimera.js/issues in the meanwhile

[Haraldson]

Didn’t find anything there, but I’m not too familiar with WebChimera and all the related libraries, so I might’ve missed something relevant.

I’ve also tried upgrading dependencies, so now I’m running on the WebChimera.js_v0.2.6_electron_v1.3.1_VLC_v2.2.4_x64_osx.tar.gz matching environment: continuing for more recent release one.

"wcjs-prebuilt": {
  "runtime": "electron",
  "runtimeVersion": "v1.3.1",
  "version": "v0.2.6"
}

It didn’t help, though.

[RSATom]

@Haraldson, did you try https://github.com/RSATom/wcjs-ugly-demo ? if yes, is it working for you?

[Haraldson]

@RSATom Got the ugly demo working. Not sure what to make of it.

[RSATom]

Ok, this means it's not some global problem with WebChimera.js.node module. Looks like combinations of some factors. All I can recommend at the moment - try disable some parts of code, to find out what exactly breaks the things. It worth start from disabling WebChimera.js callbacks one by one (maybe just by commenting it in wcjs-player sources)

The main problem with Mac OS X is I and Alexandru don't have any real mac device. So it take too much time for us to fix even very minor issues... so any help will be appreciated...

[Haraldson]

So I attempted to close in on how it’s done in wcjs-ugly-demo, and ended up with this code;

import React, { PropTypes } from 'react'
import wcjs from 'webchimera.js'
import renderer from 'webgl-video-renderer'

var Stream = React.createClass(
{
    propTypes: {
        stream: PropTypes.shape({
            id: PropTypes.string.isRequired,
            url: PropTypes.string.isRequired
        })
    },

    addPlayer() {
        let canvas = document.getElementById('player-' + this.props.stream.id)
        let renderContext = renderer.setupCanvas(canvas)
        let player = wcjs.createPlayer()

        player.onFrameReady = (frame) => {
            renderContext.render(frame, frame.width, frame.height, frame.uOffset, frame.vOffset)
        }

        player.play('rtmp://video1.earthcam.com:1935/earthcamtv/Stream1')
    },

    componentDidMount() {
        this.addPlayer()
    },

    render() {
        return (
            <div className='stream'>
                <canvas id={'player-' + this.props.stream.id}></canvas>
            </div>
        )
    }
})

export default Stream

I also copied the exact same webchimera.js folder that I used to get wcjs-ugly-demo working into my project’s node_modules.

Same error, at least visually/perceived; when it tries to .createPlayer(), I get the whiteout.

Then I tried upgrading electron-prebuilt yet again, to 1.3.3 and go back to the previous code, still the same thing.

I would love to be more of help here, but I don’t get any error messages, no nothing. Any pointers on how I could possibly get more info about what goes wrong?

[Haraldson]

I’m basing my project off of electron-react-boilerplate, by the way. Do you guys see anything there that might interfere?

Oh, and I’m also depending on this fork of Webpack’s node-loader in order to be able to load node_modules/wcjs-prebuilt/bin/WebChimera.js.node.

[Haraldson]

I feel a bit stupid now, I’ve kind of got it loading alright, at least the crash is gone.

What I did was to add this second line to the Webpack config’s externals hash;

externals: {
    'wcjs-player': 'commonjs wcjs-player',
    'wcjs-prebuilt': 'commonjs wcjs-prebuilt'
}

Only the first one was obviously not enough.

Sorry for wasting your time, but I’m sure I’ll be back with more questions soon enough... :)

[RSATom]

ah... webpack... yes, WebChimera.js.node and all libvlc related files should not be placed to any sort of archive, since it's binary executable files...

[Haraldson]

I think Webpack is common and popular enough to warrant including an example setup in this repo, though. Thoughts?

[RSATom]

Yes, you are right. Unfortunately I didn't work with webpack. But if you will be so kind and create some demo - I will be glad include link to it to WebChimera.js's readme. Or you could create some article in project wiki and I could add it to readme too.

[Haraldson]

I added a wiki page, but I’m no Webpack or WebChimera guru, so please edit it to make it clearer, ie. the reason behind why the executables can’t be loaded ‘normally’, and exactly which modules this apply to.

[RSATom]

Thank you!

[RSATom]

I've added link to readme. Thanks!