Here are the set of web frameworks and APIs that power virtual performing arts venue http://elektron.live/ and other creative projects made by the elektron residence program.
The key pieces of the platform are:
It is the main entrypoint to the platform, it is used both for public events and residence experiments. Implemented in VueJS 3 with no Javascript compiling / bundling.
Link: https://elektron.live
Github: https://github.com/elektronstudio/live
You can set up your own experimentation space to use any kind of indentifier in the URL, for example: https://elektron.live/mysecretspace
Implemented in ReactJS.
Link: https://elektron-foyer.netlify.app/
Github: https://github.com/elektronstudio/foyer
Implemented in VueJS and sharing a lot of code with elektron.live. Will be intergrated into the elektron.live in the future.
Link: https://elektron-foyer2.netlify.app/
Codesandbox: https://codesandbox.io/s/github/elektronstudio/foyer2?file=/index.js
Github: https://github.com/elektronstudio/foyer2
Github: https://github.com/elektronstudio/ws
Server instance: wss://ws-fggq5.ondigitalocean.app
The heart of the elektron.live platform is a Websocket server where clients are sending messages to the server and the server is sending messages back to all other connected clients.
This allows low-bandwith, real-time, two-way syncronizaton of data between each client but is not suitable to high-bandwidth video transmissions
The messages contents can be:
- a chat message
- a user location in X Y Z coordinates
- an encoded image file from the user webcam
- any data, really
There is also a web streaming platform where a client can stream it's video and audio feed to a streaming server and all the other clients will receive the video as a HSL (MP4 for streaming) feed.
Video streaming is high-bandwith media channel with noticable delay (starting from ~7 seconds until ~30 seconds) so it's not great for two-way realtime communication but great for one-side communication with large audiences. There can be exceptions of course, audience <-> performer interaction could work in some cases.
Parner server has ~30 sec latency but large audience support.
We use https://babahh.com streaming services that maintain a custom https://flussonic.com server instance.
We are using the same streamkey for all the URLS and links. Here is the example where streamkey is residence. Note that only one user can upstream at a time, so it's recommended to use a unique stream key for your project.
rtmp://o1.babahhcdn.com:1935/bb1150-lo/ User: elektron Pass: (ask pass from @laid / @taavet) Example stream key: residence
Example stream key: residence
rtmp://o1.babahhcdn.com:1935/bb1150-lo/residence
Custom server has ~7 sec latency but small audience support.
Our custom serveris based on Docker image https://github.com/alfg/docker-nginx-rtmp
Stream URL: rtmp://165.227.149.4:1935/stream
Streamkey: residence
Example stream key: residence
https://stream.elektron.studio:8443/live/residence.m3u8
https://elektron.live/residence
There is also a server for server-side audience image analysis and statistics gathering at https://elektron.live/area51/ (source code not yet public)
There is also an experimental WebRTC-based video conferencing server in the works at https://elektron.live/videotest (the rightmost link).
It is based on https://openvidu.io/ Docker image and currently hosted at https://elektron.studio.
There are code examples that connect to the elektron.live messaging server:
Download: https://github.com/elektronstudio/example_max/archive/master.zip
Github: https://github.com/elektronstudio/example_max
Codesandbox demo: https://codesandbox.io/s/github/elektronstudio/example_p5/tree/master?file=/index.js
Github: https://github.com/elektronstudio/example_p5
Codesandbox demo: https://codesandbox.io/s/github/elektronstudio/example_tonejs?file=/index.js
Github: https://github.com/elektronstudio/example_tonejs
Codesandbox demo: https://codesandbox.io/s/github/elektronstudio/example_vue