Skip to content
A JavaScript version of the Bose Frames SDK
Branch: master
Clone or download
Latest commit e38dade Apr 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build added gifs Apr 23, 2019
developerShowcase Update developerShowcase6.gif Apr 23, 2019
extension extension template Apr 22, 2019
node_modules
script added gifs Apr 23, 2019
LICENSE Create LICENSE Feb 7, 2019
README.md Update README.md Apr 24, 2019
bose-ar-web-sdk.min.js more stuff Apr 21, 2019
index.html added an extention semplate Apr 22, 2019
package-lock.json
package.json now as a simple web component Apr 21, 2019
webpack.config.js more stuff Apr 21, 2019

README.md

Fabien

🕶️ Bose AR Web SDK

A JavaScript SDK for Bose AR-enabled products. Click here for a Live Demo!

📚 Table of Contents

⚙️ Setting up the SDK

🔓 Enabling and Disabling Sensors

🙇 Enabling and Disabling Gestures

👂 Listening for Events

🛠️ Creating an Extension

🏆 Developer Showcase

🙏 Developer Wishlist

⚙️ Setting up the SDK

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

    • Chrome for Desktop: 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. Save a local copy of bose-ar-web-sdk.min.js

  3. 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.

🔓 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:

  • accelerometer
  • gyroscope
  • rotation
  • game-rotation

⏲️ Valid sensor attribute values:

  • 20 or "very-fast"
  • 40 or "fast"
  • 80 or "normal"
  • 160 or "slow"
  • 320 or "very-slow"

🙇 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:

  • single-tap (coming soon)
  • double-tap
  • head-nod
  • head-shake

👂 Listening for Events

  • To listen for sensor or gesture events, add an eventListener to the custom element:
document.querySelector("bose-ar-device").addEventListener("accelerometer", yourCustomCallback);

👌 Valid event names:

  • "accelerometer"

  • "gyroscope"

  • "rotation"

  • "gameRotation"

  • "singleTap" (coming soon)

  • doubleTap

  • "headNod"

  • "headShake"

  • To get the event data, you can get it from the custom element's attributes:

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

👌 Valid attributes for events:

  • "accelerometer"
    • "accelerometerX"
    • "accelerometerY"
    • "accelerometerZ"
    • "accelerometerTimestamp"
  • "gyroscope"
    • "gyroscopeX"
    • "gyroscopeY"
    • "gyroscopeZ"
    • "gyroscopeTimestamp"
  • "rotation"
    • "rotationW"
    • "rotationX"
    • "rotationY"
    • "rotationZ"
    • "rotationYaw"
    • "rotationPitch"
    • "rotationRoll"
    • "rotationTimestamp"
  • "gameRotation"
    • "gameRotationW"
    • "gameRotationX"
    • "gameRotationY"
    • "gameRotationZ"
    • "gameRotationYaw"
    • "gameRotationPitch"
    • "gameRotationRoll"
    • "gameRotationTimestamp"
  • "singleTap" (coming soon)
    • "singleTapTimestamp"
  • "headNod"
    • "headNodTimestamp"
  • "headShake"
    • "headShakeTimestamp"

🛠️ Creating an Extension

  1. Download the extension folder
  2. Customize the extension interface by adding buttons and sliders and stuff to popup.html
  3. 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.

🏆 Developer Showcase

Send us an email at zack@ukaton.com if you have a cool application made with our sdk! Cameron
Cameron
Cameron
Cameron
Fabien
Fabien

🙏 Developer Wishlist

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

  • Social Area Network 🗺️🗫 - Place voice recordings on a map for others to hear (or only for yourself as a location-triggered notes app or to-do list).
  • Where You At? 🤷 - Call a friend (or a group of friends) and know where they are by listening to what direction their voice is coming from, using WebRTC (or a WebRTC wrapper) to stream both Voice and Location Data, as well as using the Resonance Audio SDK for sound spatialization.
  • Yelp Radio 🥡😋💬 🤤 - Hear Yelp reviews as you pass by restaurants, using your location and Yelp's APIs to convert written reviews to speech using the Web Speech API.
  • Twitter Extension 🗨️🐦 - Go on Twitter and convert tweets to speech, listening to your feed in the background. You can even nod to "like" a tweet or double-tap to comment.
You can’t perform that action at this time.