New web sample apps for OpenTok in React, Angular 5 and Vue

react, angular 5, vue sample apps for webrtc

We get a lot of requests from our customers for examples of how to use OpenTok in their framework of choice. I’m here to tell you today that we are answering your pleas in 3 of the most popular Web frameworks out there: React, Angular 5 and Vue.js

You can find the new sample apps in our Web Samples Github Repository.

React

react logoThe React Basic Video Chat App uses a popular OpenTok React component which can be found at http://github.com/aiham/opentok-react. The nice thing about using an existing component is that there is not a whole lot of code involved. The bulk of the code is some simple JSX.

<div>
  <div>Session Status: {connection}</div>
   {error ? (
     <div className="error">
       <strong>Error:</strong> {error}
     </div>
   ) : null}
   <OTSession
     apiKey={apiKey}
     sessionId={sessionId}
     token={token}
     onError={this.onSessionError}
     eventHandlers={this.sessionEventHandlers}
   >
     <button onClick={this.toggleVideo}>
       {publishVideo ? 'Disable' : 'Enable'} Video
     </button>
     <OTPublisher
       properties={{ publishVideo, width: 50, height: 50, }}
       onPublish={this.onPublish}
       onError={this.onPublishError}
       eventHandlers={this.publisherEventHandlers}
     />
     <OTStreams>
       <OTSubscriber
         properties={{ width: 100, height: 100 }}
         onSubscribe={this.onSubscribe}
         onError={this.onSubscribeError}
         eventHandlers={this.subscriberEventHandlers}
       />
     </OTStreams>
   </OTSession>
 </div>

Angular 5

angular 5 logo

With the Angular 5 sample application we wrote some simple Publisher and Subscriber components along with unit tests. The components are used in the app template like so:

<app-publisher [session]="session"></app-publisher>
 <app-subscriber *ngFor="let stream of streams" [stream]="stream" 
[session]="session"></app-subscriber>

A publisher is displayed on the page first. A new subscriber template is created for every stream in the streams array.

Also included in the app are some integration tests written for Protractor which make sure that the Publishers and Subscribers load successfully when you have 2 participants.

Vue.js

vue logo

The Vue.js sample application also takes a component based approach to building an OpenTok application. There is a simple Publisher component and a simple Subscriber component. Then the template for the Session component displays them like so:

<div id="session" @error="errorHandler">
   <publisher :session="session" @error="errorHandler"></publisher>
   <div id="subscribers" v-for="stream in streams" 
:key="stream.streamId">
     <subscriber @error="errorHandler" :stream="stream" 
:session="session">
</subscriber>
   </div>
 </div>

Time to get building!

Now, no matter what your framework of choice is, OpenTok is the platform of choice for your WebRTC application. You’ll find all the resources and links to sample apps you need in our Developer Center, and you can sign up here for a trial on the platform including $10 free credit.