Home

Awesome

<a href="https://twitter.com/utopiah/status/1113829382269865984" target="_blank">Fabien</a>

🕶️ Bose AR Web SDK

A JavaScript SDK for Bose AR-enabled products, including the Bose Frames, Bose QuietComfort 35 Wireless II, and Bose 700 Wireless . Click here for a Live Demo!

📚 Table of Contents

⚙️ Setting up the SDK

🔓 Enabling and Disabling Sensors

🙇 Enabling and Disabling Gestures

👂 Listening for Events

🏆 Developer Showcase

🛠️ Creating an Extension

🎛️ Bose for Max

👩‍💻 BLE Specification

🙏 Developer Wishlist

⚙️ Setting up the SDK

  1. Make sure you have a Web Bluetooth-enabled device

    • Chrome for Desktop [PREFERRED]: enable Web Bluetooth by going to chrome://flags/#enable-experimental-web-platform-features and check Experimental Web Platform features
    • iOS: Use this app to demo your web apps. Unfortunately iOS is very negligent on various Web API's.

  2. Update your Bose AR-enabled headset's firmware on their website

  3. Disconnect your Bose AR-enabled from your smartphone if you have the Bose Connect App installed.

  4. Save a local copy of bose-ar-web-sdk.min.js

  5. In your HTML <head></head> element, insert the file in a script element:

<script src="bose-ar-web-sdk.min.js"></script>
  1. In your HTML <body></body> element, insert the following custom element:
<bose-ar-device></bose-ar-device>

This element represents your Bose AR-enabled device, and will be used to interface with it. On your website the element will display a 🕶️ button that will attempt to connect with your Bose AR-enabled device when clicked, and become hidden once connected.

NOTE: Bose AR devices have 2 types of Bluetooth Connections: an Audio connection (audio playback and microphone controls) and an AR connection (head-tracking and gestures). This SDK is used to establish an AR connection and will allow you to enable/disable sensors/gestures, as well as access the sensor/gesture data. If you want to access the Bose AR device as an audio device (like normal bluetooth headphones and headsets), you'll need to connect to it again "the usual way" and use the standard Web Audio API.

ALSO NOTE: You can connect to multiple Bose AR devices (as an AR device) simultaneously, as well as have a single Bose AR device be accessed from multiple browsers (e.g. your smartphone and laptop). However, disabling a Bose AR's sensor/gesture from one browser disables it for any browser observing the Bose AR device's sensors/gestures.

ALSO ALSO NOTE: The browser needs permission from the user to connect to the Bose AR device (as an AR device as mentioned in the first "NOTE"), but no action on the Bose AR device is needed (e.g. pressing a "connect" button on the Bose AR device). This means anyone can access an unassuming user's Bose AR device from their browser and enable/disable/read sensor/gesture data without the Bose AR device owner even knowing. I'm not sure why they designed them this way, but I don't work there.

🔓 Enabling and Disabling Sensors

🔓 To enable sensors before runtime, add them as attributes in the custom element, with an attribute value indicating the refresh rate (in milliseconds or as a string):

<bose-ar-device gyroscope=20 rotation="fast"></bose-ar-device>

🔓 To enable sensors during runtime, set the custom element's attribute:

document.querySelector("bose-ar-device").setAttribute("rotation", "fast");

🔒 To disable sensors during runtime, remove the custom element's attribute:

document.querySelector("bose-ar-device").removeAttribute("rotation");

👌 Valid sensor attributes:

⏲️ Valid sensor attribute values:

🙇 Enabling and Disabling Gestures

🔓 To enable gestures before runtime, add them as attributes in the custom element:

<bose-ar-device double-tap head-nod head-shake></bose-ar-device>

🔓 To enable gestures during runtime, set the custom element's attribute:

document.querySelector("bose-ar-device").setAttribute("double-tap", '');

🔒 To disable gestures during runtime, remove the custom element's attribute:

document.querySelector("bose-ar-device").removeAttribute("double-tap");

👌 Valid gesture attributes:

👂 Listening for Events

document.querySelector("bose-ar-device").addEventListener("accelerometer", yourCustomCallback);

👌 Valid event names:

document.querySelector("bose-ar-device").addEventListener("accelerometer", event => {
  const rotationX = Number(document.querySelector("bose-ar-device").getAttribute("rotationX"));
});

👌 Valid attributes for events:

🏆 Developer Showcase

