{"id":19845433,"url":"https://github.com/opentok/opentok-web-samples","last_synced_at":"2025-05-15T21:05:09.172Z","repository":{"id":21695700,"uuid":"88799250","full_name":"opentok/opentok-web-samples","owner":"opentok","description":"Sample applications for using OpenTok.js","archived":false,"fork":false,"pushed_at":"2025-03-31T09:09:23.000Z","size":166979,"stargazers_count":197,"open_issues_count":13,"forks_count":257,"subscribers_count":33,"default_branch":"main","last_synced_at":"2025-04-08T08:11:17.764Z","etag":null,"topics":["javascript","opentok","video","video-chat","webrtc"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opentok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-19T23:14:46.000Z","updated_at":"2025-03-16T23:50:44.000Z","dependencies_parsed_at":"2024-03-17T05:38:19.904Z","dependency_job_id":"159aab04-bdea-4f6b-bd18-fd08c31efd2f","html_url":"https://github.com/opentok/opentok-web-samples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Fopentok-web-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Fopentok-web-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Fopentok-web-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opentok%2Fopentok-web-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opentok","download_url":"https://codeload.github.com/opentok/opentok-web-samples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254422754,"owners_count":22068678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","opentok","video","video-chat","webrtc"],"created_at":"2024-11-12T13:07:50.701Z","updated_at":"2025-05-15T21:05:09.153Z","avatar_url":"https://github.com/opentok.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenTok Web Samples\n\nSample applications for using the [OpenTok.js](https://tokbox.com/developer/sdks/js/) library with vanilla JavaScript.\n\nFor framework examples (Angular, React, Vue etc.) please see the [Web Component example applications](https://github.com/opentok/web-components/tree/main/examples).\nFor the electron app samples, these have been moved to [Vonage Community](https://github.com/Vonage-Community/sample-video-electron-app)\n\nThe code for this sample is found the following subdirectories:\n\n* Archiving ([source](https://github.com/opentok/opentok-web-samples/tree/main/Archiving)) -- This sample shows you how to record an OpenTok session.\n\n* Basic-Audio-Transformer ([source](https://github.com/opentok/opentok-web-samples/tree/main/Basic-Audio-Transformer)) -- This sample application shows how to use a basic audio transformer with the Vonage Video APIs. It is very similar to the Basic Video Chat example but it adds a low-pass filter to the published audio.\n\n* Basic-Captions ([source](https://github.com/opentok/opentok-web-samples/tree/main/Basic-Captions)) -- This sample application shows how to use captions transcribing with the Vonage Video APIs.\n\n* Basic-Background-Blur ([source](https://github.com/opentok/opentok-web-samples/tree/main/Basic-Background-Blur)) -- This sample application shows how to add background blur with the Vonage Video APIs and Vonage ML Transformers library.\n\n* Basic-Video-Transformer ([source](https://github.com/opentok/opentok-web-samples/tree/main/Basic-Video-Transformer)) -- This sample application shows how to use a basic video transformer with the Vonage Video APIs. It is very similar to the Basic Video Chat example but it adds a threshold processor to the published video.\n\n* Basic Video Chat ([source](https://github.com/opentok/opentok-web-samples/tree/main/Basic%20Video%20Chat)) -- This sample shows you how to connect to an OpenTok session, publish a stream, and\n  subscribe to a stream.\n\n* Basic-Video-Zoom ([source](https://github.com/opentok/opentok-web-samples/tree/main/Basic-Video-Zoom)) -- This sample shows you how to use a video transformer to zoom and center a publisher.\n\n* Moderate-Background-Blur ([source](https://github.com/opentok/opentok-web-samples/tree/main/Moderate-Background-Blur)) -- This sample application shows how to add background blur with the Vonage Video APIs and Vonage ML Transformers library.\n\n* Publish-Canvas ([source](https://github.com/opentok/opentok-web-samples/tree/main/Publish-Canvas)) -- In this sample application we show you how to publish a custom stream from a Canvas tag.\n\n* Publish-Video ([source](https://github.com/opentok/opentok-web-samples/tree/main/Publish-Video)) -- In this sample application we show you how to publish a video file to an OpenTok Session.\n\n* Publish-Devices ([source](https://github.com/opentok/opentok-web-samples/tree/main/Publish-Devices)) -- In this sample application we show you how to choose different Cameras and Microphones when publishing.\n\n* Stereo-Audio ([source](https://github.com/opentok/opentok-web-samples/tree/main/Stereo-Audio)) -- In this sample application we show you how to publish a stereo music file to an OpenTok Session.\n\n* Signaling ([source](https://github.com/opentok/opentok-web-samples/tree/main/Signaling)) -- This sample shows you how to use the OpenTok signaling API to implement text chat.\n\n* Stream-Filter ([source](https://github.com/opentok/opentok-web-samples/tree/main/Stream-Filter)) -- This sample shows you how to apply custom grayscale, sepia and invert filters.\n\nSee the README file in each of these subdirectories for application-specific notes.\n\nEach of these sample applications are described in the [Web tutorials\nsection](https://tokbox.com/developer/tutorials/web/) of the OpenTok developer center. \n\n**Not seeing a sample application for what you are trying to do? [File a new issue](https://github.com/opentok/opentok-web-samples/issues/new?labels=new%20sample%20request) or upvote [an existing one](https://github.com/opentok/opentok-web-samples/labels/new%20sample%20request).**\n\n## Configuring the application\n\n1. Clone this repository.\n\n2. Edit the config.js file and set the values for `API_KEY`, and `TOKEN`:\n\n   To do this, log into your [TokBox Account](https://tokbox.com/account), and either create\n   a new project or use an existing project. Then go to your project page and scroll down to the\n   **Project Tools** section. From there, you can generate a session ID and token manually. Use the\n   project’s API key along with the session ID and token you generated.\n\n**Important notes:**\n\n* You can continue to get the session ID and token values from your Account during testing and\n  development, but before you go into production you must set up a server. We will discuss this\n  in the [Setting up the test web service](#setting-up-the-test-web-service) section.\n\n* The Archiving sample app requires you to set up the test web service.\n\n## Testing the application\n\n1. The web app is in the index.html (in each sample directory). Open the index.html in a supported browser.\n\n   For information about which browsers are supported by the OpenTok.js library see the [browser support section of the documentation](https://tokbox.com/developer/sdks/js/).\n\n2. When prompted, grant the page access to your camera and microphone.\n\n3. Mute the speaker on your computer, and then load the page again in another browser tab.\n\n   You will see a person-to-person video chat session using OpenTok.\n\nSee the README file in each of these subdirectories for application-specific notes.\n\n\n## Setting up the test web service\n\nThe [Learning OpenTok PHP](https://github.com/opentok/learning-opentok-php) repo includes code for\nsetting up a web service.\n\n1. Clone or download the repo and run its code on a PHP-enabled web server. If you do not have a\n   PHP server set up, you can use Heroku to run a remote test server -- see [Automatic deployment\n   to Heroku](https://github.com/opentok/learning-opentok-php#automatic-deployment-to-heroku).\n\n2. After getting this web service running, edit the config.js file and set the value for\n   `SAMPLE_SERVER_BASE_URL` to the URL for the web service:\n\n   * If you deployed the test web service to a local PHP server, set this to the following:\n\n        var SAMPLE_SERVER_BASE_URL = 'http://localhost:8080';\n\n   * If you deployed this online, set this to the following:\n\n        var SAMPLE_SERVER_BASE_URL = 'https://YOUR-SERVER-URL';\n\n   ***Do not add the trailing slash of the URL.***\n\nThe sample will load the OpenTok session ID, token, and API key from the web service. Also,\nthe archiving sample will use the web service to start, stop, and view archives.\n\n## Other resources\n\nSee the following:\n\n* [API reference](https://tokbox.com/developer/sdks/js/reference/) -- Provides details on\n  the OpenTok.js API\n\n* [Developer guides](https://tokbox.com/developer/guides/) -- Includes conceptual information and\n  code samples for all OpenTok features\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopentok%2Fopentok-web-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopentok%2Fopentok-web-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopentok%2Fopentok-web-samples/lists"}