Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

@voxeet/angular-widget

0.1.3 • Public • Published

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>

Keywords

none

install

npm i @voxeet/angular-widget

Downloadsweekly downloads

4

version

0.1.3

license

none

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability