OpenTok.js Stream Filter Sample

As of v2.13 of opentok.js you can pass a custom videoSource and audioSource to the Publisher. This sample shows how to use this API to apply custom filters to a Publisher. It is very similar to the Basic Video Chat example, but it includes a filters.js file to change between video filters and then publish a custom videoSource and audioSource to the session.

You can set a custom audio source and video source for a publisher's stream when you call OT.initPublisher(). The custom audio and video source are MediaStreamTrack objects. In this example, we use the OT.getUserMedia() method (from OpenTok.js) to get a reference to a MediaStream object that uses the microphone and camera as the audio and video source. The sample attaches the video MediaStreamTrack (from the MediaStream object) to an HTML canvas, manipulates the canvas's image (for example, applying a grayscale filter). It then obtains the resulting MediaStreamTrack from the canvas, using the Canvas.captureStream() method to get a MediaStream object, and it calls getVideoTracks()[0] on that object to get the video MediaStreamTrack object. Finally, it uses that MediaStreamTrack object when calling OT.initPublisher().

Demo

Enter your credentials in config.js and the application will work.

Note: There is a devDependency sirv-cli in the project that is only necessary to run the demo on StackBlitz.

Running the App

Follow the instructions at Basic Video Chat

Open the application in 2 browser windows. Choose a filter from the filter select box.

Known Limitations

• The custom streaming API works on Chrome 51+, Firefox 49+ and Safari 11+. It does not work in IE or Edge browsers.
• If the browser window loses focus (eg. you open a new tab) then the video will pause or become really slow. This is because it is using requestAnimationFrame to draw the video which is limited when the tab is not in focus.