From 34bc7832472acf63c1a8d57510b1a8444464ee26 Mon Sep 17 00:00:00 2001
From: Ben <radhoine.ben@vonage.com>
Date: Thu, 5 Oct 2023 17:47:17 +0800
Subject: [PATCH 1/9] add Moderate-Background-Image sample

---
 Moderate-Background-Image/README.md         |  34 ++
 Moderate-Background-Image/css/app.css       |  71 ++++
 Moderate-Background-Image/index.html        |  56 +++
 Moderate-Background-Image/js/app.js         | 109 ++++++
 Moderate-Background-Image/js/config.js      |  15 +
 Moderate-Background-Image/package-lock.json | 373 ++++++++++++++++++++
 Moderate-Background-Image/package.json      |  28 ++
 7 files changed, 686 insertions(+)
 create mode 100644 Moderate-Background-Image/README.md
 create mode 100644 Moderate-Background-Image/css/app.css
 create mode 100644 Moderate-Background-Image/index.html
 create mode 100644 Moderate-Background-Image/js/app.js
 create mode 100644 Moderate-Background-Image/js/config.js
 create mode 100644 Moderate-Background-Image/package-lock.json
 create mode 100644 Moderate-Background-Image/package.json

diff --git a/Moderate-Background-Image/README.md b/Moderate-Background-Image/README.md
new file mode 100644
index 0000000..6bdb545
--- /dev/null
+++ b/Moderate-Background-Image/README.md
@@ -0,0 +1,34 @@
+OpenTok.js Moderate Background Replacement
+=======================
+
+This sample application shows how to add image background 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-Blur)
+
+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
new file mode 100644
index 0000000..25bbf60
--- /dev/null
+++ b/Moderate-Background-Image/css/app.css
@@ -0,0 +1,71 @@
+.button {
+    background-color: #7FFFD4;
+    /* Green */
+    border: none;
+    color: grey;
+    padding: 5px 5px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    transition-duration: 0.4s;
+}
+
+.button:hover {
+    background-color: #808080;
+    color: white;
+}
+
+body, html {
+    background-color: gray;
+    height: 100%;
+}
+
+#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 {
+    position: absolute;
+    width: 360px;
+    height: 240px;
+    bottom: 50px;
+    left: 10px;
+    z-index: 100;
+    border: 3px solid white;
+    border-radius: 3px;
+}
+
+#buttons {
+    position: absolute;
+    width: 360px;
+    height: 285px;
+    bottom: 50px;
+    left: 35px;
+    z-index: 100;
+}
+
+#buttonholder {
+    position: absolute;
+    /* width: 70%; */
+    margin-left: auto;
+    margin-right: auto;
+    bottom: 2px;
+    left: 20px;
+    z-index: 200;
+    border: 3px solid white;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/Moderate-Background-Image/index.html b/Moderate-Background-Image/index.html
new file mode 100644
index 0000000..79991ca
--- /dev/null
+++ b/Moderate-Background-Image/index.html
@@ -0,0 +1,56 @@
+<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="buttons">
+            <a type="button" id="applyImg-1" class="button">Image 1</a>
+            <a type="button" id="applyImg-2" class="button">Image 2</a>
+        </div>
+        <div id="subscriber"></div>
+        <div id="publisher"></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
new file mode 100644
index 0000000..c34f8c4
--- /dev/null
+++ b/Moderate-Background-Image/js/app.js
@@ -0,0 +1,109 @@
+import {
+  createVonageMediaProcessor
+} from '@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";
+
+let apiKey;
+let sessionId;
+let token;
+
+const config = {
+  transformerType: "VirtualBackground",
+  backgroundAssetUri: bgUrl1
+};
+
+const processor = await createVonageMediaProcessor(config);
+
+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);
+};
+
+const applyButtonsContainer = document.getElementById("buttons");
+
+applyButtonsContainer.addEventListener("click", (event) => {
+  if (event.target.id === "applyImg-1") {
+    applyBackground(bgUrl2);
+  } else if (event.target.id === "applyImg-2") {
+    applyBackground(bgUrl1);
+  }
+});
+
+const handleError = (error) => {
+  if (error) {
+    console.error(error);
+  }
+};
+
+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.');
+  });
+}
diff --git a/Moderate-Background-Image/js/config.js b/Moderate-Background-Image/js/config.js
new file mode 100644
index 0000000..445b7e0
--- /dev/null
+++ 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-lock.json b/Moderate-Background-Image/package-lock.json
new file mode 100644
index 0000000..fae6871
--- /dev/null
+++ b/Moderate-Background-Image/package-lock.json
@@ -0,0 +1,373 @@
+{
+  "name": "moderate-background-img-replacement",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "moderate-background-img-replacement",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@vonage/ml-transformers": "^5.1.0"
+      },
+      "devDependencies": {
+        "sirv-cli": "^2.0.2"
+      }
+    },
+    "node_modules/@mediapipe/face_detection": {
+      "version": "0.4.1646425229",
+      "resolved": "https://registry.npmjs.org/@mediapipe/face_detection/-/face_detection-0.4.1646425229.tgz",
+      "integrity": "sha512-aeCN+fRAojv9ch3NXorP6r5tcGVLR3/gC1HmtqB0WEZBRXrdP6/3W/sGR0dHr1iT6ueiK95G9PVjbzFosf/hrg=="
+    },
+    "node_modules/@mediapipe/face_mesh": {
+      "version": "0.4.1633559619",
+      "resolved": "https://registry.npmjs.org/@mediapipe/face_mesh/-/face_mesh-0.4.1633559619.tgz",
+      "integrity": "sha512-Vc8cdjxS5+O2gnjWH9KncYpUCVXT0h714KlWAsyqJvJbIgUJBqpppbIx8yWcAzBDxm/5cYSuBI5p5ySIPxzcEg=="
+    },
+    "node_modules/@mediapipe/hands": {
+      "version": "0.4.1646424915",
+      "resolved": "https://registry.npmjs.org/@mediapipe/hands/-/hands-0.4.1646424915.tgz",
+      "integrity": "sha512-R1VM3DRCKTA49nVvkprInYUXx8cKisi86y6/9clvYA0vApmLqTjIHQFibJDHwSdy4Rykn2CjWywQAWw5+mGw8w=="
+    },
+    "node_modules/@mediapipe/holistic": {
+      "version": "0.5.1635989137",
+      "resolved": "https://registry.npmjs.org/@mediapipe/holistic/-/holistic-0.5.1635989137.tgz",
+      "integrity": "sha512-iY1bOZ4QUR1jBwJzmaQI6u3BZLYfOTAdj2S8EgXPp/ngGtcyNN3oaVH3eTGUBzYsBd/MXG1RmDzBPd9e9DyKJw=="
+    },
+    "node_modules/@mediapipe/objectron": {
+      "version": "0.4.1636596145",
+      "resolved": "https://registry.npmjs.org/@mediapipe/objectron/-/objectron-0.4.1636596145.tgz",
+      "integrity": "sha512-82Ue+loxBVjzUj4OkpW9U29QurZaT86hvoFfOmktwfOhjoxax7COvliAzANlkryM0HN+vCc8Nkcznk6fAcxYDw=="
+    },
+    "node_modules/@mediapipe/pose": {
+      "version": "0.5.1635988162",
+      "resolved": "https://registry.npmjs.org/@mediapipe/pose/-/pose-0.5.1635988162.tgz",
+      "integrity": "sha512-t0dpl+iG/MTPtPPxEYHyVWo+X7G+qgYUYaB4y9pxavQRNzuQQeHeSmUnT+A8qOKnuB0ccxgyrrFmGUaaL0F3wQ=="
+    },
+    "node_modules/@mediapipe/selfie_segmentation": {
+      "version": "0.1.1632777926",
+      "resolved": "https://registry.npmjs.org/@mediapipe/selfie_segmentation/-/selfie_segmentation-0.1.1632777926.tgz",
+      "integrity": "sha512-OSGhYaZsdOXKyY0JCueOflq3ICLNMrBekI2V8vShum8wuoH3xjfEM6NnIujwJ5SlTdZEXi7Up2koOILDgQbWyg=="
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.23",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
+      "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
+      "dev": true
+    },
+    "node_modules/@types/dom-mediacapture-transform": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-transform/-/dom-mediacapture-transform-0.1.7.tgz",
+      "integrity": "sha512-xrFtEIDCn+VeMEYm4JdjLEOeho3dsTxOxx4hDqCA0WRrENF4DMTF9JaTzTRUVc5rI58j9nRTxIZlU1Wqfr08PA==",
+      "dependencies": {
+        "@types/dom-webcodecs": "*"
+      }
+    },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.8.tgz",
+      "integrity": "sha512-KThTPaGQJLITk8Q0XkEkz+GqFdoWDyQfbyeJmfEUagB15TZQdNx5AqP2b7GP6vkVM6X/6T1Z8EHxA8RgHfY9BA=="
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.39.8",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.8.tgz",
+      "integrity": "sha512-Rk0HKcMXFUuqT32k1kXHZWgxiMvsyYsmlnjp0rLKa0MMoqXLE3T9dogDBTRfuc3SAsXu97KD3k4SKR1lHqd57w=="
+    },
+    "node_modules/@types/node": {
+      "version": "17.0.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
+    },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.1",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
+      "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ=="
+    },
+    "node_modules/@types/uuid": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.4.tgz",
+      "integrity": "sha512-zAuJWQflfx6dYJM62vna+Sn5aeSWhh3OB+wfUEACNcqUSc0AGc5JKl+ycL1vrH7frGTXhJchYjE1Hak8L819dA=="
+    },
+    "node_modules/@vonage/js-onewebrtc-telemetry": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@vonage/js-onewebrtc-telemetry/-/js-onewebrtc-telemetry-1.1.2.tgz",
+      "integrity": "sha512-iceSaOlrZB1b1zAs2TsUwR1/GPwzZzM1CUbFcA5vqeLBEj+TyrY5fn/9BzEC/5VplBoM6LpHNzLUn3lK/WXbmQ==",
+      "dependencies": {
+        "@types/uuid": "^9.0.0",
+        "@vonage/js-workerizer": "^1.1.2",
+        "emittery": "^1.0.1",
+        "uuid": "^9.0.0"
+      }
+    },
+    "node_modules/@vonage/js-onewebrtc-telemetry/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/@vonage/js-workerizer": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@vonage/js-workerizer/-/js-workerizer-1.2.3.tgz",
+      "integrity": "sha512-NmDTm+rS9x3ZNin1KRJDU4uOQgyEl4IXgBH2zSqWfr3FvHQbKUA29KqshGo4bXxPcfUeYWXWk5I6VNjh2+YBhQ==",
+      "dependencies": {
+        "emittery": "^1.0.1"
+      }
+    },
+    "node_modules/@vonage/media-processor": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@vonage/media-processor/-/media-processor-2.0.3.tgz",
+      "integrity": "sha512-WWCka5Qq+XPQrL0nc0gw5A5TgCY3W9VyJJeex5RUwp4xNHpv4iMAzc/XbcsrnT6XQa2kapA/fyb6ZlUbhdFQhw==",
+      "dependencies": {
+        "@types/dom-mediacapture-transform": "^0.1.2",
+        "@types/emscripten": "^1.39.6",
+        "@types/node": "^17.0.10",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/uuid": "^8.3.4",
+        "@vonage/js-onewebrtc-telemetry": "1.1.2",
+        "axios": "^0.25.0",
+        "emittery": "^0.10.1",
+        "typescript-optional": "3.0.0-alpha.3",
+        "uuid": "~8.3.2"
+      }
+    },
+    "node_modules/@vonage/media-processor/node_modules/@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+    },
+    "node_modules/@vonage/media-processor/node_modules/emittery": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
+      "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/@vonage/ml-transformers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@vonage/ml-transformers/-/ml-transformers-5.1.0.tgz",
+      "integrity": "sha512-n4fQfygMWMs4OXjHLB5jf39pcWJi44F4+4PRKMk53m8BYFKOox+PyzoQrVWWW2qFKWVr77O3u6J6paU20mSARw==",
+      "dependencies": {
+        "@mediapipe/face_detection": "0.4.1646425229",
+        "@mediapipe/face_mesh": "0.4.1633559619",
+        "@mediapipe/hands": "0.4.1646424915",
+        "@mediapipe/holistic": "0.5.1635989137",
+        "@mediapipe/objectron": "0.4.1636596145",
+        "@mediapipe/pose": "0.5.1635988162",
+        "@mediapipe/selfie_segmentation": "0.1.1632777926",
+        "@types/dom-mediacapture-transform": "^0.1.2",
+        "@types/emscripten": "^1.39.6",
+        "@types/node": "^17.0.10",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@vonage/js-onewebrtc-telemetry": "1.1.2",
+        "@vonage/js-workerizer": "^1.1.2",
+        "@vonage/media-processor": "2.0.3",
+        "axios": "^0.25.0",
+        "twgl.js": "^5.1.0",
+        "typescript-optional": "3.0.0-alpha.3",
+        "uuid": "^8.3.2",
+        "wasm-feature-detect": "^1.2.11"
+      }
+    },
+    "node_modules/axios": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
+      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
+      "dependencies": {
+        "follow-redirects": "^1.14.7"
+      }
+    },
+    "node_modules/console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/emittery": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-1.0.1.tgz",
+      "integrity": "sha512-2ID6FdrMD9KDLldGesP6317G78K7km/kMcwItRtVFva7I/cSEOIaLpewaUb+YLXVwdAp3Ctfxh/V5zIl1sj7dQ==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/local-access": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
+      "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dev": true,
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
+      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/sirv-cli": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-2.0.2.tgz",
+      "integrity": "sha512-OtSJDwxsF1NWHc7ps3Sa0s+dPtP15iQNJzfKVz+MxkEo3z72mCD+yu30ct79rPr0CaV1HXSOBp+MIY5uIhHZ1A==",
+      "dev": true,
+      "dependencies": {
+        "console-clear": "^1.1.0",
+        "get-port": "^3.2.0",
+        "kleur": "^4.1.4",
+        "local-access": "^1.0.1",
+        "sade": "^1.6.0",
+        "semiver": "^1.0.0",
+        "sirv": "^2.0.0",
+        "tinydate": "^1.0.0"
+      },
+      "bin": {
+        "sirv": "bin.js"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/tinydate": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/twgl.js": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/twgl.js/-/twgl.js-5.3.0.tgz",
+      "integrity": "sha512-0L2YOZBe9fyNZ3NtvHS5uqJxPfSXxFJtz2RTryY1TMWy8asg6K52naHNVdYTMPH9IteYYwNiwq/nBHC5iEIBXw=="
+    },
+    "node_modules/typescript-optional": {
+      "version": "3.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/typescript-optional/-/typescript-optional-3.0.0-alpha.3.tgz",
+      "integrity": "sha512-X2JbUQA+WK0P8gwiickO6s8yZnX/ufov6zx4hbvdYVqHFTz8fAYoh+8JMKxVzQuh2/aMUvF9KSNqXi4p6pNxuA=="
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/wasm-feature-detect": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.3.0.tgz",
+      "integrity": "sha512-w9datO3OReMouWgKOelvu1CozmLK/VbkXOtlzNTanBJpR0uBHyUwS3EYdXf5vBPoHKYS0lpuYo91rpqMNIZM9g=="
+    }
+  }
+}
diff --git a/Moderate-Background-Image/package.json b/Moderate-Background-Image/package.json
new file mode 100644
index 0000000..225a474
--- /dev/null
+++ 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 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"
+  }
+}

