offline demo

[googlecreativelab]

offline demo

[HalfdanJ]

Hi,

1. We do not support offline loading of the frontend as it is now.
2. For websockets, we have also experience that local lan ip's can be tricky. Google Chrome requires the websocket to be hosted with SSL (so wss://) if its not localhost. I'm aware of 2 ways around this

• Make a ssh tunnel to the remote IP address forwarding the websocket port
• Host the websocket with a self-signede certificate (bit tricky to setup)

I recommend using the first solution. This is what we did in the coral sorter project: https://coral.ai/projects/teachable-sorter/#42-connect-your-raspberry-pis-camera-output-to-teachable-machine

[ppedro74]

HalfdanJ,

I have a secure websocket camera with a self signed certificate through a local certificate store plus includes subject alternate names and it works on chrome.
But I can't get it to work through TM demo and I believe the problem is in TM demo.

javascript console:
index.bundle.js:3179 Mixed Content: The page at 'https://teachablemachine.withgoogle.com/train/image?network=true' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://rpi-buster1:443/'. This request has been blocked; this endpoint must be available over WSS.
__connect @ index.bundle.js:3179
handleEvent @ index.bundle.js:2
__boundHandleEvent @ index.bundle.js:2
click @ index.bundle.js:3294
handleEvent @ index.bundle.js:2
__boundHandleEvent @ index.bundle.js:2
index.bundle.js:3179 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
at HTMLElement.__connect (https://teachablemachine.withgoogle.com/index.bundle.js:3179:2059)
at y.handleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:823386)
at HTMLElement.__boundHandleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:822749)
at HTMLElement.click (https://teachablemachine.withgoogle.com/index.bundle.js:3294:36490)
at y.handleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:823386)
at HTMLButtonElement.__boundHandleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:822749)
__connect @ index.bundle.js:3179
handleEvent @ index.bundle.js:2
__boundHandleEvent @ index.bundle.js:2
click @ index.bundle.js:3294
handleEvent @ index.bundle.js:2
__boundHandleEvent @ index.bundle.js:2

Initially i had a secure server running on a different port e.g. 8000 then i changed to 443 but still no luck.

it seems "ws://" is hardcoded in the js code:
this.__socket = new WebSocket("ws://" + this.address + ":" + this.port),

suggestion: would be nice to allow secure sockets on any port, maybe, the decision of ws vs wss should based on the hostname specified e.g. ws for localhost, 127/8 or ::1 and wss for all the other values.

[HalfdanJ]

Aaah I see. Ill take a look into this.

[HalfdanJ]

Good catch,

I'm going to do this instead

        let address = this.address;
        if (!address.match(/.+:\/\/.+/im)) {
            address = 'ws://' + address;
        }
        this.__socket = new WebSocket(address + ':' + this.port);

This should allow that if you specify a protocol it will use it, or default to ws:// if not.

[HalfdanJ]

The websocket fix has been pushed now.