jQuery toggleClass example

Toggle class name on click in jQuery

by thammi

HTML

<script src="https://cdn.jsdelivr.net/npm/rtc-lib@0.5.4/dist/bundle/rtc.dep.min.js"></script>
<div>
  Please note that you might connect to strangers when using simple room names.<br/>
  <input placeholder="Room name ..." id="room_name">
  <button onClick="connect()">Connect</button>
</div>
<div>
  Self:<br/>
  <video autoplay muted />
</div>
<div id="peers">
  Peers:<br/>
</div>

CSS

video {
  width: 320px;
  height: 240px;
  border: 1px solid black;
}

div {
  margin-bottom: 1em;
}

JavaScript

async function connect() {
  // get room name from input
  const nameInput = $('#room_name');
  const roomName = "lqkmwe_" + nameInput.val();
  
  // make sure we don't connect twice
  nameInput.prop('disabled', true);
  $('button').prop('disabled', true);

  // connnect to a public signaling server using the given name
  const channel = new rtc.WebSocketChannel("wss://easy.innovailable.eu/" + encodeURI(roomName));
  const signaling = new rtc.MucSignaling(channel);

  // use a poublic stun server
  const options = {
    stun: "stun:stun.innovailable.eu",
  }

  // create a room
  const room = new rtc.Room(signaling, options);

  try {
 	  // create a local stream from the users camera
  	const stream = await room.local.addStream({ video: true, audio: true });

    // display that stream
    const ve = new rtc.MediaDomElement($('video')[0], stream);
  } catch(err) {
    alert("Unable to get stream, please give permission. You might have to go into settings if you denied before.");
    return;
  }

  // get notified whenever we meet a new peer
  room.on('peer_joined', function(peer) {
    // create a video tag for the peer
    const view = $('<video autoplay>');
    $('#peers').append(view);
    const ve = new rtc.MediaDomElement(view[0], peer);

    // remove the tag after peer left
    peer.on('left', function() {
      view.remove();
    });
  });

  // join the room
  try {
  	await room.connect();
  } catch(err) {
  	alert("Unable to join room: " + err.message)
  }
}