Giter Club home page Giter Club logo

opentok-webinar's Introduction

OpenTok Webinar demo

A simple Webinar application based on OpenTok.

Deploy to Heroku

How it works

Tokinar treats a webinar as a uni-directional broadcast from 1 presenter to multiple viewers. The presenter can share screen and/or their camera, along with their audio. Presenters are given URLs that they can share with their viewers to join the webinar. Viewers' screens adjust depending on whether the presenter is sharing both screen and camera, only camera or only screen.

Presenter tokens are created with the role as publisher and viewer tokens are created with the role as subscriber. Presenters are shown number of viewers by listening to OpenTok events and this is done entirely client-side. There is no OpenTok callback integration.

A few notes:

  • Screen-sharing is implemented only for Chrome.
  • OpenTok session IDs and tokens are created on the server-side and embedded in the HTML, so they are already available when the DOM has been parsed. Even though this method avoids an extra HTTP request by skipping a XHR call to fetch tokens, it also results in creating a new token for each page generation. (For an example of a JSON-based API to fetch tokens, see the opentok-green-screen demo.)
  • Currently, Tokinar supports only one presenter per webinar. It does not restrict to one presenter, but there are no layout controls implemented to handle multiple presenters, e.g., even though viewers can subscribe to multiple presenters, presenters of the same webinar will not be able to see each other.

Project layout

  • app.js - This is the main server script that loads the APIs and starts the NodeJS server.
  • assets/ - Client-side assets (styles, scripts, images) that are served as static files by the server.
    • assets/js/tokinar.js - Common client-side utilities.
    • assets/js/presenter.js - JavaScript loaded for presenter.
    • assets/js/viewer.js - JavaScript loaded for viewer.
  • extensions/ - Screen-sharing extensions.
  • config.sample.js - Contains the project configuration. (See Install instructions).
  • libs/ - Reusable utilities and libraries used by the application.
  • routes/ - Contains the routes used by Express to serve pages.
    • routes/webinar.js - Contains routes for webinar pages, including creating OpenTok sessions and tokens.
  • views/ - Server-side views that are rendered on requests.
    • views/webinar-presenter.ejs - The view rendered for a presenter.
    • views/webinar-viewer.ejs - The view rendered for a presenter.

Requirements

  • NodeJS v6.9+
  • TokBox Account (API Key and Secret)

Install

  • Copy config.sample.js to config.js and edit configuration.
  • Install dependencies: npm install
  • Start the application with: npm start

Deploy to Heroku

Alternatively, you can quickly deploy this project to Heroku by clicking the button below. You will need OpenTok API key and secret and Heroku will manage the rest.

Deploy

SSL requirements

You will need SSL to use this demo on latest browsers. You can either set up a proxy through nginx or apache and run this application without SSL, or you can let node serve it directly on SSL when you run npm start.

If you want node to serve this application using SSL, you will need to edit config.js and change ssl.enabled to true. Change the values in the ssl section to point to your key and certificate pair.

Self-signed certificate: If you have openssl installed and on PATH, you can run npm run certs to generate a self-signed certificate. This command will create key.pem and cert.pem in the project root, which are also the default value for the ssl configuration.

If you are deploying to Heroku, you do not need to worry about the SSL config.

Credits

opentok-webinar's People

Contributors

kaustavdm avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.