From 4a39b741fbba3bb76a7d29be0bcfacf556d6f62f Mon Sep 17 00:00:00 2001
From: Ben <radhoine.ben@vonage.com>
Date: Thu, 5 Oct 2023 20:04:52 +0800
Subject: [PATCH 2/9] update stackblitz link

---
 Moderate-Background-Image/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Moderate-Background-Image/README.md b/Moderate-Background-Image/README.md
index 6bdb545..c3999cd 100644
--- a/Moderate-Background-Image/README.md
+++ b/Moderate-Background-Image/README.md
@@ -1,4 +1,4 @@
-OpenTok.js Moderate Background Replacement
+OpenTok.js Moderate Background Image Replacement
 =======================
 
 This sample application shows how to add image background replacement with the Vonage
@@ -6,7 +6,7 @@ Video APIs. It is very similar to the [Basic Video Chat](../Basic%20Video%20Chat
 
 ## 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-Blur)
+[![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.
 

From e2259de603a63395286cb2efe8755bdfb23e3131 Mon Sep 17 00:00:00 2001
From: Ben <radhoine.ben@vonage.com>
Date: Thu, 5 Oct 2023 21:00:03 +0800
Subject: [PATCH 3/9] remove package-lock

---
 Moderate-Background-Image/package-lock.json | 373 --------------------
 1 file changed, 373 deletions(-)
 delete mode 100644 Moderate-Background-Image/package-lock.json

diff --git a/Moderate-Background-Image/package-lock.json b/Moderate-Background-Image/package-lock.json
deleted file mode 100644
index fae6871..0000000
--- a/Moderate-Background-Image/package-lock.json
+++ /dev/null
@@ -1,373 +0,0 @@
-{
-  "name": "moderate-background-img-replacement",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "moderate-background-img-replacement",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "@vonage/ml-transformers": "^5.1.0"
-      },
-      "devDependencies": {
-        "sirv-cli": "^2.0.2"
-      }
-    },
-    "node_modules/@mediapipe/face_detection": {
-      "version": "0.4.1646425229",
-      "resolved": "https://registry.npmjs.org/@mediapipe/face_detection/-/face_detection-0.4.1646425229.tgz",
-      "integrity": "sha512-aeCN+fRAojv9ch3NXorP6r5tcGVLR3/gC1HmtqB0WEZBRXrdP6/3W/sGR0dHr1iT6ueiK95G9PVjbzFosf/hrg=="
-    },
-    "node_modules/@mediapipe/face_mesh": {
-      "version": "0.4.1633559619",
-      "resolved": "https://registry.npmjs.org/@mediapipe/face_mesh/-/face_mesh-0.4.1633559619.tgz",
-      "integrity": "sha512-Vc8cdjxS5+O2gnjWH9KncYpUCVXT0h714KlWAsyqJvJbIgUJBqpppbIx8yWcAzBDxm/5cYSuBI5p5ySIPxzcEg=="
-    },
-    "node_modules/@mediapipe/hands": {
-      "version": "0.4.1646424915",
-      "resolved": "https://registry.npmjs.org/@mediapipe/hands/-/hands-0.4.1646424915.tgz",
-      "integrity": "sha512-R1VM3DRCKTA49nVvkprInYUXx8cKisi86y6/9clvYA0vApmLqTjIHQFibJDHwSdy4Rykn2CjWywQAWw5+mGw8w=="
-    },
-    "node_modules/@mediapipe/holistic": {
-      "version": "0.5.1635989137",
-      "resolved": "https://registry.npmjs.org/@mediapipe/holistic/-/holistic-0.5.1635989137.tgz",
-      "integrity": "sha512-iY1bOZ4QUR1jBwJzmaQI6u3BZLYfOTAdj2S8EgXPp/ngGtcyNN3oaVH3eTGUBzYsBd/MXG1RmDzBPd9e9DyKJw=="
-    },
-    "node_modules/@mediapipe/objectron": {
-      "version": "0.4.1636596145",
-      "resolved": "https://registry.npmjs.org/@mediapipe/objectron/-/objectron-0.4.1636596145.tgz",
-      "integrity": "sha512-82Ue+loxBVjzUj4OkpW9U29QurZaT86hvoFfOmktwfOhjoxax7COvliAzANlkryM0HN+vCc8Nkcznk6fAcxYDw=="
-    },
-    "node_modules/@mediapipe/pose": {
-      "version": "0.5.1635988162",
-      "resolved": "https://registry.npmjs.org/@mediapipe/pose/-/pose-0.5.1635988162.tgz",
-      "integrity": "sha512-t0dpl+iG/MTPtPPxEYHyVWo+X7G+qgYUYaB4y9pxavQRNzuQQeHeSmUnT+A8qOKnuB0ccxgyrrFmGUaaL0F3wQ=="
-    },
-    "node_modules/@mediapipe/selfie_segmentation": {
-      "version": "0.1.1632777926",
-      "resolved": "https://registry.npmjs.org/@mediapipe/selfie_segmentation/-/selfie_segmentation-0.1.1632777926.tgz",
-      "integrity": "sha512-OSGhYaZsdOXKyY0JCueOflq3ICLNMrBekI2V8vShum8wuoH3xjfEM6NnIujwJ5SlTdZEXi7Up2koOILDgQbWyg=="
-    },
-    "node_modules/@polka/url": {
-      "version": "1.0.0-next.23",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
-      "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
-      "dev": true
-    },
-    "node_modules/@types/dom-mediacapture-transform": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-transform/-/dom-mediacapture-transform-0.1.7.tgz",
-      "integrity": "sha512-xrFtEIDCn+VeMEYm4JdjLEOeho3dsTxOxx4hDqCA0WRrENF4DMTF9JaTzTRUVc5rI58j9nRTxIZlU1Wqfr08PA==",
-      "dependencies": {
-        "@types/dom-webcodecs": "*"
-      }
-    },
-    "node_modules/@types/dom-webcodecs": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.8.tgz",
-      "integrity": "sha512-KThTPaGQJLITk8Q0XkEkz+GqFdoWDyQfbyeJmfEUagB15TZQdNx5AqP2b7GP6vkVM6X/6T1Z8EHxA8RgHfY9BA=="
-    },
-    "node_modules/@types/emscripten": {
-      "version": "1.39.8",
-      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.8.tgz",
-      "integrity": "sha512-Rk0HKcMXFUuqT32k1kXHZWgxiMvsyYsmlnjp0rLKa0MMoqXLE3T9dogDBTRfuc3SAsXu97KD3k4SKR1lHqd57w=="
-    },
-    "node_modules/@types/node": {
-      "version": "17.0.45",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
-      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
-    },
-    "node_modules/@types/offscreencanvas": {
-      "version": "2019.7.1",
-      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
-      "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ=="
-    },
-    "node_modules/@types/uuid": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.4.tgz",
-      "integrity": "sha512-zAuJWQflfx6dYJM62vna+Sn5aeSWhh3OB+wfUEACNcqUSc0AGc5JKl+ycL1vrH7frGTXhJchYjE1Hak8L819dA=="
-    },
-    "node_modules/@vonage/js-onewebrtc-telemetry": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@vonage/js-onewebrtc-telemetry/-/js-onewebrtc-telemetry-1.1.2.tgz",
-      "integrity": "sha512-iceSaOlrZB1b1zAs2TsUwR1/GPwzZzM1CUbFcA5vqeLBEj+TyrY5fn/9BzEC/5VplBoM6LpHNzLUn3lK/WXbmQ==",
-      "dependencies": {
-        "@types/uuid": "^9.0.0",
-        "@vonage/js-workerizer": "^1.1.2",
-        "emittery": "^1.0.1",
-        "uuid": "^9.0.0"
-      }
-    },
-    "node_modules/@vonage/js-onewebrtc-telemetry/node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/@vonage/js-workerizer": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@vonage/js-workerizer/-/js-workerizer-1.2.3.tgz",
-      "integrity": "sha512-NmDTm+rS9x3ZNin1KRJDU4uOQgyEl4IXgBH2zSqWfr3FvHQbKUA29KqshGo4bXxPcfUeYWXWk5I6VNjh2+YBhQ==",
-      "dependencies": {
-        "emittery": "^1.0.1"
-      }
-    },
-    "node_modules/@vonage/media-processor": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vonage/media-processor/-/media-processor-2.0.3.tgz",
-      "integrity": "sha512-WWCka5Qq+XPQrL0nc0gw5A5TgCY3W9VyJJeex5RUwp4xNHpv4iMAzc/XbcsrnT6XQa2kapA/fyb6ZlUbhdFQhw==",
-      "dependencies": {
-        "@types/dom-mediacapture-transform": "^0.1.2",
-        "@types/emscripten": "^1.39.6",
-        "@types/node": "^17.0.10",
-        "@types/offscreencanvas": "^2019.6.4",
-        "@types/uuid": "^8.3.4",
-        "@vonage/js-onewebrtc-telemetry": "1.1.2",
-        "axios": "^0.25.0",
-        "emittery": "^0.10.1",
-        "typescript-optional": "3.0.0-alpha.3",
-        "uuid": "~8.3.2"
-      }
-    },
-    "node_modules/@vonage/media-processor/node_modules/@types/uuid": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
-    },
-    "node_modules/@vonage/media-processor/node_modules/emittery": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
-      "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
-      }
-    },
-    "node_modules/@vonage/ml-transformers": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@vonage/ml-transformers/-/ml-transformers-5.1.0.tgz",
-      "integrity": "sha512-n4fQfygMWMs4OXjHLB5jf39pcWJi44F4+4PRKMk53m8BYFKOox+PyzoQrVWWW2qFKWVr77O3u6J6paU20mSARw==",
-      "dependencies": {
-        "@mediapipe/face_detection": "0.4.1646425229",
-        "@mediapipe/face_mesh": "0.4.1633559619",
-        "@mediapipe/hands": "0.4.1646424915",
-        "@mediapipe/holistic": "0.5.1635989137",
-        "@mediapipe/objectron": "0.4.1636596145",
-        "@mediapipe/pose": "0.5.1635988162",
-        "@mediapipe/selfie_segmentation": "0.1.1632777926",
-        "@types/dom-mediacapture-transform": "^0.1.2",
-        "@types/emscripten": "^1.39.6",
-        "@types/node": "^17.0.10",
-        "@types/offscreencanvas": "^2019.6.4",
-        "@vonage/js-onewebrtc-telemetry": "1.1.2",
-        "@vonage/js-workerizer": "^1.1.2",
-        "@vonage/media-processor": "2.0.3",
-        "axios": "^0.25.0",
-        "twgl.js": "^5.1.0",
-        "typescript-optional": "3.0.0-alpha.3",
-        "uuid": "^8.3.2",
-        "wasm-feature-detect": "^1.2.11"
-      }
-    },
-    "node_modules/axios": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz",
-      "integrity": "sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==",
-      "dependencies": {
-        "follow-redirects": "^1.14.7"
-      }
-    },
-    "node_modules/console-clear": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
-      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/emittery": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-1.0.1.tgz",
-      "integrity": "sha512-2ID6FdrMD9KDLldGesP6317G78K7km/kMcwItRtVFva7I/cSEOIaLpewaUb+YLXVwdAp3Ctfxh/V5zIl1sj7dQ==",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
-      }
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/get-port": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
-      "integrity": "sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/local-access": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
-      "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/mri": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
-      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mrmime": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/sade": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
-      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-      "dev": true,
-      "dependencies": {
-        "mri": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/semiver": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
-      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/sirv": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
-      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
-      "dev": true,
-      "dependencies": {
-        "@polka/url": "^1.0.0-next.20",
-        "mrmime": "^1.0.0",
-        "totalist": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/sirv-cli": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-2.0.2.tgz",
-      "integrity": "sha512-OtSJDwxsF1NWHc7ps3Sa0s+dPtP15iQNJzfKVz+MxkEo3z72mCD+yu30ct79rPr0CaV1HXSOBp+MIY5uIhHZ1A==",
-      "dev": true,
-      "dependencies": {
-        "console-clear": "^1.1.0",
-        "get-port": "^3.2.0",
-        "kleur": "^4.1.4",
-        "local-access": "^1.0.1",
-        "sade": "^1.6.0",
-        "semiver": "^1.0.0",
-        "sirv": "^2.0.0",
-        "tinydate": "^1.0.0"
-      },
-      "bin": {
-        "sirv": "bin.js"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/tinydate": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
-      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/totalist": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
-      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/twgl.js": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/twgl.js/-/twgl.js-5.3.0.tgz",
-      "integrity": "sha512-0L2YOZBe9fyNZ3NtvHS5uqJxPfSXxFJtz2RTryY1TMWy8asg6K52naHNVdYTMPH9IteYYwNiwq/nBHC5iEIBXw=="
-    },
-    "node_modules/typescript-optional": {
-      "version": "3.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/typescript-optional/-/typescript-optional-3.0.0-alpha.3.tgz",
-      "integrity": "sha512-X2JbUQA+WK0P8gwiickO6s8yZnX/ufov6zx4hbvdYVqHFTz8fAYoh+8JMKxVzQuh2/aMUvF9KSNqXi4p6pNxuA=="
-    },
-    "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/wasm-feature-detect": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.3.0.tgz",
-      "integrity": "sha512-w9datO3OReMouWgKOelvu1CozmLK/VbkXOtlzNTanBJpR0uBHyUwS3EYdXf5vBPoHKYS0lpuYo91rpqMNIZM9g=="
-    }
-  }
-}