Send us an email at zack@ukaton.com if you have a cool application made with our sdk!
<a href="https://twitter.com/ConcreteSciFi/status/1305381643465535488?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1300269076183310336?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1299191909521317890?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1295170737544638464?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1274502352133742594?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/utopiah/status/1258475990197645312?s=20" target="_blank">Fabien</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1222309702597406720?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1220873068567908352?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1215427076506865664" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1214344297329262593" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1214310331255681024" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1213872089532256256" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1213665643934863360" target="_blank">Zack</a> <br> <a href="https://twitter.com/zeGladScientist/status/1204795862771097601" target="_blank">Sabio</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1182442907233472512" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1211068827225640961?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1204190055578791936?s=20" target="_blank">Michael</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1201342080942895105" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1203797587045703686?s=20" target="_blank">Zack</a> <br> <a href="https://twitter.com/zeGladScientist/status/1192504458342629376" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1149059903094321152" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1162792737025875968" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1154575658808299521" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1156663791980912640" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1154160202742059008" target="_blank">Zack</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1150631793848197122" target="_blank">Zack</a> <br> <a href="https://twitter.com/ckundo/status/1135003825750839296" target="_blank">Cameron</a> <br> <a href="https://twitter.com/ConcreteSciFi/status/1134181855379435520" target="_blank">Cameron</a> <br> <a href="https://twitter.com/ckundo/status/1134293692225937414" target="_blank">Cameron</a> <br> <a href="https://www.youtube.com/watch?v=sCJ7YQSfeyE" target="_blank">Cameron</a> <br> <a href="https://www.youtube.com/watch?v=rk_SEOyMN9g" target="_blank">Cameron</a> <br> <a href="https://www.youtube.com/watch?v=ThkYJTmqIp4" target="_blank">Zack</a> <br> <a href="https://www.youtube.com/watch?v=W8UvGehtQvs" target="_blank">Zack</a> <br> <a href="https://twitter.com/ckundo/status/1132817208881614848" target="_blank">Cameron</a> <br> <a href="https://twitter.com/utopiah/status/1113829382269865984" target="_blank">Fabien</a> <br> <a href="https://twitter.com/utopiah/status/1115286049536843782" target="_blank">Fabien</a> <br> <a href="https://twitter.com/ckundo/status/1109563901463674881" target="_blank">Cameron</a> <br> <a href="https://twitter.com/ckundo/status/1109603745497784326" target="_blank">Cameron</a> <br> <a href="https://twitter.com/ckundo/status/1109872642520166400" target="_blank">Cameron</a> <br> <a href="https://www.youtube.com/watch?v=SZagtIsUx9Q" target="_target">Cameron</a> <br>

🛠️ Creating an Extension

  1. Download the extension folder
  2. Add your custom code in a Promise returned in injection.js by the window.boseARDeviceElement.connect(); method
  3. Customize the extension interface by adding buttons and sliders and stuff to popup.html
  4. Add eventListeners to the interface elements in popup.js, using sendMessage(message) to forward the event to the current website you're on. This message should include a case property value to specify the purpose of the message.
    myButton.addEventListener("click", event => {
        const myMessage = {
            case : "myCase",
        };
        sendMessage(myMessage);
    });
  1. Add your case string to the switch(event.data.case){} block in injection.js, which will receive the message object created in the previous step. Here you can define your custom behavior, using both the message case and any extra values you passed in the message object.
  2. Load your extension into Chrome by going to chrome://extensions/, clicking Load unpacked, and selecting your edited extension folder.
  3. You can change the name of the extension by going to manifest.json and changing the name property.
  4. You can change the icon by replacing icon.png with your own image.

🎛️ Bose for Max

Prefer Cycling '74's Max? Now you can use as many Bose AR devices as you want in a Max Patch using Node for Max via WebSockets!

  1. Download the bose-for-max folder
  2. Open bose-for-max.maxpat in Max (Max 8 is required for Node for Max.
  3. Go to localhost:3000 to connect your BoseAR device via the WebSDK (the top of the webpage will display the socket connection index to distinguish multiple devices in the Patch)
  4. Once connected, you can enable/disable sensors/gestures either in the Patch or the webpage
  5. For multiple devices, copy-and-paste the BoseAR device region under Bose AR Device #, and change the # to indicate other devices via their socket connection index (shown at the top of the web page)

🙏 Developer Wishlist

Our time is limited, so we'd greatly appreciate it if you guys could implement some of these ideas: