wwtc-sdk v1.2.1

Table of Contents

• Getting started
• Available Scripts
  • npm start
  • npm run build
• Components
  • MainWrapper
  • Subtitles
  • Chat
  • Text to Speech
  • Speech to Text
  • FilePresentation
  • Screenshare
• Conference
• State Provider
• Languages
• Override CSS

Getting Started

This SDK provides the components to develop each version of WWTC stack.

npm install --save wwtc-sdk

The library is developed with React.js (> v.0.16), include React Hooks and some Class Component.

IMPORTANT: Must add stylesheet at the top of the main file. If you would like to override some styles, you have to add the .css files after the main styles of the library.

import React, { useEffect } from 'react';

import { Subtitles, Chat, MainWrapper } from 'wwtc-sdk';
import 'wwtc-sdk/dist/index.css';

// override styles
import 'css/override.css'

const endpointSession = {
    method: 'GET',
    url: 'https://api.worldwidetechconnections.com/api/Session',
};

const endpointTranslate = {
    method: 'GET',
    url:
        'https://exampleurl.com/api/Translation?text=:text&sourceLanguage=:sourceLanguage&targetLanguage=:targetLanguage&vendor=:vendor&token=:token',
    valueResponse: 'targetText', // Value name that have the text translated in the API endpoint response
};

// You can set static token to don't make API request /Session
// NOTE: set token undefined if the endpoint must request authorization token
const vendors = {
    ttt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
    stt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
    tts: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "static token" || undefined
        },
        ...
    ],
};

function App() {
    return (
        <div>
            <MainWrapper
                audio={true}
                video={true}
                endpointSession={endpointSession}
                vendors={vendors}
            >
                <WrapperComponents />
            </MainWrapper>
        </div>
    );
}

function WrapperComponents(props) {
    // values from autologin
    const { initName, initLanguage, initGender } = props;

    return (
        <div>
            <Chat.ChatUI
                username="John Doe"
                initialSourceLanguage="english-united-states"
                initialTargetLanguage="english-united-states"
                initialVisible={true}
                endpoint={endpointTranslate}
                style={{
                    width: '98%',
                    height: 'calc(65% - 1em)',
                    margin: '1em auto',
                }}
            />
            <Subtitles.SubtitlesUI
                username="John Doe"
                initialSourceLanguage="english-united-states"
                initialTargetLanguage="english-united-states"
                initialVisible={true}
                endpoint={endpointTranslate}
                style={{
                    width: '98%',
                    height: 'calc(65% - 1em)',
                    margin: '1em auto',
                }}

            />
        </div>
    );
}

export default App;

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.

Components

This project setup supports ES6 modules thanks to Babel. While you can still use require() and module.exports, we encourage you to use import and export instead.

MainWrapper

Main component that wrap the initial setup of the interface. Set providers list, API endpoint (/Session) to get tokens of providers, handle values to test offline/online interface.

Props

// vendors/provider list
// VENDOR_NAME i.e. "google", "microsoft", "yandex", etc.

const vendors = {
    ttt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "STATIC_TOKEN" || null
        },
        ...
    ],
    stt: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "STATIC_TOKEN" || null
        },
        ...
    ],
    tts: [
        {
            vendor: "VENDOR_NAME",
            apiKey: "VENDOR_API_KEY",
            token: "STATIC_TOKEN" || null
        },
        ...
    ],
};

Subtitles

This component include:

• SubtitlesUI
• buildMessageSubtitle

import { Subtitles } from 'wwtc-sdk';

// Must set params with ":" at start. This allows handling dynamic request params
const endpointTranslate = {
    method: 'GET',
    url:
        'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text',
    valueResponse: 'translated_text', // Value name that have the text translated in the API endpoint response_
};

function WrapperComponents() {
    return (
        <Subtitles.SubtitlesUI
            username="John Doe"
            initialSourceLanguage="spanish-international"
            initialTargetLanguage="spanish-international"
            initialVisible={true}
            defaultBilingual={false}
            provider="pubnub"
            endpoint={endpointTranslate}
        />
    );
}

export default WrapperComponents;

Props

Subtitles component accept following props. Instructions on how to use them are below.

// i.e. preRequestSubtitles()

function WrapperComponents() {
    const preRequestSubtitles = async (text, sourceLanguage, targetLanguage, vendor) => {
        var newText = null;
        if (sourceLanguage === 'english-united-states' && targetLanguage === 'french') {
            newText = text.replace('someWordToDelete', '');
        } else {
            newText = text;
        }

        // Must return the same object structure
        return {
            text: newText,
            sourceLanguage,
            targetLanguage,
            vendor,
        };
    };
    return <Subtitles.SubtitlesUI {...props} preRequestSubtitles={preRequestSubtitles} />;
}

Chat

This component include:

• ChatUI
• buildMessageChat

import { Chat } from 'wwtc-sdk';

// Must set params with ":" at start. This allows handling dynamic request params
const endpointTranslate = {
    method: 'GET',
    url:
        'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text',
    valueResponse: 'translated_text', // Value name that have the text translated in the API endpoint response_
};

function WrapperComponents() {
    return (
        <Chat.ChatUI
            username="John Doe"
            initialSourceLanguage="spanish-international"
            initialTargetLanguage="spanish-international"
            initialVisible={true}
            provider="pubnub"
            endpoint={endpointTranslate}
        />
    );
}

export default WrapperComponents;

Props

Chat component accept following props. Instructions on how to use them are below.

Text to Speech

This component include:

• TextToSpeechUI

import { TextToSpeech } from 'wwtc-sdk';

const endpointTextToSpeech = {
    method: 'GET',
    url:
        'https://api.worldwidetechconnections.com/api/TextToSpeech?text=:text&sourceLanguage=:sourceLanguage&voice=:voice&vendor=:vendor&token=:token',
};

