Voxeet Angular Widget
This repository provides you an Angular 1.5.x Module for using Voxeet features.
Install
NPM
npm i @voxeet/voxeet-angular-widget
Then add voxeet-angular-widget as a dependency for your app:
import 'voxeet-angular-widget/voxeet-angular-widget.css';
import 'voxeet-angular-widget';
angular
.module('example', [
'voxeet.angular.widget'
])
Usage:
Components
Status button
Button indicate status of conference and join conference on click.
<vxt-conference-status></vxt-conference-status>
Controls
All controlls of this widget.
<vxt-conference-control></vxt-conference-control>
Conference attendees
Content of widget, display all attendees.
<vxt-conference-attendees></vxt-conference-attendees>
Example
Add in HTML
Status button :
<vxt-conference-status></vxt-conference-status
Create a sidebar :
<div class="vxt-widget-container">
<div class="vxt-sidebar">
<vxt-conference-control></vxt-conference-control>
</div>
<vxt-conference-attendees></vxt-conference-attendees>
</div>
vxt-widget-container class indicate the widget container
vxt-sidebar class indicate the sidebar
Full example :
<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample</title>
<link rel="stylesheet" href="voxeet-angular-widget.css">
</head>
<body ng-controller="main as $ctrl">
<form ng-submit="$ctrl.startVoxeet()">
<div>
<label for="vxt-conf-name">Nom de la conférence</label><br>
<input type="text" id="vxt-conf-name" name="vxt-conf-name" ng-model="$ctrl.vxtConfName" required>
</div>
<div>
<label for="vxt-username">Username</label><br>
<input type="text" id="vxt-username" name="vxt-username" ng-model="$ctrl.vxtUsername" required>
</div>
<a href="" ng-click="$ctrl.moreOptions = !$ctrl.moreOptions">More options</a><br>
<div ng-if="$ctrl.moreOptions">
<div>
<label for="vxt-avatar-url">Url Avatar (optional) :</label><br>
<input type="text" id="vxt-avatar-url" name="vxt-avatar-url" ng-model="$ctrl.vxtAvatarUrl" value="http://">
</div>
<div>
<label for="vxt-avatar-url">External ID (optional) :</label><br>
<input type="text" id="vxt-external-id" name="vxt-external-id" ng-model="$ctrl.vxtExternalId">
</div>
</div><br>
<button type="submit">Login into Voxeet</button>
</form>
<button type="button" ng-click="$ctrl.replay()" ng-if="$ctrl.conferenceId">Replay {{ctrl.conferenceId}}</button>
<br>
<vxt-conference-status></vxt-conference-status>
<aside class="vxt-widget-container">
<div class="vxt-sidebar">
<vxt-conference-control></vxt-conference-control>
</div>
<vxt-conference-attendees></vxt-conference-attendees>
</aside>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="/voxeet-angular-widget.js"></script>
<script>
angular.module('app', ['voxeet.angular.widget'])
.controller('main', function ($scope, Voxeet) {
angular.extend(this, {
$onInit() {
$scope.$on('voxeetRecordingStopped', this._onVoxeetRecordingStopped.bind(this));
},
startVoxeet() {
const currentUserData = {
name: this.vxtUsername,
externalId: this.vxtExternalId,
avatarUrl: this.vxtAvatarUrl
};
if (this.vxtUsername && this.vxtConfName) {
// Init VoxeetSdk
Voxeet.initialize(currentUserData, this.vxtConfName).then((response) => {
console.log('voxeetSdk successfully initialized');
}).catch(err => console.log('Oupss...'));
}
},
replay() {
Voxeet.replayRecording(this.conferenceId);
},
_onVoxeetRecordingStopped() {
this.conferenceId = Voxeet.conference.id
}
})
})
.run(['AuthProvider', 'OptionsProvider', (AuthProvider, OptionsProvider) => {
/* -------------------------
OAUTH URL
-------------------------- */
//AuthProvider.setFetchTokenUrl('YOUR URL TO FETCH TOKEN');
//AuthProvider.setRefreshTokenUrl('YOUR URL TO REFRESH TOKEN');
/* -------------------------
VOXEET CREDENTIALS
-------------------------- */
AuthProvider.setCredentials(
"YOUR KEY",
"YOUR KEY"
);
/* -------------------------
OPTIONS
-------------------------- */
//OptionsProvider.setCameraStatus(false);
//OptionsProvider.setRecordingStatus(false);
//OptionsProvider.setScreenSharingStatus(false);
}]);
</script>
</html>