oalfroukh/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <div id="actions" style="margin-top: 20px;">
      <button id="take-call-lock">Take Call Lock</button>
      <button id="release-call-lock">Release Call Lock</button>
      <br />
      <button id="start-ringer">Start Ringer</button>
      <button id="stop-ringer">Stop Ringer</button>
      <br />
      <button id="start-call">Start Call</button>
      <button id="stop-call">Stop Call</button>
      <br />
      <button id="mute">Mute</button>
      <button id="unmute">Unmute</button>
      <br />
      <button id="hold-call">Hold Call</button>
      <button id="resume-call">Resume Call</button>
    </div>

    <div id="log"></div>
    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: false,
      nodeIntegration: false,
      sandbox: false,
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
  // mainWindow.loadURL(`https://codesandbox.io/p/sandbox/call-control-forked-7qt7zk?file=%2Fsrc%2Findex.js%3A6%2C35`)

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## package.json
{
  "name": "glamorous-view-keep-2gee1",
  "productName": "glamorous-view-keep-2gee1",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "oalfroukh",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "@gnaudio/jabra-js": "4.2.1"
  },
  "devDependencies": {
    "electron": "26.6.1"
  }
}

## preload.js
const {
  init,
  CallControlFactory,
  // RequestedBrowserTransport,
  TrackingOptions,
  SignalType,
  webHidPairing
} =require("@gnaudio/jabra-js/node-cjs");

let isInitialized=false;
const logg = console.log;
let api=null;

// Workaround for missing onload event in CodeSandbox
setTimeout(() => {
  sample();
  // webhidConsent();
  window.sample=sample;
}, 3000);

async function sample() {
  try {
    if(!isInitialized){
      log("Initialising..");
      api = await init({
        tracking: TrackingOptions.TRACK_ALL,
      logger: {
        write(logEvent) {
          logg(
            ` JABRALOG
              MESSAGE: ${logEvent.message}
              LEVEL: ${logEvent.level}
              LAYER: ${logEvent.layer}
            `,
          );
        },
      },
    });
    }

    isInitialized=true;

    log("Waiting for device to be attached.");
    const callControlFactory = new CallControlFactory(api);

    api.deviceAdded.subscribe(async (device) => {
      if (!callControlFactory.supportsCallControl(device)) {
        return;
      }

      const deviceCallControl =
        await callControlFactory.createCallControl(device);
      log(`Device connected: ${device.name}`);
      callControl(deviceCallControl);
      const signalSubscription = deviceCallControl.deviceSignals.subscribe(
        (signal) => {
          console.log(`JABRALOG
          Signal object: ${JSON.stringify(signal)}.
          Enum: ${SignalType[signal.type]}
        `);
        },
      );
    });
  } catch (err) {
    log(err.message);
  }
}


/**
 * Inject a WebHID consent button on the page to allow
 * the browser to access connected Jabra devices
 */
  function webhidConsent() {
  const button = document.createElement("button");
  button.innerText = "WebHID Consent";
  button.onclick = async () => {
    await webHidPairing();
  };

  document.body.prepend(button);
}


 function log(message) {
  let logElement = document.createElement("div");
  logElement.innerText = message;
  document.getElementById("log").appendChild(logElement);
}

function callControl(device) {
  document.querySelectorAll("#actions button").forEach((button) => {
    button.onclick = async (event) => {
      try {
        switch (event.currentTarget.id) {
          case "take-call-lock":
            const gotLock = await device.takeCallLock();

            if (gotLock) {
              log("Got the lock");
            } else {
              log("Unable to get the lock");
            }
            break;

          case "release-call-lock":
            await device.releaseCallLock();
            log("Release the lock");
            break;

          case "start-ringer":
            await device.ring(true);
            log("Start ringer");
            break;

          case "stop-ringer":
            await device.ring(false);
            log("Stop ringer");
            break;

          case "start-call":
            await device.offHook(true);
            log("Start call");
            break;

          case "stop-call":
            await device.offHook(false);
            log("Stop call");
            break;

          case "mute":
            await device.mute(true);
            log("Mute");
            break;

          case "unmute":
            await device.mute(false);
            log("Unmute");
            break;

          case "hold-call":
            device.offHook(false);
            device.hold(true);
            log("On hold");
            break;

          case "resume-call":
            device.offHook(true);
            await device.hold(false);
            log("Resume call");
            break;

          default:
            return;
        }
      } catch (err) {
        log(err.message);
      }
    };
  });
}


## styles.css
body {
  font-family: sans-serif;
  background-color: #151515;
  color: #fff;
}

a {
  color: #ffd100;
}

button {
  margin: 0 5px 5px 0;
  width: 150px;
}

