opentok 0.1.3 → 2.2.0

data/sample/Archiving/archiving_sample.rb

@@ -0,0 +1,80 @@
+require 'sinatra/base'
+require 'opentok'
+
+raise "You must define API_KEY and API_SECRET environment variables" unless ENV.has_key?("API_KEY") && ENV.has_key?("API_SECRET")
+
+class ArchivingSample < Sinatra::Base
+
+  set :api_key, ENV['API_KEY']
+  set :opentok, OpenTok::OpenTok.new(api_key, ENV['API_SECRET'])
+  set :session, opentok.create_session
+  set :erb, :layout => :layout
+
+  get '/' do
+    erb :index
+  end
+
+  get '/host' do
+    api_key = settings.api_key
+    session_id = settings.session.session_id
+    token = settings.opentok.generate_token(session_id, :role => :moderator)
+
+    erb :host, :locals => {
+      :api_key => api_key,
+      :session_id => session_id,
+      :token => token
+    }
+  end
+
+  get '/participant' do
+    api_key = settings.api_key
+    session_id = settings.session.session_id
+    token = settings.opentok.generate_token(session_id, :role => :moderator)
+
+    erb :participant, :locals => {
+      :api_key => api_key,
+      :session_id => session_id,
+      :token => token
+    }
+  end
+
+  get '/history' do
+    page = (params[:page] || "1").to_i
+    offset = (page - 1) * 5
+    archives = settings.opentok.archives.all(:offset => offset, :count => 5)
+
+    show_previous = page > 1 ? '/history?page=' + (page-1).to_s : nil
+    show_next = archives.total > (offset + 5) ? '/history?page=' + (page+1).to_s : nil
+
+    erb :history, :locals => {
+      :archives => archives,
+      :show_previous => show_previous,
+      :show_next => show_next
+    }
+  end
+
+  get '/download/:archive_id' do
+    archive = settings.opentok.archives.find(params[:archive_id])
+    redirect archive.url
+  end
+
+  get '/start' do
+    archive = settings.opentok.archives.create settings.session.session_id, {
+      :name => "Ruby Archiving Sample App"
+    }
+    body archive.to_json
+  end
+
+  get '/stop/:archive_id' do
+    archive = settings.opentok.archives.stop_by_id(params[:archive_id])
+    body archive.to_json
+  end
+
+  get '/delete/:archive_id' do
+    settings.opentok.archives.delete_by_id(params[:archive_id])
+    redirect '/history'
+  end
+
+  # start the server if ruby file executed directly
+  run! if app_file == $0
+end

data/sample/Archiving/public/css/sample.css

