WebUSB

let connect = document.getElementById('connect');
let info = document.getElementById('device-info');
connect.addEventListener('click', async () => {
  let device;
  try {
    device = await navigator.usb.requestDevice({ filters: [{
      classCode: 0xFF, // vendor-specific
    }]});
  } catch (err) {
    info.innerText = 'No device selected';
  }

  if (device !== undefined) {
    await device.open();
    await device.claimInterface(1);
    info.innerText = 'A CanoKey is selected';
  }
});

function byteToHexString(uint8arr) {
  if (!uint8arr) return '';
  var hexStr = '';
  for (var i = 0; i < uint8arr.length; i++) {
    var hex = (uint8arr[i] & 0xff).toString(16);
    hex = (hex.length === 1) ? '0' + hex : hex;
    hexStr += hex;
  }
  return hexStr.toUpperCase();
}

function hexStringToByte(str) {
  if (!str) return new Uint8Array();
  var a = [];
  for (var i = 0, len = str.length; i < len; i += 2)
    a.push(parseInt(str.substr(i, 2), 16));
  return new Uint8Array(a);
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function transceive(device, capdu) {
  let data = hexStringToByte(capdu);
  // send a command
  await device.controlTransferOut({
    requestType: 'vendor',
    recipient: 'interface',
    request: 0,
    value: 0,
    index: 1
  }, data);
  // wait for execution
  while (1) {
    resp = await device.controlTransferIn({
      requestType: 'vendor',
      recipient: 'interface',
      request: 2,
      value: 0,
      index: 1
    }, 1);
    if (new Uint8Array(resp.data.buffer)[0] === 0) break;
    await sleep(100);
  }
  // get the response
  resp = await device.controlTransferIn({
    requestType: 'vendor',
    recipient: 'interface',
    request: 1,
    value: 0,
    index: 1
  }, 1500);
  if (resp.status === "ok")
    return byteToHexString(new Uint8Array(resp.data.buffer));
  return '';
}