Cross-origin iframes and the Bluetooth Web API

[trarbr]

In order to document Blue Heron (a Bluetooth library for Nerves) in the Nerves Livebook, I would like to implement custom Kinos (with Kino.JS) which use the Bluetooth Web API. I realise the Bluetooth Web API is not well supported, but if I could make it work in the Nerves Livebook, it would be a great tool for interactive Bluetooth tutorials - as any interaction will require two devices, and the browser could be one of them.

I tried doing a small proof-of-concept of this inside Livebook yesterday, but I ran into a blocker pretty quickly, as I ran into this error: DOMException: requestDevice() called from cross-origin iframe. My notebook looks like this:

Custom Kino for BLE

Mix.install([
  {:kino, "~> 0.6.2"}
])

Trying it out

defmodule KinoBluetooth.Scanner do
  use Kino.JS

  def new(opts) do
    Kino.JS.new(__MODULE__, opts)
  end

  asset "main.js" do
    """
    export function init(ctx, opts) {
      ctx.root.innerHTML = `<button id="bleEnable">Enable Bluetooth</button>`;

      ctx.root.addEventListener('click', function (event) {
        console.log(event.target);
        navigator.bluetooth.requestDevice({
          acceptAllDevices: true
        })
        .then(device => { console.log(device) })
        .catch(error => { console.error(error); });
      });
    }
    """
  end
end

KinoBluetooth.Scanner.new(%{})

---

I am running the Livebook inside Chrome on fly.io. The DOMException error occurs when I click the button that's rendered by KinoBluetooth.Scanner.

I reckon the error stems from Chrome being very strict about interactions with the Bluetooth Web API. I don't know enough about Livebook to understand what's rendered in an iframe and why, but I'd like to hear if you think it would be possible to make this work, or if I should explore other options 😄

[jonatanklosko]

Hey @trarbr! We put a lot of effort to make web APIs like camera/microphone work inside the sandboxed iframe. However, it looks like currently Bluetooth is just not allowed and there's some work to support an opt-in (ref, ref, ref). That's unfortunate, since your idea is awesome :(

[trarbr]

Thank you for the swift reply @jonatanklosko. And thank you for looking around, those links give me hope that this will be solved in the future. I'll probably start by building a companion site to the livebook and see where it goes from there.

Oh, and thank you for all the work on Livebook, it is such an excellent tool and a joy to use 🥇