Is it possible to access the electron page remotely?

[ochompsky]

I'm thinking specifically for a use case for a Tesla, which doesn't have a screen input but it does have a browser.

I know I need to serve up an HTTP page that connects to the websocket created by the app but im not entirely sure what to do with the websocket once connected. I'm guessing I need to run this react app somehow.

I know another option is a browser based VNC client but that's a performance hit.

[rhysmorgan134]

unfortunately not, it needs access to electron renderer to communicate with the back end. It is possible to use the react carplay component from this library though, however you will have to handle sending the events below to the backend, and then from there to node-carplay, and also sending the h264 stream from node-carplay to the front end

import Carplay from "./Carplay";

class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            status: false
        }
        this.ws = new WebSocket('ws://localhost:3001');
        this.ws.binaryType = 'arraybuffer';
    }

    render() {

        let settings = {
            fps: 60
        }

        const touchEvent = (type, x, y) => {
            console.log("touch event type: ", + type + " x: " + x + " y:" + y)
        }

        const changeSetting = (k, v) => {
            console.log("setting: " + k + " change to: " + v)
        }

        const reload = () => {
            console.log("reload request")
        }

        const toggleCarplay = () => {
            if(this.state.status) {
                this.setState({status: false})
            } else {
                this.setState({status: true})
            }
        }

        return (
            <div className="App" style={{height: '100%'}}>
                <button onClick={toggleCarplay}>openCarplay</button>
                <Carplay
                    settings={settings}
                    status={this.state.status}
                    touchEvent={touchEvent}
                    changeSetting={changeSetting}
                    reload={reload}
                    ws={this.ws}
                    type={'ws'}
                />
            </div>
        );
    }

}

export default App;```