Sample applications for using OpenTok.js
Switch branches/tags
Nothing to show
Clone or download
Latest commit acf76d6 Sep 28, 2018
Permalink
Failed to load latest commit information.
Angular-Basic-Video-Chat Fix build script Sep 25, 2018
Archiving Updating @opentok/client to 2.14.8 Sep 25, 2018
Basic Video Chat Fix flakey tests in Safari Feb 23, 2018
Electron-Basic-Video-Chat Updating @opentok/client to 2.14.8 Sep 25, 2018
Publish-Canvas Adding tests for Publish-Canvas Feb 2, 2018
Publish-Video Fix test name Feb 5, 2018
React-Basic-Video-Chat Updating @opentok/client to 2.14.8 Sep 25, 2018
Signaling Updating @opentok/client to 2.14.8 Sep 25, 2018
Stereo-Audio Merge branch 'master' into stereo-audio-tests Feb 22, 2018
Stream-Filter Actually let's use data attributes for webdriver Sep 25, 2018
Vue-Basic-Video-Chat Updating @opentok/client to 2.14.8 Sep 25, 2018
.eslintignore Adding webdriver.io and some tests for Basic Video Chat Jan 31, 2018
.eslintrc Fix linting errors Jan 18, 2018
.gitignore If we get a failure then post the errorShots as a github comment Feb 1, 2018
.travis.yml IE doesn't need to be an allowed failure anymore Jun 6, 2018
LICENSE Initial commit Apr 19, 2017
README.md Add a call to create new issues for new sample app ideas Feb 7, 2018
compile.sh Fix build script Sep 25, 2018
deploy.sh Run tests in Firefox as well Jan 31, 2018
deploy_key.enc Adding deploy and commit scripts that run after a successful build Jan 18, 2018
index.html Add links to Stereo Audio sample Jan 30, 2018
package-lock.json Update to travis-multirunner 4.5.0 May 15, 2018
package.json Update to travis-multirunner 4.5.0 May 15, 2018
startSelenium.sh Only download geckodriver if we're running Firefox Feb 8, 2018
uploadErrorShots.sh Escape the . properly Feb 2, 2018
wdio.conf.js Try bumping up the jasmine timeout interval to see whether that helps… Jun 6, 2018

README.md

Build Status

OpenTok Web Samples

Sample applications for using the OpenTok.js library.

The code for this sample is found the following subdirectories:

  • Angular-Basic-Video-Chat (demo) (source) -- This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream using Angular 5.

  • Basic Video Chat (demo) (source) -- This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream.

  • Archiving (demo) (source) -- This sample shows you how to record an OpenTok session.

  • Electron-Basic-Video-Chat (source) -- This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream in an Electron application.

  • Publish-Canvas (demo) (source) -- In this sample application we show you how to publish a custom stream from a Canvas tag.

  • Publish-Video (demo) (source) -- In this sample application we show you how to publish a video file to an OpenTok Session.

  • Stereo-Audio (demo) (source) -- In this sample application we show you how to publish a stereo music file to an OpenTok Session.

  • React-Basic-Video-Chat (demo) (source) -- This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream using React. You can also toggle the video by clicking on the Video button.

  • Signaling (demo) (source) -- This sample shows you how to use the OpenTok signaling API to implement text chat.

  • Stream-Filter (demo) (source) -- This sample shows you how to apply custom grayscale, sepia and invert filters.

  • Vue-Basic-Video-Chat (demo) (source) -- This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream using Vue.js.

See the README file in each of these subdirectories for application-specific notes.

Each of these sample applications are described in the Web tutorials section of the OpenTok developer center.

Not seeing a sample application for what you are trying to do? File a new issue or upvote an existing one.

Configuring the application

  1. Clone this repository.

  2. Edit the config.js file and set the values for API_KEY, and TOKEN:

    To do this, log into your TokBox Account, and either create a new project or use an existing project. Then go to your project page and scroll down to the Project Tools section. From there, you can generate a session ID and token manually. Use the project’s API key along with the session ID and token you generated.

Important notes:

  • You can continue to get the session ID and token values from your Account during testing and development, but before you go into production you must set up a server. We will discuss this in the Setting up the test web service section.

  • The Archiving sample app requires you to set up the test web service.

Testing the application

  1. The web app is in the index.html (in each sample directory). Open the index.html in a supported browser.

    For information about which browsers are supported by the OpenTok.js library see the browser support section of the documentation.

  2. When prompted, grant the page access to your camera and microphone.

  3. Mute the speaker on your computer, and then load the page again in another browser tab.

    You will see a person-to-person video chat session using OpenTok.

See the README file in each of these subdirectories for application-specific notes.

Setting up the test web service

The Learning OpenTok PHP repo includes code for setting up a web service.

  1. Clone or download the repo and run its code on a PHP-enabled web server. If you do not have a PHP server set up, you can use Heroku to run a remote test server -- see Automatic deployment to Heroku.

  2. After getting this web service running, edit the config.js file and set the value for SAMPLE_SERVER_BASE_URL to the URL for the web service:

    • If you deployed a the test web service to a local PHP server, set this to the following:

      var SAMPLE_SERVER_BASE_URL = 'http://localhost:8080';

    • If you deployed this to Heroku, set this to the following:

      var SAMPLE_SERVER_BASE_URL = 'https://YOUR-HEROKU-APP-URL';

    Do not add the trailing slash of the URL.

The sample will load the OpenTok session ID, token, and API key from the web service. Also, the archiving sample will use the web service to start, stop, and view archives.

Other resources

See the following:

  • API reference -- Provides details on the OpenTok.js API

  • Developer guides -- Includes conceptual information and code samples for all OpenTok features