QR code camera scanning support in ZHA frontend with UI (and companion apps) for Zigbee device inclusion could share reusable QR scanner part element from the Z-Wave JS integration?

[Hedda]

Discussion about the idea of Home Assistant's ZHA UI/frontend having a QR scanner feature (using web-camera or mobile-camera) for QR code scanning to get Zigbee devices IEEE address in order to initiate device inclusion as an easier method for Zigbee device onboarding.

FYI, Home Assistant's frontend will soon be getting a QR scanner part that will be a separate reusable element that will initially be used for QR code scan support by the Z-Wave JS integration for "Z-Wave SmartStart" device provisioning to initiate the commissioning process, and that QR scanner part in the frontend could potentially also be used for the ZHA integration (and others):

PR -> home-assistant/frontend#10726 (that frontend part will initially be used by Z-Wave JS integration home-assistant/core#59037 ).

Adding of devices with QR is done now in home-assistant/frontend#10726

As I understand Z-Wave SmartStart provisioning backend is similar to Zigbee 3.0 install_code and qr_code method for QR code scanning Zigbee devices for ZB3 inclusion that was added parameters were added to ZHA by Adminiuga in PR home-assistant/core#40652

• https://www.silabs.com/documents/public/application-notes/an1089-using-installation-codes-with-zigbee-devices.pdf

Adminiuga commented in that pull request asking if dmulcahey was willing to look if QR code scanning could be embedded into ZHA UI.

More frontend ideas for ZHA UI user experience for Zigbee device inclusion via QR code scanning are posted in a feature request with suggestions for supporting QR code camera scanning via both Home Assistant's web UI and the iOS/Android companion apps for provisioning:

https://community.home-assistant.io/t/zigbee-device-provisioning-by-scanning-qr-code-qr-camera-scanner-in-zhas-ui-config-and-companion-apps-to-include-new-zigbee-3-0-devices-to-home-assistants-zha-integration/231185

PS: As a side-note; believe that the new Matter/CHIP connectivity protocol will also need a similar UI feature for device inclusion via QR code.

[Hedda]

The user experience concept of QR code scanning feature for Zigbee device inclusion via ZHA UI was by way discussed in zigpy/bellows#431

Anyway, I like the idea from an end-user experience point-of-view as this is a feature that should be attractive to beginners and new users.

Examples of companion apps that have already implemented this feature for Zigbee are those for Samsung SmartThings, Tuya, and Sengled:

https://www.youtube.com/watch?v=odU93fb99hc

[Hedda]

FYI, equivalent feature for Z-Wave is now promoted in the latest release + also demoed in Home Assistant's State of the Open Home video:

https://www.youtube.com/watch?v=6ZMXE5PXPqU&t=2740s

Z-Wave SmartStart demo with QR scanning to provision for inclusion starts at around 45 minutes and 30 seconds into the video.

https://www.home-assistant.io/blog/#z-wave-js-smartstart-and-entity-categories

Z-Wave JS SmartStart and entity categories

Setting up your Z-Wave device with Home Assistant is now easier than ever, as Z-Wave JS now supports Z-Wave SmartStart!

When you have a SmartStart capable Z-Wave stick and device, you can now set up the device by simply scanning the QR code on the device, using your webcam, or using your mobile phone with the Home Assistant Companion app.

Including devices to your Z-Wave network has never been easier.

[Hedda]

For reference, there appear to be at least some Zigbee 3.0 devices that will not pair without QR code or Install Code, see example Bosch Termostat 2 -> https://community.home-assistant.io/t/bosch-thermostat-2/492845/ and today only bellows (Silicon Labs) and zigpy-znp (Texas Instruments) support adding custom Installation Codes for ZB3 devices, read -> zigpy/zigpy-deconz#214

[Hedda]

Side-note: believe that new Matter/CHIP connectivity protocol will also need a similar UI feature for device inclusion via QR code.

For reference, the new Matter integration for Home Assistant now makes use of the QR code scanning feature for device commissioning:

• https://www.home-assistant.io/integrations/matter/
  • https://www.home-assistant.io/integrations/matter/#adding-matter-devices-to-home-assistant
  • https://www.home-assistant.io/integrations/matter/#add-a-device-using-the-ios-companion-app
  • https://www.home-assistant.io/integrations/matter/#add-a-device-using-the-android-companion-app

https://www.youtube.com/watch?v=8y79Kq3QfCQ&t=21s&ab_channel=HomeAssistant

https://www.youtube.com/watch?v=Fk0n0r0eKcE&t=19s&ab_channel=HomeAssistant

Adding Matter devices to Home Assistant

ADD A DEVICE USING THE ANDROID COMPANION APP

This will use the Bluetooth connection of your phone to add the device.

1. Open The Home Assistant app on your phone.
2. Go to Settings, Devices & Services.
3. On the Devices tab, press the Add device button.
4. Choose Add Matter device as the top of the list.
5. Scan the QR-code of the Matter device with your phones camera or press the Setup without QR-code button to manually enter the Commission code.
6. The process will start adding the device which takes up to a few minutes.
7. If you’re adding a test board (e.g. ESP32 running the example apps) and commissioning fails, you might need to take some actions in the Google Developer console, have a look at any instructions for your test device.
8. Once the process is complete and you pressed the Done button, you are redirected to the Device within Home Assistant and its ready for use.