31:[{"id":"6a8d0366ebb206ae2c11f58ed669963a9e1289398b5d2f67166a2f126a19645253a8c2ba4269b75dfe4f5e2536f702c5879416b97db8300430f119e2c311730e","href":"https://static.observableusercontent.com/files/6a8d0366ebb206ae2c11f58ed669963a9e1289398b5d2f67166a2f126a19645253a8c2ba4269b75dfe4f5e2536f702c5879416b97db8300430f119e2c311730e","name":"image.png","type":"image/png","lastModified":1619718901710.146,"size":204664}] 2f:{"title":"Bluetooth Proxy PoC","cells":[{"id":39,"value":"md`# Bluetooth Proxy PoC\n\nBluetooth does not work in embedded cross-origin iframes. So this is a work around with [serverless cells](https://observablehq.com/@endpointservices/serverless-cells) to get in contact with the Bluetooth API. \n\n![](${await FileAttachment(\"image.png\").url()})\n\nOpen a 2nd tab by clicking: ${\n bluetoothLink.outerHTML\n}. The opened tab is able to communicate back to *this* notebook. And this notebook is able to send commands to it. Thus, we are finally able to use the bluetooth API from a notebook (in theory, I have not fleshed the details out, advice welcome on how to proxy the API without a ton of code).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"selectedBluetoothDeviceId = {\n const events = [];\n return Generators.observe(next => {\n next([]);\n window.onmessage = e => {\n if (e.origin !== \"https://endpointservice.web.app\") return;\n\n events.push(e.data);\n next(events);\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { deploy } from '@endpointservices/serverless-cells'","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Cross-origin bridge to child iframe\n\nThe bridge is a child iframe of the observable notebook. As such it cannot open a bluetooth session. However, even though it is cross-origin it can communicate with the parent bidirectionally using postMessage. So we use this to create a converter to https://endpointservice.web.app domain.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"bridgeLink = deploy(\"bridge\", (req, res) => {\n res.send(\n html`\n

Bridge

\n`.outerHTML\n );\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"bridge = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Bluetooth Page\n\nThe Bluetooth page has to be its own top level page so it can call bluetooth API. It is on https://endpointservice.web.app domain, so it can can also communicate using Broadcast channel with the bridge iframe who is on same-origin, just click the link below to open it!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"bluetoothLink = {\n const baseLink = deploy(\"bluetooth\", (req, res) => {\n res.send(\n html`\n \n \n `.outerHTML\n );\n });\n return html`bluetooth`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"session = randomId(30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"import { randomId } from '@tomlarkworthy/randomid'","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"footer","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}