@@ -0,0 +1,22 @@
+/* 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;
+  }
+}
+
+#subscribers div {
+  float: left;
+}
+
+.bump-me {
+  padding-top: 40px;
+}

data/sample/Archiving/public/js/host.js

@@ -0,0 +1,37 @@
+var session = OT.initSession(sessionId),
+    publisher = OT.initPublisher("publisher"),
+    archiveID = null;
+
+session.connect(apiKey, token, function(err, info) {
+  if(err) {
+    alert(err.message || err);
+  }
+  session.publish(publisher);
+});
+
+session.on('streamCreated', function(event) {
+  session.subscribe(event.stream, "subscribers", { insertMode: "append" });
+});
+
+session.on('archiveStarted', function(event) {
+  archiveID = event.id;
+  console.log("ARCHIVE STARTED");
+  $(".start").hide();
+  $(".stop").show();
+});
+
+session.on('archiveStopped', function(event) {
+  archiveID = null;
+  console.log("ARCHIVE STOPPED");
+  $(".start").show();
+  $(".stop").hide();
+});
+
+$(document).ready(function() {
+  $(".start").click(function(event){
+    $.get("start");
+  }).show();
+  $(".stop").click(function(event){
+    $.get("stop/" + archiveID);
+  }).hide();
+});

data/sample/Archiving/public/js/participant.js

@@ -0,0 +1,13 @@
+var session = OT.initSession(sessionId),
+    publisher = OT.initPublisher("publisher");
+
+session.connect(apiKey, token, function(err, info) {
+  if(err) {
+    alert(err.message || err);
+  }
+  session.publish(publisher);
+});
+
+session.on('streamCreated', function(event) {
+  session.subscribe(event.stream, "subscribers", { insertMode : "append" });
+});

data/sample/Archiving/views/history.erb

@@ -0,0 +1,65 @@
+  <div class="container bump-me">
+
+    <div class="body-content">
+
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Past Recordings</h3>
+        </div>
+        <div class="panel-body">
+          <% if archives.count > 0  %>
+          <table class="table">
+            <thead>
+              <tr>
+                <th>&nbsp;</th>
+                <th>Created</th>
+                <th>Duration</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% for item in archives %>
+
+              <tr data-item-id="<%= item.id %>">
+                <td>
+                  <% if (item.status == "available") && item.url && (item.url.length > 0) %>
+                  <a href="/download/<%= item.id %>">
+                  <% end %>
+                  <%= item.name || "Untitled" %>
+                  <% if (item.status == "available") && item.url && (item.url.length > 0) %>
+                  </a>
+                  <% end %>
+                </td>
+                <td><%= Time.at(item.created_at/1000).strftime("%B %e, %Y at %I:%M %p") %></td>
+                <td><%= item.duration %> seconds</td>
+                <td><%= item.status %></td>
+                <td>
+                  <% if item.status == "available" %>
+                    <a href="/delete/<%= item.id %>">Delete</a>
+                  <% else %>
+                    &nbsp;
+                  <% end %>
+                </td>
+              </tr>
+
+              <% end %>
+            </tbody>
+          </table>
+          <% else %>
+          <p>
+            There are no archives currently. Try making one in the <a href="/host">host view</a>.
+          </p>
+          <% end %>
+        </div>
+        <div class="panel-footer">
+          <% if show_previous %>
+            <a href="<%= show_previous %>" class="pull-left">&larr; Newer</a>
+          <% end %>
+          &nbsp;
+          <% if show_next %>
+            <a href="<%= show_next %>" class="pull-right">Older &rarr;</a>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>

data/sample/Archiving/views/host.erb

@@ -0,0 +1,69 @@
+<script src="//static.opentok.com/webrtc/v2.2/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="subscribers"><div id="publisher"></div></div>
+        </div>
+        <div class="panel-footer">
+          <button class="btn btn-danger start">Start archiving</button>
+          <button class="btn btn-success stop">Stop archiving</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 archiving</strong> to begin archiving 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 archiving</strong> to end archiving this session.
+          You can then go to <a href="/history">past archives</a> to
+          view your archive (once its status changes to available).
+        </p>
+          <table class="table">
+            <thead>
+              <tr>
+                <th>When</th>
+                <th>You will see</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style="vertical-align: middle;">Archiving is started</td>
+                <td><img src="img/archiving-on-message.png"></td>
+              </tr>
+              <tr>
+                <td style="vertical-align: middle;">Archiving remains on</td>
+                <td><img src="img/archiving-on-idle.png"></td>
+              </tr>
+              <tr>
+                <td style="vertical-align: middle;">Archiving is stopped</td>
+                <td><img src="img/archiving-off.png"></td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+    </div>
+  </div>
+
+    <script>
+        var sessionId = "<%= session_id %>";
+        var apiKey = "<%= api_key %>";
+        var token = "<%= token %>";
+    </script>
+    <script src="/js/host.js"></script>
+
+  </div>

data/sample/Archiving/views/index.erb

@@ -0,0 +1,48 @@
+  <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 an archive</div>
+            <div class="panel-body">
+              <p>
+                Everyone who joins either the Host View or Participant View
+                joins a single OpenTok session. Anyone with the Host View
+                open can click Start Archive or Stop Archive to control
+                recording 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>
+            </div>
+          </div>
+
+        </div>
+        <div class="col-lg-6 col-offset-1">
+
+          <div class="panel panel-default">
+            <div class="panel-heading">Play an archive</div>
+            <div class="panel-body">
+              <p>
+                Click through to Past Archives to see examples of using the
+                Archiving REST API to list archives showing status (started,
+                stopped, available) and playback (for available archives).
+              </p>
+            </div>
+            <div class="panel-footer">
+              <a class="btn btn-success" href="history">Past Archives</a>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>

data/sample/Archiving/views/layout.erb

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Archiving Sample</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="css/sample.css">
+
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+</head>
+<body>
+
+  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <a class="navbar-brand" href="./">Archiving Sample App</a>
+    </div>
+  </nav>
+
+  <%= yield %>
+
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>

data/sample/Archiving/views/participant.erb

@@ -0,0 +1,55 @@
+<script src="//static.opentok.com/webrtc/v2.2/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">Participant</h3>
+        </div>
+        <div class="panel-body">
+          <div id="subscribers"><div id="publisher"></div></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">Instructions</h3>
+      </div>
+      <div class="panel-body">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>When</th>
+                <th>You will see</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style="vertical-align: middle;">Archiving is started</td>
+                <td><img src="img/archiving-on-message.png"></td>
+              </tr>
+              <tr>
+                <td style="vertical-align: middle;">Archiving remains on</td>
+                <td><img src="img/archiving-on-idle.png"></td>
+              </tr>
+              <tr>
+                <td style="vertical-align: middle;">Archiving is stopped</td>
+                <td><img src="img/archiving-off.png"></td>
+              </tr>
+            </tbody>
+          </table>
+      </div>
+    </div>
+  </div>
+
+    <script>
+        var sessionId = "<%= session_id %>";
+        var apiKey = "<%= api_key %>";
+        var token = "<%= token %>";
+    </script>
+    <script src="/js/participant.js"></script>
+
+  </div>

data/sample/HelloWorld/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+gem "sinatra", "~> 1.4.4"
+gem "opentok", :path => "../../"

data/sample/HelloWorld/README.md

@@ -0,0 +1,123 @@
+# OpenTok Hello World Ruby
+
+This is a simple demo app that shows how you can use the OpenTok-Ruby-SDK to create Sessions,
+generate Tokens with those Sessions, and then pass these values to a JavaScript client that can
+connect and conduct a group chat.
+
+## Running the App
+
+First, download the dependencies using [Bundler](http://bundler.io)
+
+```
+$ bundle install
+```
+
+Next, add your own API Key and API Secret to the environment variables. There are a few ways to do
+this but the simplest would be to do it right in your shell.
+
+```
+$ export API_KEY=0000000
+$ export API_SECRET=abcdef1234567890abcdef01234567890abcdef
+```
+
+Finally, start the server using Bundler to handle dependencies
+
+```
+$ bundle exec ruby hello_world.rb
+```
+
+Visit <http://localhost:9393> in your browser. Open it again in a second window. Smile! You've just
+set up a group chat.
+
+## Walkthrough
+
+This demo application uses the [Sinatra web framework](http://www.sinatrarb.com/). It is similar to
+many other popular web frameworks, such as [Rails](http://rubyonrails.org/), but more light-weight.
+We are only covering the very basics of the framework, but you can learn more by following the links
+above.
+
+### Main Application (hello_world.rb)
+
+The first thing done in this file is to require the dependencies we will be using. In this case that
+is the Sinatra web framework and most importantly the OpenTok SDK. By running the application with
+the `bundle exec` command, we allow Bundler to select the right versions of these gems from the
+right place.
+
+```ruby
+require 'sinatra/base'
+require 'opentok'
+```
+
+Next this file performs some basic checks on the environment. If it cannot find the `API_KEY`and
+`API_SECRET` environment variables, there is no point in continuing.
+
+The class `HelloWorld` is our application. The first thing it does is to initialize an instance of
+OpenTok and also store it using Sinatra's `set` method so it can be accessed in other parts of the
+application. At the same time, we also `set` the `api_key` separately so that we can access
+it on its own.
+
+```ruby
+  set :api_key, ENV['API_KEY']
+  set :opentok, OpenTok::OpenTok.new(api_key, ENV['API_SECRET'])
+```
+
+Now, lets discuss the Hello World application's functionality. We want to set up a group chat so
+that any client that visits a page will connect to the same OpenTok Session. Once they are connected
+they can Publish a Stream and Subscribe to all the other streams in that Session. So we just need
+one Session object, and it needs to be accessible every time a request is made. The next line of our
+application simply calls the `OpenTok` instance's `create_session` method and once again uses `set`
+to store it. Alternatively, `session_id`s are commonly stored in databses for applications that have
+many of them.
+
+```ruby
+  set :session, opentok.create_session
+```
+
+We only need one page, so we create one route handler for any HTTP GET requests to trigger.
+
+```ruby
+  get '\' do
+    # ...
+  end
+```
+
+Now all we have to do is serve a page with the three values the client will need to connect to the
+session: `api_key`, `session_id`, and `token`. The first two are right on the `settings` object
+because we called `set` earlier. Note that the we call the `session_id` method to get just that
+value from the `session` object. The `token` is generated freshly on this request by calling the
+`generate_token` method of the `opentok` instance, and passing in the `session_id`. This is because
+a Token is a piece of information that carries a specific client's permissions in a certain Session.
+Ideally, as we've done here, you generate a unique token for each client that will connect.
+
+```ruby
+    api_key = settings.api_key
+    session_id = settings.session.session_id
+    token = settings.opentok.generate_token(session_id)
+```
+
+Now all we have to do is serve a page with those three values. Lets call our `erb` helper that will
+pick up a template called `index.erb` from the `views/` directory in our application and pass in
+the local variables for it to print using the `:locals` hash.
+
+```ruby
+    erb :index, :locals => {
+      :api_key => api_key,
+      :session_id => session_id,
+      :token => token
+    }
+```
+
+### Main Template (views/index.rb)
+
+This file simply sets up the HTML page for the JavaScript application to run, imports the
+JavaScript library, and passes the values created by the server into the JavaScript application
+inside `public/js/helloworld.js`
+
+### JavaScript Applicaton (public/js/helloworld.js)
+
+The group chat is mostly implemented in this file. At a high level, we connect to the given
+Session, publish a stream from our webcam, and listen for new streams from other clients to
+subscribe to.
+
+For more details, read the comments in the file or go to the
+[JavaScript Client Library](http://tokbox.com/opentok/libraries/client/js/) for a full reference.