demo.html
<!DOCTYPE html><html ng-app="demo"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>OpenTok-Angular Demo</title> <style type="text/css" media="screen"> ot-publisher,ot-subscriber,ot-layout { display: block; overflow: hidden; } ot-layout { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } ot-layout > * { transition-property: all; transition-duration: 0.5s; } ot-layout > * { width: 0; height: 0; opacity: 0; } ot-layout > *.ot-layout { opacity: 1; } </style> </head> <body> <div ng-controller="MyCtrl"> <ot-layout> <ot-subscriber ng-repeat="stream in streams" stream="stream" props="{style: {nameDisplayMode: 'off'}}"> </ot-subscriber> <ot-publisher id="publisher" props="{style: {nameDisplayMode: 'off'}, resolution: '1280x720', frameRate: 30}"> </ot-publisher> </ot-layout> </div> <script src="//static.opentok.com/v2/js/opentok.min.js" type="text/javascript" charset="utf-8"></script> <script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="node_modules/angular/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="node_modules/opentok-layout-js/opentok-layout.js" type="text/javascript" charset="utf-8"></script> <script src="opentok-angular.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> angular.module('demo', ['opentok']) .controller('MyCtrl', ['$scope', 'OTSession', 'apiKey', 'sessionId', 'token', function($scope, OTSession, apiKey, sessionId, token) { OTSession.init(apiKey, sessionId, token); $scope.streams = OTSession.streams; }]).value({ apiKey: 'YOUR_APIKEY', sessionId: 'YOUR_SESSION_ID', token: 'YOUR_TOKEN' }); </script> </body></html>