RC 1.7.0 (#17)

Co-authored-by: ci-bot <[email protected]>

Author: adamlorek-mq

README.md

@@ -2,36 +2,37 @@
 
 ## Video Call App
 
-The application available in this repository demonstrates the capabilities of Dolby.io's video call solution for browser applications, built using React.
+The application available in this repository demonstrates the capabilities of the Dolby.io video call solution for browser applications, built using React.
 
 This repository demonstrates how to develop the core Dolby.io features and also provides an understanding of how our service works. If you run into problems, the full Dolby.io Communications SDK for JavaScript documentation can be found at <https://docs.dolby.io/communications-apis/docs/js-overview>.
 
-The application provided allows you to evaluate solutions offered by Dolby.io Communications APIs. You can download the repository yourself, run the application locally and verify that it meets your requirements. If you are interested in more details about Dolby.io’s video conference call capabilities, more information can be found here:
+The application provided allows you to evaluate solutions offered by the Dolby.io Communications APIs. You can download the repository yourself, run the application locally and verify that it meets your requirements. If you are interested in more details about Dolby.io video conference call capabilities, more information can be found here:
 <https://dolby.io/products/video-call/>
 
-Its scope covers:
+The scope covers:
 
-- Initialization of Dolby.io SDK
+- Initialization of the Dolby.io SDK
 - Creating and joining a conference
-- Camera, microphone and audio output configuration
+- Camera, microphone, and audio output configuration
 - Full conference view with grid display of user streams
 - Basic video conferencing interactions (muting, camera switching)
 - Screen sharing
 - Recording
 - Background blur (available only on desktop Chrome and Edge)
+- Live-streaming through the Dolby.io API after additional setup process [Using Live-streaming features](#using-live-streaming-features)
 
 ## Getting Started
 
-The steps below will quickly get you started testing Dolby.io’s capabilities.
+The following steps will quickly get you started testing the Dolby.io Communications APIs capabilities.
 
 ### How to get a Dolby.io account
 
-Dolby.io Communications APIs requires you to create a Dolby.io account.
-To set it up, you need to go to <https://dashboard.dolby.io/signup/> and complete the form. After confirming your email address, you will be logged in.
+The Dolby.io Communications APIs requires you to create a Dolby.io account.
+To set up your Dolby.io account, go to <https://dashboard.dolby.io/signup/> and complete the form. After confirming your email address, you will be logged in.
 
 ### Dolby.io dashboard
 
-After logging in, you get access to the full dashboard where you can manage your account.
+After logging in, you have access to the full dashboard where you can manage your account.
 
 From this page <https://dashboard.dolby.io/dashboard/applications/summary> you can manage your profile and billing.
 
@@ -41,17 +42,17 @@ To run the application, you need to generate a special access token and paste it
 
 ## How to run the Video Conferencing app
 
-Below is a list of steps necessary to run the application locally.
+The following details the steps required to run the application locally.
 
-### Clone repository
+### Clone the repository
 
 Use git to clone the repository with
 `git clone [email protected]:dolbyio-samples/comms-app-react-videoconference.git`
 or simply download using the green button on the top of this page and unzip the repository.
 
 ### Install dependencies
 
-Open the main directory with the terminal. If you are using [Yarn](https://yarnpkg.com/), install dependencies with the following command:
+Open the root directory with the terminal. If you are using [Yarn](https://yarnpkg.com/), install dependencies with the following command:
 
 ```bash
 yarn
@@ -97,38 +98,98 @@ to run the application locally.
 
 ### Open the app in a browser
 
-After printing the appropriate message in the terminal window, open <http://localhost:3000> in the browser. The application will launch at this address.
+After the appropriate message appears in the terminal window, open <http://localhost:3000> in the browser. The application will launch at this address.
 
 ## How to build the Video Conferencing app
 
-Follow the steps of installing dependencies & token configuration from the "How to run the Video Conferencing app" section
+Follow the steps of installing dependencies and token configuration from the "How to run the Video Conferencing app" section.
 
 After installing the dependencies, execute the following command:
 
 `yarn build`
 
-This command generated distribution packages in `/dist` directory.
+This command generates distribution packages in the `/dist` directory.
 
-#### Base URL configuration
+### Base URL configuration
 
-In case you need to serve production content from different path then `/` root, (e.g. extend example.app to example.app/videoconference/) please add the `/.env.production` file with the following content:
+In the event that you need to serve production content from a path other than `/` root, (e.g. extend example.app to example.app/videoconference/) please add the `/.env.production` file with the following content:
 
-```
+```bash
 BASE_URL=<YOUR BASE URL PATH>
 ```
 
-More about Base URL configuration can be found [here](https://vitejs.dev/config/shared-options.html#base).
+Additional information about Base URL configuration can be found [here](https://vitejs.dev/config/shared-options.html#base).
+
+### Using live streaming features
+
+In order to use live streaming features, you need to run an additional proxy server so that POST methods can be properly handled. An example of such a server is placed in the [/api](api/) folder.
+
+> If your application has been started in previous steps, please kill the process and proceed with instructions below.
+
+#### Setting up live streaming
+
+1. In the project root folder, create an `.env` file and add the following variables
+
+```env
+VITE_API_PROXY=localhost
+VITE_PROXY_PORT=4000
+VITE_PROXY_PROTOCOL=http
+VITE_STREAMING=true
+```
+
+2. In the `/api` directory, create an `.env` file and fill it with the following properties.
+
+```bash
+PORT=4000
+KEY=APP_KEY
+SECRET=APP_SECRET
+HOSTNAME=localhost
+```
+
+Your `APP_KEY` and `APP_SECRET` can be found in your Dolby.io dashboard, under the app section. **Do not** wrap them in quote marks.
+
+![Keys and secrets](documentation/assets/app_keys.png)
+
+3. Staying inside the `/api` directory, install all dependencies by running the following command
+
+```bash
+yarn
+```
+
+or
+
+```bash
+npm install
+```
+
+4. To start both the server and application together, run the following command in the **root** directory:
+
+```bash
+yarn run dev-proxy
+```
+
+or
+
+```bash
+npm run dev-proxy
+```
+
+> Ports and hostnames in both `.env` files can be set freely by the user but they need to be the same.
+
+## Adding Custom layouts to your live stream
+
+Please visit this [blog post](https://dolby.io/blog/creating-a-custom-mixer-layout-for-streaming-a-conference/) if you want to explore adding a custom layout to your live stream.
 
-## Known issues & limitations
+## Known issues and limitations
 
 - Speaker selection is available only on Chrome
-- Copy conference link works only for root directories by default
+- The copy conference link works only for root directories by default
 - In some cases entering a conference may take more than three seconds
 - On Safari 15.4 and below, the local user can hear echo
 
-## Requirements & supported platforms
+## Requirements and supported platforms
 
-### Video Conference Call App supports 4 main browsers:
+### Video Conference Call App supports four main browsers
 
 - Chrome 100+
 - Safari 15+

api/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+.env

api/README.md

@@ -0,0 +1,59 @@
+# Dolby.io Communications Example Authorisation and Communications proxy
+
+Use this proxy server sample code to connect your Dolby.io communications API based project to our backend services and correctly handle POST requests for features such as starting and stopping RTMP streams.
+
+> **IMPORTANT! we cannot use demo APP_KEY**
+
+## Setup
+
+1. Go to the `/api` directory and run following command to install all necessary dependencies:
+
+```bash
+yarn
+```
+
+or
+
+```bash
+npm install
+```
+
+2. In the `/api` directory, create an `.env` file and fill it with the following properties.
+
+```bash
+PORT=4000
+KEY=APP_KEY
+SECRET=APP_SECRET
+HOSTNAME=localhost
+```
+
+Your `APP_KEY` and `APP_SECRET` can be found in your Dolby.io dashboard, under the app section. **Do not** wrap them in quote marks.
+
+![Keys and secrets](../documentation/assets/app_keys.png)
+
+3. You can start the proxy server by running the following command.
+
+```bash
+yarn dev
+```
+
+or
+
+```bash
+npm dev
+```
+
+1. Observe the traffic on your terminal window. Once the live stream feature is enabled in the app, ensure you can see logs pertaining to `start` and `stop` and HTTP response codes to indicate a successful connection.
+
+```bash
+[0] 2:28:03 pm - Found 0 errors. Watching for file changes.
+[1] Debugger listening on ws://127.0.0.1:9229/ee1f05df-66b8-44c9-b99c-e4952c0d7641
+[1] For help, see: https://nodejs.org/en/docs/inspector
+[1] Debugger listening on ws://127.0.0.1:9229/13a22631-75dd-4bb1-85ee-37f1a168cbb9
+[1] For help, see: https://nodejs.org/en/docs/inspector
+[1] Listening at http://localhost:4000/
+[1] [POST] 200 - https://api.dolby.io/v1/auth/token
+[1] [POST] 200 - https://comms.api.dolby.io/v2/conferences/mix/your-conference-id/rtmp/start
+[1] [POST] 200 - https://api.dolby.io/v1/auth/token
+[1] [POST] 200 - https://comms.api.dolby.io/v2/conferences/mix/your-conference-id/rtmp/stop
+```

api/certs/.gitkeep

@@ -0,0 +1,27 @@
+{
+  "name": "dolby-api-proxy",
+  "version": "1.0.0",
+  "main": "src/main.ts",
+  "license": "MIT",
+  "scripts": {
+    "build": "npx tsc",
+    "start": "node dist/main.js",
+    "dev": "concurrently \"npx tsc --watch\" \"wait-on dist/main.js && nodemon -q --inspect dist/main.js\""
+  },
+  "dependencies": {
+    "@dolbyio/dolbyio-rest-apis-client": "3.4.4",
+    "body-parser": "^1.20.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.12",
+    "@types/express": "^4.17.14",
+    "@types/node": "^18.11.8",
+    "concurrently": "^7.5.0",
+    "nodemon": "^2.0.20",
+    "typescript": "^4.8.4",
+    "wait-on": "^6.0.1"
+  }
+}

api/package.json

@@ -0,0 +1,59 @@
+import fs from 'fs';
+import https from 'https';
+import path from 'path';
+
+import * as bodyParser from 'body-parser';
+import cors from 'cors';
+import dotenv from 'dotenv';
+import express from 'express';
+
+import auth from './routes/auth';
+import comm from './routes/communication';
+
+dotenv.config();
+/*
+ APP_KEY, and APP_SECRET should be on pair with example application values since we are working on current conference bounded with those values
+ */
+const { PORT, HOSTNAME, SSL, KEY, SECRET } = process.env;
+
+if (!KEY || !SECRET) {
+  throw new Error('KEY and SECRET variables are mandatory');
+}
+
+const app = express();
+
+// eslint-disable-next-line new-cap
+app.use(cors());
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
+
+app.use(auth);
+app.use(comm);
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+let server = null;
+
+if (SSL === 'true') {
+  const httpsOptions = {
+    key: fs.readFileSync(path.join(__dirname, '..', 'certs', 'key.pem')),
+    cert: fs.readFileSync(path.join(__dirname, '..', 'certs', 'cert.pem')),
+  };
+  server = https.createServer(httpsOptions, app).listen(PORT, () => {
+    console.log(`Listening at https://${HOSTNAME}:${PORT}/`);
+  });
+  server.on('error handler', console.error);
+} else {
+  server = app.listen(PORT, () => {
+    console.log(`Listening at http://${HOSTNAME}:${PORT}/`);
+  });
+  server.on('error handler', console.error);
+}
+
+process.on('SIGTERM', () => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  server.close(() => {
+    console.log('Http server closed.');
+  });
+});

api/src/main.ts

@@ -0,0 +1,19 @@
+import { communications } from '@dolbyio/dolbyio-rest-apis-client';
+import dotenv from 'dotenv';
+import express from 'express';
+
+const router = express.Router();
+dotenv.config();
+
+const { KEY, SECRET } = process.env;
+
+router.post('/conference/access_token', async (req, res) => {
+  try {
+    const token = await communications.authentication.getClientAccessToken(KEY!, SECRET!, 3600);
+    return res.status(200).send({ data: token });
+  } catch (e) {
+    return res.status(500).send(e);
+  }
+});
+
+export default router;

api/src/routes/auth.ts

@@ -0,0 +1,44 @@
+import { authentication, communications } from '@dolbyio/dolbyio-rest-apis-client';
+import dotenv from 'dotenv';
+import express from 'express';
+
+import { processErrorStatus } from '../utils/utils';
+
+const router = express.Router();
+dotenv.config();
+
+const { KEY, SECRET } = process.env;
+
+router.post('/streaming/start', async ({ body }, res) => {
+  const { conferenceId, rtmp } = body;
+  if (!rtmp || !conferenceId) {
+    return res.status(400).json({ error: 'Missing necessary parameters' });
+  }
+  try {
+    const token = await authentication.getApiAccessToken(KEY!, SECRET!, 3600);
+    await communications.streaming.startRtmp(token, conferenceId, rtmp);
+    return res.status(204).send('OK');
+  } catch (e: any) {
+    const { status, message } = processErrorStatus(e);
+    return res.status(status).send(message);
+  }
+});
+
+router.post('/streaming/stop', async ({ body }, res) => {
+  const { conferenceId } = body;
+
+  if (!conferenceId) {
+    return res.status(400).json({ error: 'Missing conference id param.' });
+  }
+  try {
+    const token = await authentication.getApiAccessToken(KEY!, SECRET!, 3600);
+    await communications.streaming.stopRtmp(token, conferenceId);
+    return res.status(204).send('OK');
+  } catch (e: any) {
+    console.log(e);
+    const { status, message } = processErrorStatus(e);
+    return res.status(status).send(message);
+  }
+});
+
+export default router;