the technology behind the immmr webapp and open immmr
HTML
CSS
JavaScript
Simple!
Right?
HTML: HyperText Markup Language
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>CSS: Cascading Style Sheets
h1 {
font-size: 30px;
color: black;
}
h2 {
font-size: 24px;
color: magenta;
transform: rotate(5deg);
}JavaScript
let kids = [
{
name: 'Antonina',
likes: ['Apple', 'Spinach']
},
{
name: 'Ella',
likes: ['Apple', 'Banana']
}
];
let likey = function (name, food) {
return kids
.find((k) => k.name === name)
.likes.includes(food);
};
likey('Antonina', 'Banana'); // falseClient side business, first time login
Hi immmr.com, wazzup?
Hi Browser, here's the HTML, CSS and JS you need
Here's my login data
app.immmr.com
Cool, talk to kandy & couch with these credentials now
Hi couch, please give me a complete copy of you
Sure, here's contacts and messages and stuff
Hi civey.com, wazzup?
Hi Browser, here's the HTML, CSS and JS you need
civey.com
Client side business, coming back
Hi immmr.com, wazzup?
Hey browser, I'm Service Worker, i already have what you need and i'm running locally :)
app.immmr.com
Hey browser, no need to ask couch again, i already stored contacts and messages and stuff locally
zzzzzz...*snore*
zzzzzz...*snore*
NOT
SO
FAST
Exposing browser / device capabilities to JavaScriptÂ
Browser asks user for permission to use these!
Web Sockets
Web Sockets
Bi-directional realtime client-server communication to send data
b@immmr
a@immmr
mysterious cloud
Hi server, i'm back
Cool a@immmr, here's some new messages
Hey, heres a message for b@immmr
Hey, a@immmr has this message for you
Cool, thanks
Hey a@immmr, b@immmr has received the msg
another mysterious cloud
Can I Use Web Sockets?
getUserMedia
Can I Use getUserMedia?
WebRTC
Web real-time communication between Browsers (humans might be involved)
b@immmr
a@immmr
Hey Server, i want to talk to b@immmr
Cool, let's do this
Hey you two, here's how you connect directly
Hey, a@immmr would like to talk, ok?
Hey you two, here's how you connect directly
WebSocket
WebRTC
getUserMedia
getUserMedia
stream
stream
RTC MediaStreamTrack
RTC MediaStreamTrack