Merge pull request #367 from vona-ben/moderate-background-image

Moderate Background Image Replacement Sample
opentok · Oct 5, 2023 · 75a1887 · 75a1887
2 parents 8ec7d8e + 63c9b23
commit 75a1887
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 0 deletions.
diff --git a/Moderate-Background-Image/README.md b/Moderate-Background-Image/README.md
@@ -0,0 +1,34 @@
+OpenTok.js Moderate Background Image Replacement
+=======================
+
+This sample application shows how to add background image replacement with the Vonage
+Video APIs. It is very similar to the [Basic Video Chat](../Basic%20Video%20Chat/) example, but it adds a background image to the publisher. See [Vonage ML Transformers](https://vonage.github.io/ml-transformers-docs/) library for more information.
+
+## Demo
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/opentok/opentok-web-samples/tree/main/Moderate-Background-Image)
+
+Enter your credentials in `config.js` and the application will work.
+
+> Note: There is a devDependency `sirv-cli` in the project that is only necessary to run the demo on StackBlitz.
+
+## Running the App
+
+*Important:* Read the following sections of the main README file for the repository to set up
+and test the application:
+
+* [Setting up the test web service](../README.md#setting-up-the-test-web-service)
+* [Configuring the application](../README.md#configuring-the-application)
+* [Testing the application](../README.md#testing-the-application)
+
+## Change the background image for the Video Stream
+
+After connecting to the session and publishing the audio-video stream, you can change the background image by replacing it with a new URI using the following code:
+
+```javascript
+  config.backgroundAssetUri = assetUri;
+  processor.setBackgroundOptions(config);
+```
+
+## Known Limitations
+ * MediaProcessors are only supported in recent versions of Chrome, Electron, Opera, and Edge. They are not supported in other (non-Chromium-based) browsers or on iOS. You can check if the client supports this feature by calling the `OT.hasMediaProcessorSupport()` method.
diff --git a/Moderate-Background-Image/css/app.css b/Moderate-Background-Image/css/app.css
@@ -0,0 +1,44 @@
+body,
+html {
+  background-color: gray;
+  height: 100%;
+  margin: 0;
+}
+
+#videos {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#subscriber {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+}
+
+#publisher-container {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 100;
+  border: 3px solid white;
+  border-radius: 3px;
+  background-color: black;
+}
+
+#publisher {
+  width: 360px;
+  height: 240px;
+}
+
+#buttons {
+  background-color: white;
+  padding: 5px;
+  text-align: center;
+}
diff --git a/Moderate-Background-Image/index.html b/Moderate-Background-Image/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title> OpenTok Getting Started </title>
+        <link href="css/app.css" rel="stylesheet" type="text/css">
+
+        <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
+    </head>
+
+    <body>    
+        <div id="videos">
+            <div id="subscriber"></div>
+            <div id="publisher-container">
+                <div id="publisher"></div>
+                <div id="buttons">
+                    Change background image: 
+                    <button id="apply-img-1">Image 1</a>
+                    <button id="apply-img-2">Image 2</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Credit to Tim Holman for the Github corners http://tholman.com/github-corners/ -->
+        <a href="https://github.com/opentok/opentok-web-samples/tree/main/Moderate-Background-Image" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:gray; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);z-index:101;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+        <style>
+            .github-corner:hover .octo-arm {
+                animation: octocat-wave 560ms ease-in-out
+            }
+
+            @keyframes octocat-wave {
+                0%,
+                100% {
+                    transform: rotate(0)
+                }
+                20%,
+                60% {
+                    transform: rotate(-25deg)
+                }
+                40%,
+                80% {
+                    transform: rotate(10deg)
+                }
+            }
+
+            @media (max-width:500px) {
+                .github-corner:hover .octo-arm {
+                    animation: none
+                }
+                .github-corner .octo-arm {
+                    animation: octocat-wave 560ms ease-in-out
+                }
+            }
+        </style>
+
+        <script type="text/javascript" src="js/config.js"></script>
+        <script type="module" src="js/app.js"></script>
+    </body>    
+</html>
+
diff --git a/Moderate-Background-Image/js/app.js b/Moderate-Background-Image/js/app.js
@@ -0,0 +1,109 @@
+import {
+  createVonageMediaProcessor
+} from '../node_modules/@vonage/ml-transformers/dist/ml-transformers.es.js';
+
+/* global OT API_KEY TOKEN SESSION_ID SAMPLE_SERVER_BASE_URL */
+/* global MediaProcessorConnector */
+
+const bgUrl1 = "https://neru-b617e2b2-basic-dev.euw1.runtime.vonage.cloud/bg-1.png";
+const bgUrl2 = "https://neru-b617e2b2-basic-dev.euw1.runtime.vonage.cloud/bg-2.png";
+const applyButtonsContainer = document.getElementById("buttons");
+
+let apiKey;
+let sessionId;
+let token;
+
+const config = {
+  transformerType: "VirtualBackground",
+  backgroundAssetUri: bgUrl1
+};
+
+const processor = await createVonageMediaProcessor(config);
+
+const handleError = (error) => {
+  if (error) {
+    console.error(error);
+  }
+};
+
+const transformStream = (publisher) => {
+  if (OT.hasMediaProcessorSupport()) {
+    publisher
+      .setVideoMediaProcessorConnector(processor.getConnector())
+      .catch((e) => {
+        console.error(e);
+      });
+  } else {
+    console.log('Browser does not support media processors');
+  }
+};
+
+const applyBackground = (assetUri) => {
+  config.backgroundAssetUri = assetUri;
+  processor.setBackgroundOptions(config);
+};
+
+applyButtonsContainer.addEventListener("click", (event) => {
+  if (event.target.id === "apply-img-1") {
+    applyBackground(bgUrl1);
+  } else if (event.target.id === "apply-img-2") {
+    applyBackground(bgUrl2);
+  }
+});
+
+const initializeSession = () => {
+  const session = OT.initSession(apiKey, sessionId);
+
+  // Subscribe to a newly created stream
+  session.on('streamCreated', (event) => {
+    const subscriberOptions = {
+      insertMode: 'append',
+      width: '100%',
+      height: '100%'
+    };
+    session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
+  });
+
+  // initialize the publisher
+  const publisherOptions = {
+    insertMode: 'append',
+    width: '100%',
+    height: '100%'
+  };
+  const publisher = OT.initPublisher('publisher', publisherOptions, handleError);
+
+  // Connect to the session
+  session.connect(token, (error) => {
+    if (error) {
+      handleError(error);
+    } else {
+      // If the connection is successful, publish the publisher to the session
+      // and transform stream
+      session.publish(publisher, () => transformStream(publisher));
+    }
+  });
+};
+
+// See the config.js file.
+if (API_KEY && TOKEN && SESSION_ID) {
+  apiKey = API_KEY;
+  sessionId = SESSION_ID;
+  token = TOKEN;
+  initializeSession();
+} else if (SAMPLE_SERVER_BASE_URL) {
+  // Make a GET request to get the OpenTok API key, session ID, and token from the server
+  fetch(SAMPLE_SERVER_BASE_URL + '/session')
+  .then((response) => response.json())
+  .then((json) => {
+    apiKey = json.apiKey;
+    sessionId = json.sessionId;
+    token = json.token;
+    // Initialize an OpenTok Session object
+    initializeSession();
+  }).catch((error) => {
+    handleError(error);
+    alert('Failed to get OpenTok sessionId and token. Make sure you have updated the config.js file.');
+  });
+} else {
+  alert('Failed to get OpenTok sessionId and token. Make sure you have updated the config.js file.');
+}
diff --git a/Moderate-Background-Image/js/config.js b/Moderate-Background-Image/js/config.js
@@ -0,0 +1,15 @@
+/* eslint-disable no-unused-vars */
+// Make a copy of this file and save it as config.js (in the js directory).
+
+// Set this to the base URL of your sample server, such as 'https://your-app-name.herokuapp.com'.
+// Do not include the trailing slash. See the README for more information:
+
+const SAMPLE_SERVER_BASE_URL = 'http://YOUR-SERVER-URL';
+
+// OR, if you have not set up a web server that runs the learning-opentok-php code,
+// set these values to OpenTok API key, a valid session ID, and a token for the session.
+// For test purposes, you can obtain these from https://tokbox.com/account.
+
+const API_KEY = '';
+const SESSION_ID = '';
+const TOKEN = '';
diff --git a/Moderate-Background-Image/package.json b/Moderate-Background-Image/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "moderate-background-img-replacement",
+  "version": "1.0.0",
+  "description": "This sample application shows how to add an image as background",
+  "main": "index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "test",
+    "start": "sirv --dev"
+  },
+  "contributors": [
+    {
+      "name": "Misha Behei"
+    },
+    {
+      "name": "Chris Pettet"
+    }
+  ],
+  "license": "ISC",
+  "dependencies": {
+    "@vonage/ml-transformers": "^5.1.0"
+  },
+  "devDependencies": {
+    "sirv-cli": "^2.0.2"
+  }
+}