@voxeet/angular-widget

Voxeet Angular Widget ======================

0.1.3
latest
npm

Version published: 7 years ago

Maintainers: 3

Created: 7 years ago

Source

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>

FAQs

What is @voxeet/angular-widget?

Is @voxeet/angular-widget well maintained?

Package last updated on 11 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install