opentok 3.1.0 → 4.0.0

data/sample/Broadcast/public/css/sample.css

@@ -0,0 +1,64 @@
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+  padding-bottom: 20px;
+  background-color: #F2F2F2;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove padding from wrapping element since we kick in the grid classes here */
+  .body-content {
+    padding: 0;
+  }
+}
+
+#streams {
+  background-color: gray;
+  width: 320px;
+  height: 180px;
+}
+
+#streams > div {
+  width: 20%;
+  height: 20%;
+  float: left;
+  position: relative;
+  cursor: pointer;
+}
+
+#streams.vertical > div {
+  left: 0px;
+  clear: left;
+  padding: 0px;
+}
+
+#streams .focus {
+  position: relative;
+  top: 0;
+  left: 0;
+  margin-top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#streams.vertical .focus {
+  padding: 0;
+  left: 0;
+  margin: 0;
+  left: 20%;
+  height: 100%;
+  width: 80%;
+}
+
+.stop {
+  display: none;
+}
+
+.bump-me {
+  padding-top: 40px;
+}
+
+.help-block {
+  font-weight: bold;
+}

data/sample/Broadcast/public/js/host.js

@@ -0,0 +1,185 @@
+/* global OT, apiKey, sessionId, initialBroadcastId, token, $, initialLayout, focusStreamId */
+/* eslint-disable no-console */
+
+var session = OT.initSession(apiKey, sessionId);
+var publisher = OT.initPublisher('publisher', {
+  insertMode: 'append',
+  width: '100%',
+  height: '100%',
+  resolution: '1280x720'
+});
+var broadcastId = initialBroadcastId;
+var layout = initialLayout;
+
+function disableForm() {
+  $('.broadcast-options-fields').attr('disabled', 'disabled');
+  $('.start').hide();
+  $('.stop').show();
+}
+
+function enableForm() {
+  $('.broadcast-options-fields').removeAttr('disabled');
+  $('.start').show();
+  $('.stop').hide();
+}
+
+function positionStreams() {
+  var $focusElement;
+  $focusElement = $('.focus');
+  if ($('#streams').hasClass('vertical')) {
+    $('#streams').children().css('top', '0');
+    $focusElement.appendTo('#streams');
+    $focusElement.css('top', (-20 * ($('#streams').children().size() - 1)) + '%');
+  }
+  else {
+    $focusElement.prependTo('#streams');
+    $focusElement.css('top', '0');
+  }
+}
+
+function setFocus(focusStreamId) {
+  var $focusElement;
+  var otherStreams = $.map($('#streams').children(), function (element) {
+    var streamId = (element.id === 'publisher' && publisher.stream) ? publisher.stream.streamId
+      : element.id;
+    if (streamId !== focusStreamId) {
+      $('#' + element.id).removeClass('focus');
+      return streamId;
+    }
+    return null;
+  });
+
+  $.post('/focus', {
+    focus: focusStreamId,
+    otherStreams: otherStreams
+  }).done(function () {
+    console.log('Focus changed.');
+  }).fail(function (jqXHR) {
+    console.error('Stream class list error:', jqXHR.responseText);
+  });
+
+  $('.focus').removeClass('focus');
+  $focusElement = (publisher.stream && publisher.stream.streamId === focusStreamId) ?
+    $('#publisher') : $('#' + focusStreamId);
+  $focusElement.addClass('focus');
+  session.signal({
+    type: 'focusStream',
+    data: focusStreamId
+  });
+  positionStreams();
+}
+
+function createFocusClick(elementId, focusStreamId) {
+  $('#' + elementId).click(function () {
+    setFocus(focusStreamId);
+  });
+}
+
+if (initialLayout === 'verticalPresentation') {
+  $('#streams').addClass('vertical');
+}
+
+if (initialLayout === 'verticalPresentation') {
+  $('.start').hide();
+  $('.stop').show();
+}
+
+session.connect(token, function (err) {
+  if (err) {
+    alert(err.message || err); // eslint-disable-line no-alert
+  }
+  session.publish(publisher);
+});
+
+publisher.on('streamCreated', function () {
+  createFocusClick(publisher.id, publisher.stream.streamId);
+  positionStreams();
+});
+
+session.on('streamCreated', function (event) {
+  var subscriber;
+  var streamId = event.stream.streamId;
+  var $streamContainer = $('<div></div>');
+  $streamContainer.attr('id', event.stream.id);
+  $('#streams').append($streamContainer);
+  subscriber = session.subscribe(event.stream, streamId, {
+    insertMode: 'append',
+    width: '100%',
+    height: '100%'
+  });
+
+  if (streamId === focusStreamId) {
+    setFocus(streamId);
+  }
+  createFocusClick(subscriber.id, streamId);
+  positionStreams();
+});
+
+session.on('streamDestroyed', function (event) {
+  var $streamElem = $('#' + event.stream.id);
+  if ($streamElem.hasClass('focus')) {
+    setFocus(publisher.stream.streamId);
+  }
+  $streamElem.remove();
+  positionStreams();
+});
+
+$(document).ready(function () {
+  $('.start').click(function () {
+    var options = {
+      maxDuration: $('input[name=maxDuration]').val() || undefined,
+      resolution: $('input[name=resolution]:checked').val(),
+      layout: {
+        type: layout
+      }
+    };
+    disableForm();
+    $.post('/start', options)
+      .done(function (response) {
+        console.log('start success.');
+        broadcastId = response.id;
+        setFocus(publisher.stream.streamId);
+      })
+      .fail(function (jqXHR) {
+        console.error(jqXHR.responseText);
+        enableForm();
+      });
+  }).prop('disabled', false);
+  $('.stop').click(function () {
+    $.get('stop/' + broadcastId)
+      .done(function () {
+        console.log('stop success.');
+        broadcastId = null;
+        enableForm();
+      })
+      .fail(function (jqXHR) {
+        console.error(jqXHR.responseText);
+      });
+  });
+  $('.toggle-layout').click(function () {
+    if ($('#streams').hasClass('vertical')) {
+      $('#streams').removeClass('vertical');
+    }
+    else {
+      $('#streams').addClass('vertical');
+    }
+
+    positionStreams();
+
+    layout = $('#streams').hasClass('vertical') ? 'verticalPresentation'
+      : 'horizontalPresentation';
+
+    $.post('broadcast/' + broadcastId + '/layout', {
+      type: layout
+    }).done(function () {
+      console.log('Broadcast layout updated.');
+    }).fail(function (jqXHR) {
+      console.error('Broadcast layout error:', jqXHR.responseText);
+    });
+
+    session.signal({
+      type: 'layoutClass',
+      data: layout
+    });
+  });
+});

data/sample/Broadcast/public/js/participant.js

@@ -0,0 +1,85 @@
+/* global OT, apiKey, sessionId, token, $, layout, focusStreamId */
+var session = OT.initSession(apiKey, sessionId);
+var publisher;
+
+var container = $('<div id = "publisher"></div>');
+
+if (layout === 'verticalPresentation') {
+  $('#streams').addClass('vertical');
+}
+
+container.addClass('focus');
+$('#streams').append(container);
+
+publisher = OT.initPublisher('publisher', {
+  insertMode: 'append',
+  width: '100%',
+  height: '100%',
+  resolution: '1280x720'
+});
+
+function positionStreams() {
+  var $focusElement = $('.focus');
+  if ($('#streams').hasClass('vertical')) {
+    $focusElement.appendTo('#streams');
+    $('#streams').children().css('top', '0');
+    $focusElement.css('top', (-20 * ($('#streams').children().size() - 1)) + '%');
+  }
+  else {
+    $focusElement.prependTo('#streams');
+    $focusElement.css('top', '0');
+  }
+}
+
+function focusStream(streamId) {
+  var focusStreamId = streamId;
+  var $focusElement = (publisher.stream && publisher.stream.id === focusStreamId) ? $('#publisher')
+    : $('#' + focusStreamId);
+  $('.focus').removeClass('focus');
+  $focusElement.addClass('focus');
+  positionStreams();
+}
+
+session.connect(token, function (err) {
+  if (err) {
+    alert(err.message || err); // eslint-disable-line no-alert
+  }
+  session.publish(publisher);
+});
+
+session.on('streamCreated', function (event) {
+  var streamId = event.stream.id;
+  container = document.createElement('div');
+  container.id = streamId;
+  $('#streams').append(container);
+  session.subscribe(event.stream, streamId, {
+    insertMode: 'append',
+    width: '100%',
+    height: '100%'
+  });
+  if (streamId === focusStreamId) {
+    focusStream(streamId);
+  }
+  positionStreams();
+});
+
+session.on('streamDestroyed', function (event) {
+  $('#' + event.stream.id).remove();
+  positionStreams();
+});
+
+session.on('signal:layoutClass', function (event) {
+  if (event.data === 'horizontalPresentation') {
+    $('#streams').removeClass('vertical');
+    $('.focus').prependTo('#streams');
+  }
+  else {
+    $('#streams').addClass('vertical');
+    $('.focus').appendTo('#streams');
+  }
+  positionStreams();
+});
+
+session.on('signal:focusStream', function (event) {
+  focusStream(event.data);
+});