From a5a84d231d0bd4a5e7c1fedede7db1a09d80e3eb Mon Sep 17 00:00:00 2001
From: Ben <radhoine.ben@vonage.com>
Date: Thu, 5 Oct 2023 21:01:16 +0800
Subject: [PATCH 4/9] update description

---
 Moderate-Background-Image/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Moderate-Background-Image/package.json b/Moderate-Background-Image/package.json
index 225a474..3247495 100644
--- a/Moderate-Background-Image/package.json
+++ b/Moderate-Background-Image/package.json
@@ -1,7 +1,7 @@
 {
   "name": "moderate-background-img-replacement",
   "version": "1.0.0",
-  "description": "This sample application shows how to add image as background",
+  "description": "This sample application shows how to add an image as background",
   "main": "index.js",
   "directories": {
     "test": "test"

From 6aff6deef7cf850353e1f7e582ac57f4adfdbff7 Mon Sep 17 00:00:00 2001
From: Dwane Hemmings <dwane.hemmings@vonage.com>
Date: Thu, 5 Oct 2023 10:01:26 -0400
Subject: [PATCH 5/9] Update app.css

Try to keep the styling to a minimum.
---
 Moderate-Background-Image/css/app.css | 89 ++++++++++-----------------
 1 file changed, 31 insertions(+), 58 deletions(-)

diff --git a/Moderate-Background-Image/css/app.css b/Moderate-Background-Image/css/app.css
index 25bbf60..b989754 100644
--- a/Moderate-Background-Image/css/app.css
+++ b/Moderate-Background-Image/css/app.css
@@ -1,71 +1,44 @@
-.button {
-    background-color: #7FFFD4;
-    /* Green */
-    border: none;
-    color: grey;
-    padding: 5px 5px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    transition-duration: 0.4s;
-}
-
-.button:hover {
-    background-color: #808080;
-    color: white;
-}
-
-body, html {
-    background-color: gray;
-    height: 100%;
+body,
+html {
+  background-color: gray;
+  height: 100%;
+  margin: 0;
 }
 
 #videos {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    margin-left: auto;
-    margin-right: auto;
+  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;
+  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 {
-    position: absolute;
-    width: 360px;
-    height: 240px;
-    bottom: 50px;
-    left: 10px;
-    z-index: 100;
-    border: 3px solid white;
-    border-radius: 3px;
+  width: 360px;
+  height: 240px;
 }
 
 #buttons {
-    position: absolute;
-    width: 360px;
-    height: 285px;
-    bottom: 50px;
-    left: 35px;
-    z-index: 100;
+  background-color: white;
+  padding: 5px;
+  text-align: center;
 }
-
-#buttonholder {
-    position: absolute;
-    /* width: 70%; */
-    margin-left: auto;
-    margin-right: auto;
-    bottom: 2px;
-    left: 20px;
-    z-index: 200;
-    border: 3px solid white;
-    border-radius: 3px;
-}
\ No newline at end of file

From ef2fce659dde8a60e3d02dd0d635fd0915414ae6 Mon Sep 17 00:00:00 2001
From: Dwane Hemmings <dwane.hemmings@vonage.com>
Date: Thu, 5 Oct 2023 10:11:50 -0400
Subject: [PATCH 6/9] Update index.html

a tags are normally for navigating, so we can just use regular button tags instead of styling a tags to be buttons.

added a publisher-container to hold the publisher video and buttons to change its background image.

looks like the beginning HTML tag was copied over.
---
 Moderate-Background-Image/index.html | 103 ++++++++++++++-------------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/Moderate-Background-Image/index.html b/Moderate-Background-Image/index.html
index 79991ca..f4fda6f 100644
--- a/Moderate-Background-Image/index.html
+++ b/Moderate-Background-Image/index.html
@@ -1,56 +1,59 @@
-<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="buttons">
-            <a type="button" id="applyImg-1" class="button">Image 1</a>
-            <a type="button" id="applyImg-2" class="button">Image 2</a>
+<!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>
-        <div id="subscriber"></div>
-        <div id="publisher"></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) {
+    
+        <!-- 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: 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>
-
+            
+            @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>
 

From 67255fa7c21785afb0815422ba9f281274c0aa66 Mon Sep 17 00:00:00 2001
From: Dwane Hemmings <dwane.hemmings@vonage.com>
Date: Thu, 5 Oct 2023 10:23:21 -0400
Subject: [PATCH 7/9] Update app.js

for some reason, the path to the ML library wasn't working without the change in StackBlitz. It would probably work as it was if ran locally.

Originally, when pressing the button for image 1, it would show image 2 and vice-versa. I corrected it.
---
 Moderate-Background-Image/js/app.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/Moderate-Background-Image/js/app.js b/Moderate-Background-Image/js/app.js
index c34f8c4..976ed94 100644
--- a/Moderate-Background-Image/js/app.js
+++ b/Moderate-Background-Image/js/app.js
@@ -1,12 +1,13 @@
 import {
   createVonageMediaProcessor
-} from '@vonage/ml-transformers/dist/ml-transformers.es.js';
+} 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;
@@ -19,8 +20,13 @@ const config = {
 
 const processor = await createVonageMediaProcessor(config);
 
-const transformStream = (publisher) => {
+const handleError = (error) => {
+  if (error) {
+    console.error(error);
+  }
+};
 
+const transformStream = (publisher) => {
   if (OT.hasMediaProcessorSupport()) {
     publisher
       .setVideoMediaProcessorConnector(processor.getConnector())
@@ -37,22 +43,15 @@ const applyBackground = (assetUri) => {
   processor.setBackgroundOptions(config);
 };
 
-const applyButtonsContainer = document.getElementById("buttons");
 
 applyButtonsContainer.addEventListener("click", (event) => {
-  if (event.target.id === "applyImg-1") {
-    applyBackground(bgUrl2);
-  } else if (event.target.id === "applyImg-2") {
+  if (event.target.id === "apply-img-1") {
     applyBackground(bgUrl1);
+  } else if (event.target.id === "apply-img-2") {
+    applyBackground(bgUrl2);
   }
 });
 
-const handleError = (error) => {
-  if (error) {
-    console.error(error);
-  }
-};
-
 const initializeSession = () => {
   const session = OT.initSession(apiKey, sessionId);
 

From ebb3ebaac3b14c8868815789b18e1cb85616abb1 Mon Sep 17 00:00:00 2001
From: Dwane Hemmings <dwane.hemmings@vonage.com>
Date: Thu, 5 Oct 2023 10:42:59 -0400
Subject: [PATCH 8/9] Update app.js

added a check if the user doesn't add credentials manually or link to a server.
---
 Moderate-Background-Image/js/app.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Moderate-Background-Image/js/app.js b/Moderate-Background-Image/js/app.js
index 976ed94..bec7511 100644
--- a/Moderate-Background-Image/js/app.js
+++ b/Moderate-Background-Image/js/app.js
@@ -43,7 +43,6 @@ const applyBackground = (assetUri) => {
   processor.setBackgroundOptions(config);
 };
 
-
 applyButtonsContainer.addEventListener("click", (event) => {
   if (event.target.id === "apply-img-1") {
     applyBackground(bgUrl1);
@@ -103,6 +102,8 @@ if (API_KEY && TOKEN && SESSION_ID) {
     initializeSession();
   }).catch((error) => {
     handleError(error);
-    alert('Failed to get opentok sessionId and token. Make sure you have updated the config.js file.');
+    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.');
 }

From 63c9b23311137274daf391b7297303af0d7d0987 Mon Sep 17 00:00:00 2001
From: Zachary Powell <zachary@zpweb.site>
Date: Thu, 5 Oct 2023 15:51:02 +0100
Subject: [PATCH 9/9] Update Moderate-Background-Image/README.md

Co-authored-by: Dwane Hemmings <dwane.hemmings@vonage.com>
---
 Moderate-Background-Image/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Moderate-Background-Image/README.md b/Moderate-Background-Image/README.md
index c3999cd..50aa111 100644
--- a/Moderate-Background-Image/README.md
+++ b/Moderate-Background-Image/README.md
@@ -1,7 +1,7 @@
 OpenTok.js Moderate Background Image Replacement
 =======================
 
-This sample application shows how to add image background replacement with the Vonage
+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