Web Bluetooth API - cross-origin iframe security error

I’m trying to stream sensor data directly to a notebook using the web bluetooth API.

Here’s the notebook: https://beta.observablehq.com/@aallman/ble-data-from-esp32-initial-test

When I try to call navigator.bluetooth.requestDevice I get this error: “requestDevice() called from cross-origin iframe.” It seems like this problem might be related to the issue with native window notifications (Native window notifications - not working?). If so, has there been any further thoughts on how to handle this type of situation?

My first approach to getting sensor data was using websockets but I ran into problems getting the secure version (wss) to work on the little iot device that’s producing the sensor data. Both the websocket and web bluetooth approaches worked fine using non-secure local site, but I was really hoping to be able to work with the live data directly in Observable.

Thanks!!

3 Likes

It looks like Chrome disabled bluetooth access within a cross-origin iframe, so I don’t think there’s currently a way to do this. The relevant issue:

https://bugs.chromium.org/p/chromium/issues/detail?id=518042&desc=2

It looks like once Chrome adds support, we can add “bluetooth” to the iframe feature policy:

https://chromium-review.googlesource.com/c/chromium/src/+/657572

2 Likes

Thanks Mike!

Hi aallman, have you done any more work with WebBLE since this post? I’m looking for examples of streaming arduino sensor data into Observable or other data visualization solutions.

2 Likes

I have a working PoC!!

The bluetooth API communication is done local to the browser (no network involved once the bridge is in place).

1 Like

Thanks for sharing this Tom!

I’m looking forward to playing with this on a home project. I’m going to try to use this technique to stream signal data to Observable and play around with real-time visualization to help with tuning of PID loops on a table tennis ball robot.

Andy

1 Like

Sorry! I missed your note when it was first posted. I haven’t done much with streaming data into a web page at this point; only sending commands from a web page to a device (ESP32).

Andy

1 Like

I want robots too (specifically Dash, like GitHub - IlyaSukhanov/morseapi: Unofficial API for controlling Wonder Workshop's Dot and Dash robots)

Hi Andy,

No problem and thanks - that was like a time capsule - March of 2020!

I legit got a robot application working with this route

Bidirectional communication. Comlink (GitHub - GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.) is pretty useful though I could not quite get callbacks working over Broadcast channel properly.

I believe that you don’t need a serverless cell. Opening an object URL should be sufficient.

1 Like

hi @tomlarkworthy , @mootari is right! A while ago, I had a chat with @yurivish about this issue on Slack. Yuri told me about the object URL trick!

Here is an unfinished/unpublished experiment.

The notebook I’ve learned about it

2 Likes