Created
December 13, 2023 10:33
-
-
Save coderofsalvation/b70d635061220f2860f21eb69c8e5918 to your computer and use it in GitHub Desktop.
https://github.com/dmotz/trystero stripped zoom example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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