A Weird Imagination

Share from phone to local web app

Posted in

The problem#

Previously, I covered how to programmatically navigate Firefox to a URL. But what's the most convenient way for the user to provide that URL? It would be great if when viewing a web page on one device, it would take just a few clicks to open it in the Firefox window on the target device.

You may have noticed this sounds a lot like the "cast" feature in Chrome; we're just trying to build a simplified version of it that we have full control over. At least that UI already exists, which simplifies the problem to figuring out how we can add our own option to the share menu that casting appears in (without having to write and publish our own apps for Android and iOS) or somehow make use of one of the existing options.

The Web Share Target API lets a web app add an entry to the share menu… but it's not supported by Firefox or Safari, so it's only usable on Android devices, not iOS.

The solution#

Home Assistant can be configured to run a script when used as a share target, including making a REST request.

Adding the command cannot be done inside the web interface; instead add the following lines to configuration.yaml:

rest_command:
  send_url:
    url: "http://local_device/ha_share"
    method: POST
    content_type: "text/plain"
    payload: "{{ url }}"

Then add an automation triggered by the mobile_app.share event with the action

service: rest_command.send_url
data:
  url: '{{ trigger.event.data.url }}'

Then whenever a user views a website on their phone which is logged into Home Assistant, they can share to Home Assistant and it will generate an HTTP POST request to http://local_device/ha_share where the body of the request will be the URL of the website.

The details#

Read more…

Serverless WebRTC

The problem#

While in my last post, I said serverless WebRTC was too cumbersome, I wanted to try to see how streamlined I could make the process. While researching, I did find a variant of serverless-webrtc called serverless-webrtc-qrcode as well as a similar demo, webrtc-qr that both use QR codes as an easy way to transmit the offer strings. But both require that both sides have a camera to scan QR codes, while my use case is a WebRTC connection between my desktop without a camera and my smartphone.

The solution#

minimal-webrtc now has a checkbox to enable serverless mode. In that mode, the QR code shown by the host is a much longer URL that includes the initial WebRTC offer. Opening that URL on another device (or in another browser window) will show another QR code along with a "Copy" button. With the first device, either press the "Scan QR code" button and point it at the QR code or use some other mechanism to copy the text and paste it into the text area labeled "Paste offer here:".

To run it locally, download the source code and run a web server to serve the wwwroot/ directory. If both devices can run a web server, then you can just access it via localhost on each, but, as before, because WebRTC requires HTTPS, to run it on your local network, you may need to set up a self-signed certificate.

The details#

Read more…