data/sample/Broadcast/views/host.erb

@@ -0,0 +1,82 @@
+
+<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
+
+  <div class="container bump-me">
+
+    <div class="body-content">
+
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Host</h3>
+        </div>
+        <div class="panel-body">
+          <div id="streams">
+            <div id="publisher" class="focus"></div>
+          </div>
+        </div>
+        <div class="panel-footer">
+          <form class="broadcast-options">
+              <fieldset class="broadcast-options-fields">
+                  <div class="form-group">
+                      <h4>Broadcast Options:</h4>
+                      <label>
+                         Maximum duration (seconds, minimum 60, maximum 36000):
+                         <input type="number" step="30" min="60" max="36000" name="maxDuration">
+                      </label>
+                  </div>
+
+                  <div class="form-group">
+                      <p>
+                      <label>Resolution:</label>
+                      <label class="help-block">
+                          <input type="radio" name="resolution" value="640x480"> 640x480
+                      </label>
+                      <label class="help-block">
+                          <input type="radio" name="resolution" value="1280x720" checked> 1280x720
+                      </label>
+                      </p>
+                  </div>
+              </fieldset>
+          </form>
+          <button class="btn btn-danger start" disabled>Start broadcast</button>
+          <button class="btn btn-success stop">Stop broadcast</button>
+          <button class="btn toggle-layout">Toggle layout</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">Instructions</h3>
+      </div>
+      <div class="panel-body">
+        <p>
+          Click <strong>Start broadcast</strong> to start broadcasting this session.
+          All publishers in the session will be included, and all publishers that
+          join the session will be included as well.
+        </p>
+        <p>
+          Click <strong>Stop broadcast</strong> to stop broadcasting this session.
+        </p>
+        <p>
+          Click <strong>Toggle layout</strong> to toggle the layout
+          between a vertical and horizontal presentation. The layout changes in all clients
+          and in the broadcast.
+        <p>
+          Click any stream to set it to be the focus stream in the broadcast layout.
+      </div>
+    </div>
+  </div>
+
+    <script>
+        var sessionId = "<%= sessionId %>";
+        var initialBroadcastId = "<%= initialBroadcastId || '' %>";
+        var apiKey = "<%= apiKey %>";
+        var token = "<%= token %>";
+        var focusStreamId = "<%= focusStreamId || '' %>";
+        var initialLayout = "<%= initialLayout %>";
+    </script>
+    <script src="/js/host.js"></script>
+
+  </div>
+

data/sample/Broadcast/views/index.erb

@@ -0,0 +1,32 @@
+<div class="container bump-me">
+
+
+    <div class="body-content">
+
+
+      <div class="row">
+        <div class="col-lg-6 col-offset-1">
+
+          <div class="panel panel-default">
+            <div class="panel-heading">Create a broadcast</div>
+            <div class="panel-body">
+              <p>
+                Everyone who joins either the Host View or Participant View
+                joins a single OpenTok session. The Host can click
+                Start Broadcast and Stop Broadcast to control the live streaming
+                broadcast of the entire session.
+              </p>
+            </div>
+            <div class="panel-footer">
+              <a class="btn btn-danger" href="host">Host View</a>
+              <a class="btn btn-danger" href="participant">Participant View</a>
+              <a class="btn btn-danger" href="broadcast">Broadcast URL</a>
+            </div>
+          </div>
+
+        </div>
+
+    </div>
+
+  </div>
+</div>