// Used with hook (functional component)
function WrapperComponents() {
    const [{ tts }, dispatch] = useStateValue();

    // Dispatch action to start/stop play audio of text
    const handleTTS = () => {
        dispatch({
            type: 'TTS_changeActive',
            value: !tts.active,
        });
    };
    return (
        <div>
            <button type="button" onClick={handleSTT}>
                {tts.active ? 'Stop' : 'Start'} TTS
            </button>
            <TextToSpeech.TextToSpeechUI
                initialVendor="readspeaker"
                initialLanguage="en"
                initialGender="male"
                initialPlayBackRate={1}
                endpoint={endpointTextToSpeech}
                style={{
                    width: '98%',
                    height: 'calc(35% - 1em)',
                    margin: '1em auto',
                }}
            />
        </div>
    );
}

export default WrapperComponents;

#### Props

Speech to Text

This component include:

• SpeechToTextUI

import { SpeechToText } from 'wwtc-sdk';

const endpointSpeechToText = {
    method: 'POST',
    url:
        'https://api.worldwidetechconnections.com/api/SpeechToText?sourceLanguage=:sourceLanguage&vendor=:vendor&token=:token',
};

// Used with hook (functional component)
function WrapperComponents() {
    const [{ stt }, dispatch] = useStateValue();

    // Dispatch action to start/stop capture audio
    // and handle recognized speech to send request to API endpoint
    const handleSTT = () => {
        dispatch({
            type: 'STT_changeActive',
            value: !stt.active,
        });
    };

    return (
        <div>
            <button type="button" onClick={handleSTT}>
                {stt.active ? 'Stop' : 'Start'} speech recognition
            </button>
            <SpeechToText.SpeechToTextUI
                username="John Doe"
                initialLanguage="en-US" // right format: xx-XX
                initialTarget="subtitles" // chat or subtitles
                endpoint={endpointSpeechToText}
                style={{
                    width: '98%',
                    height: 'calc(35% - 1em)',
                    margin: '1em auto',
                }}
            />
        </div>
    );
}

export default WrapperComponents;

#### Props

State Provider

The state provider is the main component of the sdk. It handle the global state of the app, like Redux. StateProvider is a upgraded version of React Context to handle reducers and states of each component (Subtitles, Chat, Speech To Text, Text To Speech, etc). This component would be at the top layer of the main app.

import { StateProvider } from 'wwtc-sdk';

function WrapperComponents() {
    return (
        <div>
            <StateProvider>
                <WrapperComponents />
            </StateProvider>
        </div>
    );
}

export default WrapperComponents;

You can access to the component state trough useStateValue, it's the Context similarly to React Context. Must be used inside a functional component (React hook)

To get state component information:

import { useStateValue, Chat } from 'wwtc-sdk';

function WrapperComponents() {
    const [{ chat, subtitles }, dispatch] = useStateValue();

    /*
        state chat:
        chat = {
            sourceLanguage: "",
            targetLanguage: "",
            visible: true,
        }
    */
    const chatIsVisible = () => {
        console.log(chat.visible);
    };

    const showChat = () => {
        dispatch({
            type: 'CHAT_changeVisible',
            value: true,
        });
    };

    const hideChat = () => {
        dispatch({
            type: 'CHAT_changeVisible',
            value: false,
        });
    };
    return (
        <div>
            <Chat.ChatUI />
        </div>
    );
}

export default WrapperComponents;

Action list by Component

To change the state of any component, you need to dispatch an action.

dispatch({
    type: 'action_name',
    value: 'value_action',
});

Chat

Subtitles

STT (Speech to text)

TTS (Speech to text)

Override CSS

wwtc-sdk includes the dictionaries function. You must provide a JSON file in the /public/dictionaries path named dictionaries.json That file must contain one array of "dictionaries" translations to replace text in Subtitles Component.

Dictionaries works if you provide the dictionaries.json file. If you don't provide it, nothing happens.

/*
// dictionaries.json
[
    {
        "sourceLanguage": "english",
        "targetLanguage": "french",
        "replacements": [
            {
                "from": "4AMLD",
                "to": "4AMLD"
            },
            {
                "from": "5AMLD",
                "to": "5AMLD"
            },
            {
                ...
            }
        ]
    },
    {
        "sourceLanguage": "english",
        "targetLanguage": "spanish",
        "replacements": [
            {
                "from": "4AMLD",
                "to": "4AMLD"
            },
            {
                "from": "5AMLD",
                "to": "5AMLD"
            },
            {
                ...
            }
        ]
    }
*/

Languages

This function provide languages-idioms of differents vendor. We handle Google, Microsoft, Deepl, Yandex, Sogou for Translate. By default, these languages are included in any component of the library (Chat, Subtitles, Speech to Text, Text to Speech).

import { fetchLanguages } from 'wwtc-sdk';

console.log(languages.chatDefaultLanguages);
/*
[
    {
        id: 0,
        text: 'English United States',
        code: 'english-united-states',
        flag: 'united_states',
    },
    { ... }
]
*/

Override CSS

If you wants to change some styles of the components, like header, buttons or backgrounds colors, etc. Only have to override some CSS variables.

:root {
    --main-primary: red; // primary color
    --main-default: black; // default color
}

List of variables by default:

--main-primary: #337ab7;
--main-default: #acaeb7;
--main-secondary: #555;
--main-white: white;
--main-white-dark: #eeeeee;
--main-gray: gray;
--main-gray-dark: #444;
--main-gray-light: #ccc;

To apply changes, needs to write the new styles at the top of the CSS document (index.css).

/index.css

:root {
    --main-primary: red;
    --main-default: black;
}