@capturebridge/sdk 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.10.0] - 2024-06-17
+
+### Changed
+
+- Introduced breaking changes to the structure of the object returned from
+  `ICAO.check()`
+- `ICAO` class will default to use the `capture_verify_iface` plugin if no
+  plugin is provided to the constructor.
+
+### Added
+
+- Coordinates of the cropped photo are now returned from `ICAO.check()` if a face
+was found.
+
 ## [0.9.0] - 2024-06-06
 
 ### Added

package/Common.js

@@ -133,6 +133,31 @@ export const DATAURL_JPEG = 'data:image/jpeg;base64,'
  */
 export const DATAURL_PNG = 'data:image/png;base64,'
 
+/**
+ * @summary For a given base64 string, convert it to the appropriate Data URL
+ * @constant
+ * @type {string}
+ */
+export const base64ToDataURL = base64 => {
+  const magicBytes = atob(base64.slice(0, 6))
+  const byteArray = new Uint8Array(magicBytes.length)
+  for (let i = 0; i < magicBytes.length; i++) {
+    byteArray[i] = magicBytes.charCodeAt(i)
+  }
+
+  // Check for JPEG magic number (FF D8 FF)
+  if (byteArray[0] === 0xFF && byteArray[1] === 0xD8 && byteArray[2] === 0xFF) {
+    return DATAURL_JPEG + base64
+  }
+
+  // Check for PNG magic number (89 50 4E 47)
+  if (byteArray[0] === 0x89 && byteArray[1] === 0x50 && byteArray[2] === 0x4E && byteArray[3] === 0x47) {
+    return DATAURL_PNG + base64
+  }
+
+  throw new Error('Unknown image format provided in Base64 string')
+}
+
 /**
  * An Async/Await version of
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/setTimeout|setTimeout}

package/ICAO.js

@@ -5,7 +5,7 @@ import { BASE_URL } from './Common.js'
  * ICAO
  * @classdesc Class for invoking ICAO checks on an image
  * @extends Plugin
- * @see {@link CanonScanner}
+ * @see {@link IFace}
  */
 class ICAO extends Plugin {
   /**
@@ -14,18 +14,19 @@ class ICAO extends Plugin {
    * @param {string} [baseURL] - Protocol, domain, and port for the service.
    * @param {string|object} plugin - The ID of the desired plugin to use for
    * this instance or an existing Plugin object. The plugin must support the
-   * "icao" method.
+   * `icao` method. Defaults to the `capture_verify_iface` plugin.
    *
    * @example
-   * const icao = new ICAO('capture_verify_iface')
+   * const icao = new ICAO()
    */
-  constructor (plugin, baseUrl = BASE_URL) {
+  constructor (plugin = 'capture_verify_iface', baseUrl = BASE_URL) {
     super(plugin, baseUrl)
   }
 
   /**
    * Check the ICAO compliance of an image
-   * @param {string} image - A base64 encoded image.
+   * @param {string|ImageSource} image - A string containing base64 encoded image
+   * data or an ImageSource object.
    *
    * @param {string|bool} [crop] - If falsy image will not be cropped, otherwise
    * the value will be interpreted as the preferred crop method which will vary
@@ -40,7 +41,7 @@ class ICAO extends Plugin {
    * // returned image
    * const camera = new CanonCamera()
    * const photo = await camera.takePhoto('base64')
-   * const icao = new ICAO('capture_verify_iface')
+   * const icao = new ICAO()
    * const results = await icao.check(photo)
    * const img = document.createElement('img')
    * img.src = 'data:image/jpeg;base64,' + results.cropped
@@ -48,8 +49,19 @@ class ICAO extends Plugin {
    * document.body.appendChild(img)
    */
   async check (image, cropMethod = false) {
+    let imageData
+
+    // If this is an ImageSource object fetch it's image data
+    if (typeof image === 'object' && image.constructor.name === 'ImageSource') {
+      imageData = await image.data()
+    } else if (typeof image === 'string') {
+      imageData = image
+    } else {
+      throw new Error('Unexpected value provided for image parameter')
+    }
+
     const body = {
-      base64: image,
+      base64: imageData,
       crop: Boolean(cropMethod),
       crop_method: cropMethod || undefined
     }

package/IFace.js

@@ -3,7 +3,8 @@
 */
 
 import ICAO from './ICAO.js'
-import { BASE_URL, blobToBase64 } from './Common.js'
+import ImageSource from './ImageSource.js'
+import { BASE_URL } from './Common.js'
 
 // This is not exported as we may eventually detect this from the plugin
 // See: Iface.matchModes()
@@ -15,10 +16,7 @@ const VALID_MODES = ['accurate', 'balanced', 'fast', 'accurate_server']
  *
  * @see {@link IFace}
  */
-export class Probe {
-  source
-  url
-  imageData
+export class Probe extends ImageSource {
   /**
    * Instantiate an IFace Probe
    * @constructor
@@ -30,59 +28,17 @@ export class Probe {
    * const candidate = new Candidate('/person/123.jpg', '123', 'url')
    */
   constructor (source, type = 'base64') {
-    // TODO:
-    // If the source is typeof object and/or type=object we should do some duck
-    // typing and accept any of...
-    // - The result of an ICAO check that contains a cropped image
-    // - An Image tag (fetch the source)
-    // - A Blob
-    // - An Array Buffer
-    // - An object that has a fullCapture method (call function in .data())
-    switch (type) {
-      case 'url':
-        this.url = source
-        break
-      case 'base64':
-        this.imageData = source
-        break
-      case 'dataurl':
-        this.imageData = source.split(',')[1]
-        break
-      case undefined:
-      case null:
-      default:
-        throw new Error('Invalid image source type provided')
-    }
-  }
-
-  /**
-   * Fetch the image data and base64 encode it
-   * @async
-   * @example
-   * const probe = new Probe("/img/photo.jpg")
-   * await probe.data()
-   * console.log(probe.imageData)
-   */
-  async data () {
-    if (!this.imageData) {
-      const response = await fetch(this.url)
-      const blob = await response.blob()
-      this.imageData = await blobToBase64(blob)
-    }
-  }
-
-  toJSON () {
-    return this.imageData
+    super(source, type)
   }
 }
 
 /**
  * Candidate
  * @classdesc Candidate Class for Innovatrics IFace SDK
- * @extends Probe
+ * @extends ImageSource
  * @see {@link IFace}
  */
-export class Candidate extends Probe {
+export class Candidate extends ImageSource {
   id
 
   // TODO: Support setting different modes on individual candidates

package/ImageSource.js

@@ -0,0 +1,110 @@
+import { blobToBase64, base64ToDataURL, checkResponse } from './Common.js'
+
+/**
+ * ImageSource
+ * @classdesc Class to handle loading various image formats
+ *
+ * @see {@link Probe}
+ */
+export class ImageSource {
+  source
+  url
+  imageData
+  type
+  /**
+   * Instantiate an ImageSource
+   * @constructor
+   * @param {string} source - The source of the image data.
+   * @param {string} [type] - The type of data in the image source, valid values
+   * are 'url', 'base64', and 'dataurl'. If not provided 'base64' is the default.
+   *
+   * @example
+   * const personPhoto = new ImageSource('/person/123.jpg', '123', 'url')
+   */
+  constructor (source, type = 'base64') {
+    // TODO:
+    // If the source is typeof object and/or type=object we should do some duck
+    // typing and accept any of...
+    // - The result of an ICAO check that contains a cropped image
+    // - An Image tag (fetch the source)
+    // - A Blob
+    // - An Array Buffer
+    // - An object that has a fullCapture method (call function in .data())
+    this.type = type
+    switch (this.type) {
+      case 'url':
+        this.url = source
+        break
+      case 'base64':
+        this.imageData = source
+        break
+      case 'dataurl':
+        this.imageData = source.split(',')[1]
+        break
+      case undefined:
+      case null:
+      default:
+        throw new Error('Invalid image source type provided')
+    }
+  }
+
+  /**
+   * Fetch the image data and base64 encode it
+   * @async
+   * @example
+   * const personPhoto = new ImageSource("/img/photo.jpg")
+   * await personPhoto.data()
+   * console.log(personPhoto.imageData)
+   */
+  async data () {
+    if (!this.imageData && this.url) {
+      const response = await fetch(this.url)
+      await checkResponse(response)
+      const blob = await response.blob()
+      this.imageData = await blobToBase64(blob)
+    }
+    return this.imageData
+  }
+
+  /**
+   * Create an <img> element, wait for it to load and return it
+   * @async
+   * @example
+   * // Load the image and draw it on a Canvas
+   * const img = await imgSrc.toImage()
+   * const canvas = document.createElement('canvas')
+   * const ctx = canvas.getContext('2d')
+   * canvas.width = img.width
+   * canvas.height = img.height
+   * ctx.drawImage(img, canvas.width, canvas.height, img.width, img.height)
+   */
+  async toImage () {
+    const img = new window.Image()
+    const promise = new Promise((resolve, reject) => {
+      img.onload = (data) => resolve(img)
+      img.onerror = (err) => reject(err)
+    })
+    switch (this.type) {
+      case 'url':
+        img.src = this.url
+        break
+      case 'base64':
+        img.src = base64ToDataURL(this.imageData)
+        break
+      case 'dataurl':
+        img.src = this.source
+        break
+      case undefined:
+      case null:
+      default:
+        throw new Error('Invalid image source type provided')
+    }
+    return promise
+  }
+
+  toJSON () {
+    return this.imageData
+  }
+}
+
+export default ImageSource

package/README.md

@@ -0,0 +1,3 @@
+# Capture Bridge JavaScript SDK for web applications
+
+See the [Changelog](CHANGELOG.md) for new features and breaking changes.

package/Version.js

@@ -4,5 +4,5 @@
  * @constant
  * @type {string}
  */
-const VERSION = '0.9.1'
+const VERSION = '0.10.1'
 export default VERSION

package/examples/canon.html

@@ -15,52 +15,6 @@
     Stream
   </button>
 </div>
-<script type="module">
-import CanonCamera from '/sdk/js/CanonCamera.js'
-(async () => {
-  const defaultSrc = '/demo/img/empty.jpg'
-  const defaultWidth = 400
-  const img = document.getElementById('img')
-  const capture = document.getElementById('capture')
-  const stream = document.getElementById('stream')
-  const rotation = document.getElementById('rotate')
-
-  img.src = defaultSrc
-  img.width = defaultWidth
-
-  try {
-    const camera = new CanonCamera()
-    const devices = await camera.devices();
-
-    if (!devices.length) {
-      return alert('No Canon Camera devices found')
-    }
-
-    // Start the first device's live feed and stream it to the img tag
-    stream.addEventListener('click', async () => {
-      const rotate = parseInt(rotation.value)
-      rotation.disabled = true
-      stream.disabled = true
-      img.src = await camera.streamUrl({rotate})
-    })
-
-    // Take a full capture and add the image to the page
-    capture.addEventListener('click', async () => {
-      const rotate = parseInt(rotation.value)
-      const capture = document.createElement('img')
-      img.src = defaultSrc
-      capture.src = await camera.takePhoto({rotate})
-      capture.width = defaultWidth
-      document.body.appendChild(capture)
-      rotation.disabled = false
-      stream.disabled = false
-    })
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./canon.js"></script>
 </body>
 </html>

package/examples/canon.js

@@ -0,0 +1,44 @@
+import CanonCamera from '../../../../sdk/js/CanonCamera.js'
+(async () => {
+  const defaultSrc = 'empty.jpg'
+  const defaultWidth = 400
+  const img = document.getElementById('img')
+  const capture = document.getElementById('capture')
+  const stream = document.getElementById('stream')
+  const rotation = document.getElementById('rotate')
+
+  img.src = defaultSrc
+  img.width = defaultWidth
+
+  try {
+    const camera = new CanonCamera()
+    const devices = await camera.devices()
+
+    if (!devices.length) {
+      return window.alert('No Canon Camera devices found')
+    }
+
+    // Start the first device's live feed and stream it to the img tag
+    stream.addEventListener('click', async () => {
+      const rotate = parseInt(rotation.value)
+      rotation.disabled = true
+      stream.disabled = true
+      img.src = await camera.streamUrl({ rotate })
+    })
+
+    // Take a full capture and add the image to the page
+    capture.addEventListener('click', async () => {
+      const rotate = parseInt(rotation.value)
+      const capture = document.createElement('img')
+      img.src = defaultSrc
+      capture.src = await camera.takePhoto({ rotate })
+      capture.width = defaultWidth
+      document.body.appendChild(capture)
+      rotation.disabled = false
+      stream.disabled = false
+    })
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/canon_getframe.html

@@ -15,54 +15,6 @@
     Stop Feed
   </button>
 </div>
-<script type="module">
-import CanonCamera from '/sdk/js/CanonCamera.js'
-(async () => {
-  const defaultSrc = '/demo/img/empty.jpg'
-  const img = document.getElementById('img')
-  const rotation = document.getElementById('rotate')
-  const frame = document.getElementById('frame')
-  const stop = document.getElementById('stop')
-
-  img.src = defaultSrc
-  img.width = 400
-
-  try {
-    const camera = new CanonCamera()
-    const devices = await camera.devices()
-
-    if (!devices.length) {
-      return alert('No Canon Camera devices found')
-    }
-
-    // Acquiring the first frame will take a few seconds while the camera
-    // starts up and begins streaming, subsequent frames will be returned
-    // instantaneously
-    let lastFrame;
-    frame.addEventListener('click', async () => {
-      stop.disabled = true
-      rotation.disabled = true
-      const rotate = parseInt(rotation.value)
-      // Cleanup the last frame captured, if any
-      if (lastFrame) {
-        URL.revokeObjectURL(lastFrame)
-      }
-      img.src = lastFrame = await camera.getMostRecentFrame({rotate})
-      rotation.disabled = false
-      stop.disabled = false
-    })
-
-    // Stop live feed
-    stop.addEventListener('click', async () => {
-      const result = await camera.stopFeed()
-      alert(result.message || result.status)
-    })
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./canon_getframe.js"></script>
 </body>
 </html>

package/examples/canon_getframe.js

@@ -0,0 +1,46 @@
+import CanonCamera from '../../../../sdk/js/CanonCamera.js'
+(async () => {
+  const defaultSrc = 'empty.jpg'
+  const img = document.getElementById('img')
+  const rotation = document.getElementById('rotate')
+  const frame = document.getElementById('frame')
+  const stop = document.getElementById('stop')
+
+  img.src = defaultSrc
+  img.width = 400
+
+  try {
+    const camera = new CanonCamera()
+    const devices = await camera.devices()
+
+    if (!devices.length) {
+      return window.alert('No Canon Camera devices found')
+    }
+
+    // Acquiring the first frame will take a few seconds while the camera
+    // starts up and begins streaming, subsequent frames will be returned
+    // instantaneously
+    let lastFrame
+    frame.addEventListener('click', async () => {
+      stop.disabled = true
+      rotation.disabled = true
+      const rotate = parseInt(rotation.value)
+      // Cleanup the last frame captured, if any
+      if (lastFrame) {
+        URL.revokeObjectURL(lastFrame)
+      }
+      img.src = lastFrame = await camera.getMostRecentFrame({ rotate })
+      rotation.disabled = false
+      stop.disabled = false
+    })
+
+    // Stop live feed
+    stop.addEventListener('click', async () => {
+      const result = await camera.stopFeed()
+      window.alert(result.message || result.status)
+    })
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/canon_lan.html

@@ -15,54 +15,6 @@
     Stream
   </button>
 </div>
-<script type="module">
-import CanonCamera from '/sdk/js/CanonCamera.js'
-(async () => {
-  const defaultSrc = '/demo/img/empty.jpg'
-  const defaultWidth = 400
-  const img = document.getElementById('img')
-  const capture = document.getElementById('capture')
-  const stream = document.getElementById('stream')
-  const rotation = document.getElementById('rotate')
-
-  img.src = defaultSrc
-  img.width = defaultWidth
-
-  try {
-    const defaultURL = 'https://windev2-local.capturebridge.net:9001'
-    const url = prompt('Enter remote Base URL', defaultURL)
-    const camera = new CanonCamera(url)
-    const devices = await camera.devices();
-
-    if (!devices.length) {
-      return alert('No Canon Camera devices found')
-    }
-
-    // Start the first device's live feed and stream it to the img tag
-    stream.addEventListener('click', async () => {
-      const rotate = parseInt(rotation.value)
-      rotation.disabled = true
-      stream.disabled = true
-      img.src = await camera.streamUrl({rotate})
-    })
-
-    // Take a full capture and add the image to the page
-    capture.addEventListener('click', async () => {
-      const rotate = parseInt(rotation.value)
-      const capture = document.createElement('img')
-      img.src = defaultSrc
-      capture.src = await camera.takePhoto({rotate})
-      capture.width = defaultWidth
-      document.body.appendChild(capture)
-      rotation.disabled = false
-      stream.disabled = false
-    })
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./canon_lan.js"></script>
 </body>
 </html>

package/examples/canon_lan.js

@@ -0,0 +1,46 @@
+import CanonCamera from '../../../../sdk/js/CanonCamera.js'
+(async () => {
+  const defaultSrc = 'empty.jpg'
+  const defaultWidth = 400
+  const img = document.getElementById('img')
+  const capture = document.getElementById('capture')
+  const stream = document.getElementById('stream')
+  const rotation = document.getElementById('rotate')
+
+  img.src = defaultSrc
+  img.width = defaultWidth
+
+  try {
+    const defaultURL = 'https://windev2-local.capturebridge.net:9001'
+    const url = window.prompt('Enter remote Base URL', defaultURL)
+    const camera = new CanonCamera(url)
+    const devices = await camera.devices()
+
+    if (!devices.length) {
+      return window.alert('No Canon Camera devices found')
+    }
+
+    // Start the first device's live feed and stream it to the img tag
+    stream.addEventListener('click', async () => {
+      const rotate = parseInt(rotation.value)
+      rotation.disabled = true
+      stream.disabled = true
+      img.src = await camera.streamUrl({ rotate })
+    })
+
+    // Take a full capture and add the image to the page
+    capture.addEventListener('click', async () => {
+      const rotate = parseInt(rotation.value)
+      const capture = document.createElement('img')
+      img.src = defaultSrc
+      capture.src = await camera.takePhoto({ rotate })
+      capture.width = defaultWidth
+      document.body.appendChild(capture)
+      rotation.disabled = false
+      stream.disabled = false
+    })
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/canon_minimal.html

@@ -2,36 +2,6 @@
 <html>
 <head><title>Canon Camera Minimal Example</title></head>
 <body>
-<script type="module">
-import CanonCamera from '/sdk/js/CanonCamera.js'
-(async () => {
-  try {
-
-    // Instantiate a Canon Camera
-    const camera = new CanonCamera()
-
-    const devices = await camera.devices();
-
-    if (!devices.length) {
-      return alert('No Canon Camera devices found')
-    }
-
-    // Start the device's live feed and stream it to an img tag
-    const img = document.createElement('img')
-    img.src = await camera.streamUrl()
-    img.height = 400
-    document.body.appendChild(img)
-
-    // Demo live feed for a few seconds, take a picture, and update the img tag
-    setTimeout(async () => {
-      img.src = await camera.takePhoto()
-    }, 9000)
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./canon_minimal.js"></script>
 </body>
 </html>

package/examples/canon_minimal.js

@@ -0,0 +1,27 @@
+import CanonCamera from '../../../../sdk/js/CanonCamera.js'
+(async () => {
+  try {
+    // Instantiate a Canon Camera
+    const camera = new CanonCamera()
+
+    const devices = await camera.devices()
+
+    if (!devices.length) {
+      return window.alert('No Canon Camera devices found')
+    }
+
+    // Start the device's live feed and stream it to an img tag
+    const img = document.createElement('img')
+    img.src = await camera.streamUrl()
+    img.height = 400
+    document.body.appendChild(img)
+
+    // Demo live feed for a few seconds, take a picture, and update the img tag
+    setTimeout(async () => {
+      img.src = await camera.takePhoto()
+    }, 9000)
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/icao.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head><title>ICAO Example</title></head>
+<body>
+<script type="module" src="./icao.js"></script>
+</body>
+</html>

package/examples/icao.js

@@ -0,0 +1,80 @@
+import ICAO from '../../../../sdk/js/ICAO.js'
+import ImageSource from '../../../../sdk/js/ImageSource.js'
+
+(async () => {
+  try {
+    const icao = new ICAO()
+    const imgSrc = new ImageSource('icao.jpg', 'url')
+
+    // Perform an ICAO check against the provided Image and return cropped
+    const results = await icao.check(imgSrc, true)
+
+    // Our stock photo is zoomed in too close, so we pad the canvas to allow for
+    // drawing a box around the cropped portion
+    const padding = 150
+
+    // stroke/arc color
+    const color = 'rgba(0,255,0,0.5)'
+
+    // Load the image and draw it on a Canvas
+    const img = await imgSrc.toImage()
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    canvas.width = img.width + padding
+    canvas.height = img.height + padding
+    ctx.drawImage(img, padding / 2, padding / 2, img.width, img.height)
+
+    document.body.appendChild(canvas)
+
+    ctx.strokeStyle = color
+    ctx.lineWidth = 4
+
+    // Insert cropped image into the DOM
+    const croppedSrc = new ImageSource(results.cropped)
+    document.body.appendChild(await croppedSrc.toImage())
+
+    // Draw points for left and right eye
+    ctx.beginPath()
+    ctx.arc(results.face.left_eye.x + padding / 2,
+      results.face.left_eye.y + padding / 2, 5, 0, 2 * Math.PI)
+    ctx.fillStyle = color
+    ctx.fill()
+
+    ctx.beginPath()
+    ctx.arc(results.face.right_eye.x + padding / 2,
+      results.face.right_eye.y + padding / 2, 5, 0, 2 * Math.PI)
+    ctx.fillStyle = color
+    ctx.fill()
+
+    // Draw bounding box where image was cropped
+    ctx.beginPath()
+    ctx.moveTo(results.crop_boundary[0].x + padding / 2,
+      results.crop_boundary[0].y + padding / 2)
+    for (let i = 1; i < results.crop_boundary.length; i++) {
+      ctx.lineTo(results.crop_boundary[i].x + padding / 2,
+        results.crop_boundary[i].y + padding / 2)
+    }
+    ctx.closePath()
+    ctx.stroke()
+
+    // Display ICAO attributes
+    const output = document.createElement('textarea')
+    output.style.display = 'block'
+    output.rows = 35
+    output.cols = 50
+    output.value = '# Checks\n\n'
+    document.body.appendChild(output)
+    results.attributes.filter(attr => attr.type === 'check').forEach(({ id, score, compliant }) => {
+      output.value += (compliant ? '✅' : '❌') + `${id}: ${score}\n`
+    })
+
+    output.value += '\n\n# Data\n\n'
+
+    results.attributes.filter(attr => attr.type === 'data').forEach(({ id, score, data }) => {
+      output.value += `${id}: ${data || score}\n`
+    })
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/mockcamera.html

@@ -2,7 +2,7 @@
 <html>
 <head><title>Mock Camera Example</title></head>
 <body>
-<img id="img" src="/demo/img/empty.jpg"/>
+<img id="img" src="empty.jpg"/>
 <div>
   <div>
     <label>Rotate</label>
@@ -15,47 +15,6 @@
     Stream
   </button>
 </div>
-<script type="module">
-import MockCamera from '/sdk/js/MockCamera.js'
-(async () => {
-  const defaultSrc = '/demo/img/empty.jpg'
-  const defaultWidth = 400
-  const img = document.getElementById('img')
-  const capture = document.getElementById('capture')
-  const stream = document.getElementById('stream')
-  const rotation = document.getElementById('rotate')
-
-  img.src = defaultSrc
-  img.width = defaultWidth
-
-  try {
-    const camera = new MockCamera()
-
-    // Start the first device's live feed and stream it to the img tag
-    stream.addEventListener('click', async () => {
-      const rotate = parseInt(rotation.value)
-      rotation.disabled = true
-      stream.disabled = true
-      img.src = await camera.streamUrl({rotate})
-    })
-
-    // Take a full capture and add the image to the page
-    capture.addEventListener('click', async () => {
-      const rotate = parseInt(rotation.value)
-      const capture = document.createElement('img')
-      img.src = defaultSrc
-      capture.src = await camera.takePhoto({rotate})
-      capture.width = defaultWidth
-      document.body.appendChild(capture)
-      rotation.disabled = false
-      stream.disabled = false
-    })
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./mockcamera.js"></script>
 </body>
 </html>

package/examples/mockcamera.js

@@ -0,0 +1,39 @@
+import MockCamera from '../../../../sdk/js/MockCamera.js'
+(async () => {
+  const defaultSrc = 'empty.jpg'
+  const defaultWidth = 400
+  const img = document.getElementById('img')
+  const capture = document.getElementById('capture')
+  const stream = document.getElementById('stream')
+  const rotation = document.getElementById('rotate')
+
+  img.src = defaultSrc
+  img.width = defaultWidth
+
+  try {
+    const camera = new MockCamera()
+
+    // Start the first device's live feed and stream it to the img tag
+    stream.addEventListener('click', async () => {
+      const rotate = parseInt(rotation.value)
+      rotation.disabled = true
+      stream.disabled = true
+      img.src = await camera.streamUrl({ rotate })
+    })
+
+    // Take a full capture and add the image to the page
+    capture.addEventListener('click', async () => {
+      const rotate = parseInt(rotation.value)
+      const capture = document.createElement('img')
+      img.src = defaultSrc
+      capture.src = await camera.takePhoto({ rotate })
+      capture.width = defaultWidth
+      document.body.appendChild(capture)
+      rotation.disabled = false
+      stream.disabled = false
+    })
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/mockcamera_getframe.html

@@ -15,49 +15,6 @@
     Stop Feed
   </button>
 </div>
-<script type="module">
-import MockCamera from '/sdk/js/MockCamera.js'
-(async () => {
-  const defaultSrc = '/demo/img/empty.jpg'
-  const img = document.getElementById('img')
-  const rotation = document.getElementById('rotate')
-  const frame = document.getElementById('frame')
-  const stop = document.getElementById('stop')
-
-  img.src = defaultSrc
-  img.width = 400
-
-  try {
-    const camera = new MockCamera()
-    const devices = await camera.devices()
-
-    // Grab a frame from the live feed
-    let lastFrame;
-    frame.addEventListener('click', async () => {
-      stop.disabled = true
-      rotation.disabled = true
-      const rotate = parseInt(rotation.value)
-      // Cleanup the last frame captured, if any
-      if (lastFrame) {
-        URL.revokeObjectURL(lastFrame)
-      }
-      img.src = lastFrame = await camera.getMostRecentFrame({rotate})
-      document.body.appendChild(frame)
-      rotation.disabled = false
-      stop.disabled = false
-    })
-
-    // Stop live feed
-    stop.addEventListener('click', async () => {
-      const result = await camera.stopFeed()
-      alert(result.message || result.status)
-    })
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./mockcamera_getframe.js"></script>
 </body>
 </html>

package/examples/mockcamera_getframe.js

@@ -0,0 +1,40 @@
+import MockCamera from '../../../../sdk/js/MockCamera.js'
+(async () => {
+  const defaultSrc = 'empty.jpg'
+  const img = document.getElementById('img')
+  const rotation = document.getElementById('rotate')
+  const frame = document.getElementById('frame')
+  const stop = document.getElementById('stop')
+
+  img.src = defaultSrc
+  img.width = 400
+
+  try {
+    const camera = new MockCamera()
+
+    // Grab a frame from the live feed
+    let lastFrame
+    frame.addEventListener('click', async () => {
+      stop.disabled = true
+      rotation.disabled = true
+      const rotate = parseInt(rotation.value)
+      // Cleanup the last frame captured, if any
+      if (lastFrame) {
+        URL.revokeObjectURL(lastFrame)
+      }
+      img.src = lastFrame = await camera.getMostRecentFrame({ rotate })
+      document.body.appendChild(frame)
+      rotation.disabled = false
+      stop.disabled = false
+    })
+
+    // Stop live feed
+    stop.addEventListener('click', async () => {
+      const result = await camera.stopFeed()
+      window.alert(result.message || result.status)
+    })
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/mockcamera_minimal.html

@@ -2,30 +2,6 @@
 <html>
 <head><title>Mock Camera Minimal Example</title></head>
 <body>
-<script type="module">
-import MockCamera from '/sdk/js/MockCamera.js'
-(async () => {
-  try {
-
-    // Instantiate a Mock Camera
-    const camera = new MockCamera()
-
-    // Start the device's live feed and stream it to an img tag
-    const img = document.createElement('img')
-    img.src = await camera.streamUrl()
-    img.height = 400
-    document.body.appendChild(img)
-
-    // Demo live feed for a few seconds, take a picture, and update the img tag
-    setTimeout(async () => {
-      img.src = await camera.takePhoto()
-    }, 9000)
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./mockcamera_minimal.js"></script>
 </body>
 </html>

package/examples/mockcamera_minimal.js

@@ -0,0 +1,21 @@
+import MockCamera from '../../../../sdk/js/MockCamera.js'
+(async () => {
+  try {
+    // Instantiate a Mock Camera
+    const camera = new MockCamera()
+
+    // Start the device's live feed and stream it to an img tag
+    const img = document.createElement('img')
+    img.src = await camera.streamUrl()
+    img.height = 400
+    document.body.appendChild(img)
+
+    // Demo live feed for a few seconds, take a picture, and update the img tag
+    setTimeout(async () => {
+      img.src = await camera.takePhoto()
+    }, 9000)
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/verifone_signature.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head><title>Verifone Minimal Example</title></head>
+<body>
+<script type="module" src="./verifone_signature.js"></script>
+</body>
+</html>

package/examples/verifone_signature.js

@@ -0,0 +1,14 @@
+import Verifone from '../../../../sdk/js/Verifone.js'
+(async () => {
+  try {
+    const tablet = new Verifone()
+
+    const img = document.createElement('img')
+    img.src = await tablet.signature({ format: 'jpg' })
+    await tablet.clear()
+    document.body.appendChild(img)
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/examples/windows_scanner_minimal.html

@@ -3,30 +3,6 @@
 <head><title>Windows Scanner Example</title></head>
 <body>
 <img id="img"/>
-<script type="module">
-import WindowsScanner from '/sdk/js/WindowsScanner.js'
-(async () => {
-  try {
-
-    const scanner = new WindowsScanner()
-
-    const devices = await scanner.devices();
-
-    if (!devices.length) {
-      return alert('No Scanner devices found')
-    }
-
-    let scan = await scanner.scan()
-
-    document.createElement('img')
-    img.src = await scanner.scan()
-    document.body.appendChild(img)
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
+<script type="module" src="./windows_scanner_minimal.js"></script>
 </body>
 </html>

package/examples/windows_scanner_minimal.js

@@ -0,0 +1,19 @@
+import WindowsScanner from '../../../../sdk/js/WindowsScanner.js'
+(async () => {
+  try {
+    const scanner = new WindowsScanner()
+
+    const devices = await scanner.devices()
+
+    if (!devices.length) {
+      return window.alert('No Scanner devices found')
+    }
+
+    const img = document.createElement('img')
+    img.src = await scanner.scan()
+    document.body.appendChild(img)
+  } catch (e) {
+    console.error(e)
+    window.alert(`Error: ${e.message}`)
+  }
+})()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capturebridge/sdk",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "description": "Capture Bridge JavaScript SDK for web applications",
   "type": "module",
   "license": "Apache-2.0"

package/examples/verifone_minimal.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head><title>Verifone Minimal Example</title></head>
-<body>
-<script type="module">
-import Verifone from '/sdk/js/Verifone.js'
-(async () => {
-  try {
-    const tablet = new Verifone()
-
-    const img = document.createElement('img')
-    img.src = await tablet.signature({format: 'jpg'})
-    await tablet.clear()
-    document.body.appendChild(img)
-
-  } catch (e) {
-    console.error(e)
-    alert(`Error: ${e.message}`)
-  }
-})()
-</script>
-</body>
-</html>