Skip to content

Instantly share code, notes, and snippets.

@coderofsalvation
Created December 13, 2023 10:33
Show Gist options
  • Save coderofsalvation/b70d635061220f2860f21eb69c8e5918 to your computer and use it in GitHub Desktop.
Save coderofsalvation/b70d635061220f2860f21eb69c8e5918 to your computer and use it in GitHub Desktop.
https://github.com/dmotz/trystero stripped zoom example
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#videos{
display:grid-auto-columns;
grid-column-gap:5px;
margin-bottom:15px;
}
#videos > video{
border-radius:7px;
display:inline-block;
background:green;
width:320px;
height:200px;
}
</style>
</head>
<body>
<div id="videos"></div>
<button id="leave">leave</button>
<script type="module">
import {joinRoom} from './trystero-torrent.min.js'
console.log("starting comms")
const config = {appId: 'my-zoom-app'}
const room = joinRoom(config, 'myroom')
const idsToNames = {}
const [sendName, getName] = room.makeAction('name')
// tell other peers currently in the room our name
let nick = prompt('enter nickname:')
sendName( nick )
// listen for peers naming themselves
getName((name, peerId) => (idsToNames[peerId] = name))
// this object can store audio instances for later
const peerAudios = {}
const peerVideos = {}
const videoContainer = document.getElementById('videos')
// get a local audio stream from the microphone
const selfStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: {
width: 320,
height: 240,
frameRate: {
ideal: 30,
min: 10
}
}
})
// send stream to peers currently in the room
room.addStream(selfStream)
// send stream to peers who join later
room.onPeerJoin( (peerId) => {
room.addStream(selfStream, peerId)
sendName( nick, peerId)
console.log(`${idsToNames[peerId] || 'an anonymous visitor'} joined`)
})
room.onPeerLeave( (peerId) => {
if( peerVideos[peerId] ) peerVideos[peerId].remove()
console.log(`${idsToNames[peerId] || 'a visitor'} left`)
})
// handle streams from other peers
room.onPeerStream((stream, peerId) => {
// create an audio instance and set the incoming stream
const audio = new Audio()
audio.srcObject = stream
audio.autoplay = true
// add the audio to peerAudio object if you want to address it for something
// later (volume, etc.)
peerAudios[peerId] = audio
})
room.onPeerStream((stream, peerId) => {
let video = peerVideos[peerId]
// if this peer hasn't sent a stream before, create a video element
if (!video) {
video = document.createElement('video')
video.autoplay = true
// add video element to the DOM
videoContainer.appendChild(video)
}
video.srcObject = stream
peerVideos[peerId] = video
})
document.querySelector('button#leave').addEventListener('click', room.leave )
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment