# wwtc-sdk-api
> WWTC SDK (API services)
Latest version **1.0.3** (published 2020-11-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install wwtc-sdk-api
pnpm add wwtc-sdk-api
yarn add wwtc-sdk-api
bun add wwtc-sdk-api
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-11-09 |
| First published | 2020-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Author | romjear12 |
| Maintainers | romjc |
## Links
- npm: https://www.npmjs.com/package/wwtc-sdk-api
- Repository: https://github.com/jwtappin/wwtc-sdk
- Homepage: https://github.com/jwtappin/wwtc-sdk#readme
- Issues: https://github.com/jwtappin/wwtc-sdk/issues
- npm.io page: https://npm.io/package/wwtc-sdk-api
## Dependencies (4)
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [pubnub](https://npm.io/package/pubnub.md) ^4.27.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.4
- [react-select](https://npm.io/package/react-select.md) ^3.0.8
## Recent versions
- 1.0.3 (latest) — 2020-11-09
- 1.0.2 — 2020-10-02
- 1.0.1 — 2020-10-02
- 1.0.0 — 2020-09-30
## README
## Table of Contents
- [Getting started](#getting-started)
- [Available Scripts](#available-scripts)
- [npm start](#npm-start)
- [npm run build](#npm-run-build)
- [Components](#components)
- [MainWrapper](#mainwrapper)
- [Subtitles](#subtitles)
- [Chat](#chat)
- [Text to Speech](#text-to-speech)
- [Speech to Text](#speech-to-text)
- [FilePresentation](#filePresentation)
- [Screenshare](#screenshare)
- [Conference](#conference)
- [State Provider](#state-provider)
- [Languages](#languages)
- [Override CSS](#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.
```js
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 (
);
}
function WrapperComponents(props) {
// values from autologin
const { initName, initLanguage, initGender } = props;
return (
);
}
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](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](#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`](http://exploringjs.com/es6/ch_modules.html) 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
```js
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 (
);
}
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 |
| preRequestSubtitles | function | false | () | Handle the text, sourceLanguage, targetLanguage and vendor before make API request | See example below |
| 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 |
```js
// 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 ;
}
```
### `Chat`
This component include:
- ChatUI
- buildMessageChat
```js
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 (
);
}
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
```js
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 (
);
}
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 |
| 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
```js
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 (
);
}
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.
```js
import { StateProvider } from 'wwtc-sdk';
function WrapperComponents() {
return (
);
}
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:
```js
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 (
);
}
export default WrapperComponents;
```
### Action list by Component
To change the state of any component, you need to dispatch an action.
```js
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' } |
## `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)
```js
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.
```css
: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`
```css
:root {
--main-primary: red;
--main-default: black;
}
```
---
_Source: https://npm.io/package/wwtc-sdk-api · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._