npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@digitalsamba/embedded-sdk

v0.0.41

Published

Digital Samba Embedded SDK - control easily with JS your iframe integration.

Downloads

868

Readme

Description

Digital Samba Embedded SDK - control easily with JS your iframe integration.

Usage with NPM

Add it to dependency list using your preferred package manager:

npm install @digitalsamba/embedded-sdk

or

yarn install @digitalsamba/embedded-sdk

NPM Package link

After installation, use it in your application code using provided import:

const DigitalSambaEmbedded = require('@digitalsamba/embedded-sdk');

// or, using imports
import DigitalSambaEmbedded from '@digitalsamba/embedded-sdk';

This package is written in TypeScript, so type definitions are also available:

import { SendMessageType, ReceiveMessageType /* ...etc */ } from '@digitalsamba/embedded-sdk';

Initialization


Secure context

️Since the embedded app relies on media device capabilities, it needs to be accessed in a secure context (https:// versus http://).

For local development, most browsers treat http://localhost and http://127.0.0.1 as secure.


Configuring SDK instance

Library provides alternative initialization styles. Using the class constructor you can configure it and load the frame in one call:

const api = new DigitalSambaEmbedded(InitOptions, InstanceProperties /* optional */);

or you can pre-configure the instance and then load it on-demand:

// notice `createControl` vs constructor call
const api = DigitalSambaEmbedded.createControl(InitOptions);

// ...
// when necessary, load the frame:
api.load(InstanceProperties /* optional */);

InitOptions

InitOptions has the following fields:

  • root - HTMLElement. If specified, target frame will be created within it.
  • frame - HTMLIFrameElement to be wrapped.
  • url - full URL to be applied as frame src. Must include protocol and token query param for private rooms;
  • team - team name string
  • room - room identifier string
  • token - optional string for authentication, mainly for private rooms

To successfully initialize an instance of the wrapper one of following combinations needs to be used:

  • root + team + room - will create a controlled frame inside root element
  • frame + team + room - will attach to existing frame
  • frame - will attach to existing frame (assuming you've manually specified correct frame src)
  • root + url - will create a frame inside root element

Remember to always specify allow="camera; microphone; display-capture; autoplay;" and allowFullscreen="true" attributes on iframe if you want to wrap around an existing iframe.

InstanceProperties

  • frameAttributes - list of attributes to be applied to target iframe
  • reportErrors - boolean, false by default. Whether to report misconfiguration or runtime errors to console

Usage

Once initialized you can listen to events emitted by embedded app and control it by sending commands.

Additional functionality like room permission management and exposed state is also available.

Events

To listen for events, attach listener for any of supported events:

api.on('userJoined', (data) => {
  // ...
});

💡 See the events docs for a full list of available events.


Error event can provide useful details:

api.on('appError', (error) => {
  console.log(error);

  /* outputs  {
      name: 'not-allowed',
      message:
        'Recording disabled. You’ll need to edit this room’s properties to record sessions in this room',
      data: {
        type: 'recording'
      }
    },
  */
});

For debugging purposes, you can also listen to all events simultaneously

api.on('*', (data) => {
  console.log(data);
});

Commands

To send commands, api instance provides handy utilities:

api.toggleVideo();
// ...
api.disableAudio();

💡 Full list of available commands with usage examples can be found on documentation website.

Examples

There are several demos available with example integrations

  • Simple Videoroom - simple demo that showcases basic integration, listening to events and running commands
  • Initial settings - examples of setting default settings prior to loading the frame
  • Managed State demo - shows how to use exposed state in complex scenarios, listening to events, checking for permissions and accessing stored data.