coderofsalvation/index.html

## index.html
<!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>
	<!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>