wwtc-sdk

v2.3.6

Published

23 days ago

- [Getting started](#getting-started) - [Available Scripts](#available-scripts) - [npm start](#npm-start) - [npm run build](#npm-run-build) - [Components](#components) - [MainWrapper](#mainwrapper) - [Subtitles](#subtitles)

0High
0Medium
0Low

romjc

wwtc sdk

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

| name | type | required | default | detail | | --------------- | ------ | -------- | ----------------------------- | ------------------------------------------------------------------------------------------------------ | | autologin | bool | false | true | Get Username, roomName, language and gender from URL (autologin = true) or from MainWrapper props (auu | | debugInterface | bool | false | false | Allow test only UI or components logic without calling API endpoint /Session | | endpointSession | object | false | { method: "", url: ""} | API endpoint to get tokens from api_key given | | gender | string | true | "male" | User gender to play TTS | | language | string | true | "" | Code of language. e.g. en-US | | roomName | string | true | "" | Name of channel/conference to connect users | | userName | string | true | "" | Name of user | | vendors | object | false | { ttt: [], stt: [], tts: [] } | List of providers api_keys. See object below. |

// 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.

| name | type | required | default | detail | example | | ------------------------ | -------- | -------- | ------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | username | string | true | "" | Subtitle text sender. | John Doe | | initialSourceLanguage | string | true | "" | Code of source language. | en, es, fr | | initialTargetLanguage | string | true | "" | Code of target language | es, fr, en | | initialVisible | bool | false | true | Show/hide visual component | true | | provider | string | true | "" | Third party services that handles p2p communication | "pubnub" | | style | object | false | {} | Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper. | { width: 300px, height: 500px} | | showInput | bool | false | true | Show/hide input text | true, false | | showButtonCloseComponent | bool | false | true | Show/hide (X) to close Subtitles component. Useful when Subtitles is the only component in the interface. | true, false | | showSourceLanguageSelect | bool | false | true | Show/hide Source language select | | | showTargetLanguageSelect | bool | false | true | Show/hide Target language select | | | endpoint | object | true | {} | Endpoint to request translation language | { method: 'GET', url: 'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text' }; | | speechRecognition | bool | false | false | Allows get speech recognition. Text recognized will be shown in the chat component | true, false | | ttsOption | bool | false | false | Allows play resulted audio from /TextToSpeech endpoint | true, false | | postRequestSubtitles | function | false | () | Handle the text, sourceLanguage, targetLanguage and vendor after API response | See example below | | render | function | false | () | Useful to add functions to the Options Header of the Component. i.e.: Download content button | https://reactjs.org/docs/render-props.html | | languagesPreTranslate | array | false | null | Useful to fetch translations before send pubnub message with text translated | ["spanish_united_states", "french-france"] | | defaultBilingual | bool | false | false | Enable/Disable bilingual option by default | true, false | | showFlipButton | bool | false | false | Show/Hide button to flip languages | true, false | | showSpeedOption | bool | false | false | Show/Hide dropdown to handle TTS speed | true, false |

// 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.

| name | type | required | default | detail | example | | --------------------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | | username | string | true | "" | Subtitle text sender. | | initialSourceLanguage | string | true | "" | Code of source language. | en, es, fr | | initialTargetLanguage | string | true | "" | Code of target language | es, fr, en | | initialVisible | bool | false | true | Show/hide visual component | true | | provider | string | true | "" | Third party services that handles p2p communication | "pubnub" | | style | object | false | {} | Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper. | { width: 300px, height: 500px} | | endpoint | object | true | {} | Endpoint to request translation language | { method: 'GET', url: 'https://core.worldwidetechconnections.com/services/ttt/:sourceLanguage/:targetLanguage?text=:text' }; | | speechRecognition | bool | false | false | Allows get speech recognition. Text recognized will be shown in the chat component | true, false |

`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

| name | type | required | default | detail | example | | ------------------- | -------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | | initialLanguage | string | true | "" | Language code | en | | initialGender | string | true | "" | User gender | male | | initialVisible | bool | true | false | Visible component | true | | initialActive | bool | true | false | Active component logic function (play audio) | true | | initialPlayBackRate | number | false | false | Speed of tts audio | true | | withUI | bool | true | false | This component can work without showing visual element. This flag allow show or hide visual component, the logic function still working anyway. | true | | style | object | false | {} | Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper. | { width: 300px, height: 500px } | | endpoint | object | true | {} | Endpoint to request audio from text given | endpointTextToSpeech example above | | fetchCustom | function | false | null | Function to make custom API request and handle response. Object must be returned: { downloadUrl, indexCall } | |

`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

| name | type | required | default | detail | example | | --------------- | ------ | -------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | | username | string | true | "" | Username to send Subtitles (component) message | John Doe | | initialLanguage | string | true | "" | Language code | en | | initialTarget | string | true | "subtitles" | Target component where the recognized text will be sent | "subtitles" || "chat" | | initialVisible | bool | false | true | Show/hide component when is mounted | true | | initialActive | bool | false | false | Active component logic function (play audio) when component is mounted | true | | withUI | bool | false | true | This component works without showing visual element. This prop allow show or hide visual component, the logic function still working anyway. | true | | style | object | false | {} | Set custom styles to wrapper of Subtitles component, used to set width and/or height of wrapper. | { width: 300px, height: 500px } | | endpoint | object | true | {} | Endpoint to request text recognition | endpointSpeechToText example above |

`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

| type | value | detail | example | | ------------------------- | ------ | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | CHAT_changeSourceLanguage | string | Change source language (typing) | {id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'} | | CHAT_changeTargetLanguage | string | Change target language | {id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'} | | CHAT_changeVisible | bool | Visible component | true |

Subtitles

| type | value | detail | example | | ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | SUBTITLES_changeSourceLanguage | object | Change source language (typing) | {id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'} | | SUBTITLES_changeTargetLanguage | object | Change target language | {id: 0, label: 'English, USA ', value: 'en', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'} | | SUBTITLES_changeVisible | bool | Visible component | true | | SUBTITLES_setSttToSubs | object | Object to display new subtitle in the component from other componente. e.g. Text recognized from STT module. | { name: 'username', speakerLanguage: 'en', text: 'This is a test' } |

STT (Speech to text)

| type | value | detail | example | | ------------------ | ------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | STT_changeLanguage | object | Change language | {id: 0, label: 'English, USA ', value: 'en-US', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png'} | | STT_changeActive | bool | Logic component (start or stop capture recognition) | true | false | | STT_changeVisible | bool | Visible component | true | false |

TTS (Speech to text)

| type | value | detail | example | | ------------------ | ------ | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | TTS_changeLanguage | object | Change language | {id: 0, label: 'English, USA ', value: 'en-US', vendor: 'Microsoft', img: 'https://sdkresources.s3.amazonaws.com/flags/united_states.png',} | | TTS_changeActive | bool | Logic component (play audio of text) | true | false | | TTS_changeVisible | bool | Visible component | true | false | | TTS_changeGender | string | Change gender voice | male | female | | TTS_setNewTTS | object | Object to play new audio TTS. e.g. Text from subtitle component. | { language: 'en', text: 'This is a test' } |

`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;
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents

Getting Started

Available Scripts

npm start

npm run build

Components

MainWrapper

Props

Subtitles

Props

Chat

Props

Text to Speech

Speech to Text

State Provider

Action list by Component

Chat

Subtitles

STT (Speech to text)

TTS (Speech to text)

Override CSS

Languages

Override CSS

`npm start`

`npm run build`

`MainWrapper`

`Subtitles`

`Chat`

`Text to Speech`

`Speech to Text`

`State Provider`

`Override CSS`

`Languages`

`Override CSS`