@berrycast/web-ui

BerrySDK - Screen Recording & Video Messaging API

Implement screen recording and video messaging capabilities into your application with 10 lines of code!

Getting started

Here is a berrycast explaining this documentation : Berrycast introduction

Installation

Install the package

yarn add @berrycast/web-ui
# or
npm install @berrycast/web-ui

See if we support your current browser

const isSupported: boolean = await BerrycastWebUI.isSupported();
// Note : Our SDK currently works only on chromium-based browsers and safari.

Create your BerrycastWebUI object

const berrycastWebUI = await BerrycastWebUI.initialize({
  publicApiKey: 'pk_YOUR_PUBLIC_KEY_CONTACT_US_TO_HAVE_ONE',
});
// Will throw an error if the public api key is not valid.

To generate your public api key

To have your own public api key, you will need to contact us at : https://www.berrycast.com/screen-recorder-sdk.

In the meantime, you can use the test public api key.

WARNING : All videos record with this api key will be deleted in 24h.
pk_9386b604dda75a019724cac522aea789efe0dcad4f4d553999ea67b3564f6

Show the record UI

const recordUI = berrycastWebUI.showRecordUI();

Bind record events

recordUI.on('cancel', event => {});
recordUI.on('start', event => {});
recordUI.on('stop', event => {});
recordUI.on('restart', event => {});
recordUI.on('uploaded', event => console.warn(event.data));
recordUI.on('error', event => {});
recordUI.on('close', event => {});

Languages

const berrycastWebUI = await BerrycastWebUI.initialize({
  // We only support theses languages right now. If you need more, please contact us. Default : Browser language
  language: 'en' | 'fr' | 'de',
});

Styles

const berrycastWebUI = await BerrycastWebUI.initialize({
  styles?: {
    colors?: {
      // Allow to set the primary color of the Berrycast UI Elements. Default: berrycast color.
      primary: '#000000';
      // Allow to set the secondary color of the Berrycast UI Elements. Default: berrycast color.
      secondary: '#000000';
    }
  }
});

Record params

enum RECORDING_TYPES {
  SCREEN = 'screen',
  CAMERA = 'camera',
}

const recordUI = berrycastWebUI.showRecordUI({
  // Prevent the possibility to show the camera. Default: true
  allowCamera?: boolean;

  // Filter and order the allowing recording Types. Default: ['screen', 'camera'].
  allowedRecordingTypes?: RECORDING_TYPES[];

  // Select the default recording type. Default: The first item on the allowedRecordingTypes list.
  defaultRecordingType?: RECORDING_TYPES;

  // Allow to add a step when the end-user will be able to see a preview of the video and can review it before sending it. Default: false
  reviewWindow?: boolean;

  manualUpload?: {
    // Show or Hide the upload tab. Default : true.
    enable: boolean;
  };

  uploadProgressWindow?: {
    // Show or hide the upload progress percentage. Default : true.
    enable: boolean;
  };

  settingsWindow?: {
    // Choose the position of the settings window. Default : top-right
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  };
});

Display Berrycast player

const player = berrycastWebUI.buildPlayer({
  conversationUuid: 'A_CONVERSATION_UUID',
});
console.warn(player.element); // player.element is a HTML Element

Convert a link into a Berrycast player

const player = berrycastWebUI.convertLinkElementIntoPlayer({
  linkElement: yourLinkHTMLElement,
});
// The player will be automatically added to the dom, replacing the link element.
// The url needs to be a valid berrycast conversation url, otherwise, an exception will be thrown.

Ressources

Pricing

https://www.berrycast.com/screen-recorder-sdk.

Community : Join us on Slack

https://join.slack.com/t/berrysdk/shared_invite/zt-1jt5y12k5-3nOLG5e9W0rUR9~VALawPA

Demo

https://www.berrycast.com/screen-recorder-sdk/chat-demo

Roadmap

https://docs.google.com/spreadsheets/d/1mfd5DsKjq67AYkkMuiFiKRJ3Y_V9TzWTR4Hak-j0xfQ/edit?usp=sharing

Support

[e-mail]

 

---

 

Full example

import { BerrycastWebUI } from '@berrycast/web-ui';

const button = document.createElement('button');
button.innerText = 'Record';

document.body.appendChild(button);

button.addEventListener('click', async () => {
  const berrycastWebUI = await BerrycastWebUI.initialize({
    publicApiKey: 'pk_YOUR_PUBLIC_KEY_CONTACT_US_TO_HAVE_ONE',
  });

  const recordUI = berrycastWebUI.showRecordUI();
  recordUI.on('cancel', evt => {
    console.warn('cancel', evt.data);
  });

  recordUI.on('start', () => {
    console.warn('start');
    button.innerText = 'Recording...';
  });

  recordUI.on('stop', () => {
    console.warn('stop');
  });

  recordUI.on('restart', () => {
    console.warn('restart');
  });

  recordUI.on('uploaded', event => {
    console.warn('uploaded');
    console.warn(event.data);

    const player = berrycastWebUI.buildPlayer({
      conversationUuid: event.data.uuid,
    });

    const div = document.createElement('div');
    div.style = 'max-width: 800px;';

    div.appendChild(player.element);
    document.body.appendChild(div);
  });

  recordUI.on('progress', event => {
    console.warn(event.data);
  });

  recordUI.on('error', () => {
    console.error('error');
  });

  recordUI.on('close', () => {
    console.warn('close');
    button.innerText = 'Record';
  });
});