Custom backgrounds in Teams V2

app/config/README.md

@@ -112,6 +112,7 @@ We added a feature to load custom background images during a video call. This is
 2. 3 new command-line parameters `customBGServiceBaseUrl`, `customBGServiceIgnoreMSDefaults` and `customBGServiceConfigFetchInterval` are introduced. See above for details.
 3. Custom images are always loaded with `<customBGServiceBaseUrl>/<image-path>`. So, you have to make sure the web server is running and `<customBGServiceBaseUrl>` responds to the request.
 4. You can choose any web server of your choice but make sure `Access-Control-Allow-Origin` is set to `*` in response headers from web server.
+5. In Teams version 2, this will replace Microsoft's default images.
 
 For apache2, `/etc/apache2/apache2.conf` may need to have an entry like this.
 ```xml
@@ -126,8 +127,8 @@ For apache2, `/etc/apache2/apache2.conf` may need to have an entry like this.
 ### Configuring list of images
 
 1. List of images are to be stored in `<customBGServiceBaseUrl>/config.json`.
-2. It would look like this:
-```js
+2. In Teams V1, it would look like this:
+```json
 [
 	{
 		"filetype": "jpg",
@@ -137,15 +138,29 @@ For apache2, `/etc/apache2/apache2.conf` may need to have an entry like this.
 		"thumb_src": "/<path-to-thumb-image>"
 	}
 ]
-
 ```
+3. In Teams V2, it would look like this:
+```json
+{
+	"videoBackgroundImages": [
+		{
+			"filetype": "png",
+			"id": "Custom_bg01",
+			"name": "Custom bg",
+			"src": "/evergreen-assets/backgroundimages/<path-to-image>",
+			"thumb_src": "/evergreen-assets/backgroundimages/<path-to-thumb-image>"
+		}
+	]
+}
+```
+
 As you can see from the above example, it's a JSON array so you can configure any number of images of your choice.
 
 ### About the entries
 - `filetype`: Type of image (Ex: jpg)
 - `id`: Id of the image. Give a unique name without spaces.
 - `name`: Name of your image.
 - `src`: Path to the image to be loaded when selected from the preview. Provide a picture with resolution 1920x1080 (Based on Microsoft CDN) though any resolution would work. This is to avoid unnecessary traffic by loading large size images.
-- `thumb_src`: Path to the image to be shown on the preview screen. Provide a low resolution picture (280x158 based on Microsoft CDN) as it's shown on the preview page. The smaller the image the quicker the preview will be. 
+- `thumb_src`: Path to the image to be shown on the preview screen. Provide a low resolution picture (280x158 based on Microsoft CDN) as it's shown on the preview page. The smaller the image the quicker the preview will be.
 
 Image paths are relative to `customBGServiceBaseUrl`. If your image is at `https://example.com/images/sample.jpg`, then `src` would be `/images/sample.jpg`.

app/mainAppWindow/index.js

@@ -56,7 +56,7 @@ let window = null;
 let appConfig = null;
 
 /**
- * @param {AppConfiguration} configGroup 
+ * @param {AppConfiguration} configGroup
  */
 exports.onAppReady = async function onAppReady(configGroup) {
 	appConfig = configGroup;
@@ -242,8 +242,8 @@ function processArgs(args) {
 }
 
 /**
- * @param {Electron.OnBeforeRequestListenerDetails} details 
- * @param {Electron.CallbackResponse} callback 
+ * @param {Electron.OnBeforeRequestListenerDetails} details
+ * @param {Electron.CallbackResponse} callback
  */
 function onBeforeRequestHandler(details, callback) {
 	if (details.url.startsWith('https://statics.teams.cdn.office.net/teams-for-linux/custom-bg/')) {
@@ -252,6 +252,13 @@ function onBeforeRequestHandler(details, callback) {
 		logger.debug(`Forwarding '${details.url}' to '${imgUrl}'`);
 		callback({ redirectURL: imgUrl });
 	}
+	// Custom background replace for teams v2
+	else if (details.url.startsWith('https://statics.teams.cdn.office.net/evergreen-assets/backgroundimages/')) {
+		const reqUrl = details.url.replace('https://statics.teams.cdn.office.net/evergreen-assets/backgroundimages/', '');
+		const imgUrl = getBGRedirectUrl(reqUrl);
+		logger.debug(`Forwarding '${details.url}' to '${imgUrl}'`);
+		callback({ redirectURL: imgUrl });
+	}
 	// Check if the counter was incremented
 	else if (aboutBlankRequestCount < 1) {
 		// Proceed normally
@@ -272,8 +279,8 @@ function getBGRedirectUrl(rel) {
 }
 
 /**
- * @param {Electron.OnHeadersReceivedListenerDetails} details 
- * @param {Electron.HeadersReceivedResponse} callback 
+ * @param {Electron.OnHeadersReceivedListenerDetails} details
+ * @param {Electron.HeadersReceivedResponse} callback
  */
 function onHeadersReceivedHandler(details, callback) {
 	if (details.responseHeaders['content-security-policy']) {
@@ -302,8 +309,8 @@ function setImgSrcSecurityPolicy(policies) {
 }
 
 /**
- * @param {Electron.OnBeforeSendHeadersListenerDetails} detail 
- * @param {Electron.BeforeSendResponse} callback 
+ * @param {Electron.OnBeforeSendHeadersListenerDetails} detail
+ * @param {Electron.BeforeSendResponse} callback
  */
 function onBeforeSendHeadersHandler(detail, callback) {
 	if (detail.url.startsWith(customBGServiceUrl.href)) {
@@ -315,7 +322,7 @@ function onBeforeSendHeadersHandler(detail, callback) {
 }
 
 /**
- * @param {Electron.HandlerDetails} details 
+ * @param {Electron.HandlerDetails} details
  * @returns {{action: 'deny'} | {action: 'allow', outlivesOpener?: boolean, overrideBrowserWindowOptions?: Electron.BrowserWindowConstructorOptions}}
  */
 function onNewWindow(details) {
@@ -335,7 +342,7 @@ function onNewWindow(details) {
 }
 
 /**
- * @param {string} url 
+ * @param {string} url
  */
 async function writeUrlBlockLog(url) {
 	const curBlockTime = new Date();
@@ -354,7 +361,7 @@ async function writeUrlBlockLog(url) {
 }
 
 /**
- * @param {Error} e 
+ * @param {Error} e
  */
 function onLogStreamError(e) {
 	if (e) {
@@ -404,15 +411,15 @@ function initializeCustomBGServiceURL() {
 
 
 /**
- * @param {Electron.Event} event 
- * @param {Electron.Input} input 
+ * @param {Electron.Event} event
+ * @param {Electron.Input} input
  */
 function onBeforeInput(event, input) {
 	isControlPressed = input.control;
 }
 
 /**
- * @param {Electron.HandlerDetails} details 
+ * @param {Electron.HandlerDetails} details
  * @returns {{action: 'deny'} | {action: 'allow', outlivesOpener?: boolean, overrideBrowserWindowOptions?: Electron.BrowserWindowConstructorOptions}}
  */
 function secureOpenLink(details) {