#log {
  margin-top: 25px;
  color: #ffd100;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
	<link href="./styles.css" rel="stylesheet">
	<title>Hello World!</title>
	</head>
	<body>
	<div id="actions" style="margin-top: 20px;">
	<button id="take-call-lock">Take Call Lock</button>
	<button id="release-call-lock">Release Call Lock</button>
	<br />
	<button id="start-ringer">Start Ringer</button>
	<button id="stop-ringer">Stop Ringer</button>
	<br />
	<button id="start-call">Start Call</button>
	<button id="stop-call">Stop Call</button>
	<br />
	<button id="mute">Mute</button>
	<button id="unmute">Unmute</button>
	<br />
	<button id="hold-call">Hold Call</button>
	<button id="resume-call">Resume Call</button>
	</div>

	<div id="log"></div>
	<!-- You can also require other files to run in this process -->
	<script src="./renderer.js"></script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const { app, BrowserWindow } = require('electron')
	const path = require('path')

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	preload: path.join(__dirname, 'preload.js'),
	contextIsolation: false,
	nodeIntegration: false,
	sandbox: false,
	}
	})

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')
	// mainWindow.loadURL(`https://codesandbox.io/p/sandbox/call-control-forked-7qt7zk?file=%2Fsrc%2Findex.js%3A6%2C35`)

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.whenReady().then(() => {
	createWindow()

	app.on('activate', function () {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})

	// Quit when all windows are closed, except on macOS. There, it's common
	// for applications and their menu bar to stay active until the user quits
	// explicitly with Cmd + Q.
	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	{
	"name": "glamorous-view-keep-2gee1",
	"productName": "glamorous-view-keep-2gee1",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "oalfroukh",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {
	"@gnaudio/jabra-js": "4.2.1"
	},
	"devDependencies": {
	"electron": "26.6.1"
	}
	}
	const {
	init,
	CallControlFactory,
	// RequestedBrowserTransport,
	TrackingOptions,
	SignalType,
	webHidPairing
	} =require("@gnaudio/jabra-js/node-cjs");

	let isInitialized=false;
	const logg = console.log;
	let api=null;

	// Workaround for missing onload event in CodeSandbox
	setTimeout(() => {
	sample();
	// webhidConsent();
	window.sample=sample;
	}, 3000);

	async function sample() {
	try {
	if(!isInitialized){
	log("Initialising..");
	api = await init({
	tracking: TrackingOptions.TRACK_ALL,
	logger: {
	write(logEvent) {
	logg(
	` JABRALOG
	MESSAGE: ${logEvent.message}
	LEVEL: ${logEvent.level}
	LAYER: ${logEvent.layer}
	`,
	);
	},
	},
	});
	}

	isInitialized=true;

	log("Waiting for device to be attached.");
	const callControlFactory = new CallControlFactory(api);

	api.deviceAdded.subscribe(async (device) => {
	if (!callControlFactory.supportsCallControl(device)) {
	return;
	}

	const deviceCallControl =
	await callControlFactory.createCallControl(device);
	log(`Device connected: ${device.name}`);
	callControl(deviceCallControl);
	const signalSubscription = deviceCallControl.deviceSignals.subscribe(
	(signal) => {
	console.log(`JABRALOG
	Signal object: ${JSON.stringify(signal)}.
	Enum: ${SignalType[signal.type]}
	`);
	},
	);
	});
	} catch (err) {
	log(err.message);
	}
	}


	/**
	* Inject a WebHID consent button on the page to allow
	* the browser to access connected Jabra devices
	*/
	function webhidConsent() {
	const button = document.createElement("button");
	button.innerText = "WebHID Consent";
	button.onclick = async () => {
	await webHidPairing();
	};

	document.body.prepend(button);
	}



	function log(message) {
	let logElement = document.createElement("div");
	logElement.innerText = message;
	document.getElementById("log").appendChild(logElement);
	}

	function callControl(device) {
	document.querySelectorAll("#actions button").forEach((button) => {
	button.onclick = async (event) => {
	try {
	switch (event.currentTarget.id) {
	case "take-call-lock":
	const gotLock = await device.takeCallLock();

	if (gotLock) {
	log("Got the lock");
	} else {
	log("Unable to get the lock");
	}
	break;

	case "release-call-lock":
	await device.releaseCallLock();
	log("Release the lock");
	break;

	case "start-ringer":
	await device.ring(true);
	log("Start ringer");
	break;

	case "stop-ringer":
	await device.ring(false);
	log("Stop ringer");
	break;

	case "start-call":
	await device.offHook(true);
	log("Start call");
	break;

	case "stop-call":
	await device.offHook(false);
	log("Stop call");
	break;

	case "mute":
	await device.mute(true);
	log("Mute");
	break;

	case "unmute":
	await device.mute(false);
	log("Unmute");
	break;

	case "hold-call":
	device.offHook(false);
	device.hold(true);
	log("On hold");
	break;

	case "resume-call":
	device.offHook(true);
	await device.hold(false);
	log("Resume call");
	break;

	default:
	return;
	}
	} catch (err) {
	log(err.message);
	}
	};
	});
	}
	body {
	font-family: sans-serif;
	background-color: #151515;
	color: #fff;
	}

	a {
	color: #ffd100;
	}

	button {
	margin: 0 5px 5px 0;
	width: 150px;
	}

	#log {
	margin-top: 25px;
	color: #ffd100;
	}