RTCMultiConnection Send Text Message

RTCMultiConnection Send Text Message, auto open / join room

by Chris Vitalos

HTML

<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<div id='webrtc-media-control-section'>
  <button id="btn-open-room">Open Room</button>
  <button id="btn-join-room">Join Room</button>
  <hr>
  <button id="send-message-trigger" disabled>Send Message</button>
</div>
<div id='debug-console'>
</div>
<div id='webrtc-media-output-section'>
</div>

JavaScript

// WebRTC code

var connection = new RTCMultiConnection();

// this line is VERY_important
connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

// all below lines are optional; however recommended.

connection.session = {
  audio: false,
  video: true,
  data: true
};

connection.sdpConstraints.mandatory = {
  OfferToReceiveAudio: false,
  OfferToReceiveVideo: true
};

connection.onstream = function(event) {
  appendDiv('Caught onstream event');
  document.getElementById('send-message-trigger').disabled = false;
  document.getElementById('webrtc-media-output-section').appendChild(event.mediaElement);
};

connection.onopen = function(event) {
  appendDiv('Data Channel now opened with ' + event.userid);
  var localStream = connection.attachStreams[0];
};

connection.onmessage = function(event) {
  var str = event.data || event;
  appendDiv('I caught a message trigger on the Data Channel! -> ' + str);
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
  audio.play();
};

var predefinedRoomId = 'send-message-trigger';

// UI Code

document.getElementById('btn-open-room').onclick = function() {
  this.disabled = true;
  connection.open(predefinedRoomId);
  document.getElementById('btn-join-room').disabled = true;
  document.getElementById('send-message-trigger').disabled = false;

};

document.getElementById('btn-join-room').onclick = function() {
  this.disabled = true;
  connection.join(predefinedRoomId);
  document.getElementById('btn-open-room').disabled = true;
  document.getElementById('send-message-trigger').disabled = false;
};

document.getElementById('send-message-trigger').onclick = function() {
  var randomString = Math.random().toString(36).substring(7);
  appendDiv('send-message-trigger: ' + randomString);
  connection.send(randomString);
};

// JS code for Console substitute
var chatContainer = document.getElementById('debug-console');

function appendDiv(event) {
  var div =...