| .. _webusb-sample: |
| |
| WebUSB sample application |
| ######################### |
| |
| For a deeper dive into the WebUSB, refer to |
| https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web |
| |
| WebUSB API Specification: |
| https://wicg.github.io/webusb/ |
| |
| Sample Overview |
| *************** |
| |
| This simple echo application demonstrates the WebUSB sample application. |
| This application receives the data and echoed back to the WebUSB |
| based web application (web page) running in the browser at host. |
| This application is intended for testing purposes only. For running |
| real usecase, implement applications based on the WebUSB API. |
| This sample can be found under :zephyr_file:`samples/subsys/usb/webusb` in the |
| Zephyr project tree. |
| |
| Requirements |
| ************ |
| |
| This project requires an USB device driver, which is available for multiple |
| boards supported in Zephyr. |
| |
| Building and Running |
| ******************** |
| |
| Build and flash webusb sample with: |
| |
| .. zephyr-app-commands:: |
| :zephyr-app: samples/subsys/usb/webusb |
| :board: <board to use> |
| :goals: flash |
| :compact: |
| |
| Testing with latest Google Chrome on host |
| ***************************************** |
| |
| This sample application requires latest Google Chrome, a web page |
| based on WebUSB API to connect to the USB device and optionally |
| http server running on localhost to serve the web page. |
| |
| WebUSB is a powerful new feature added to the Web and it is available |
| only to secure origins. This means the web page/site that used to |
| connect to the device must be served over a secure connection (HTTPS). |
| |
| Follow these steps to run the demo on your host system: |
| |
| #. Run the latest Google Chrome on host. |
| |
| #. Implement a web app (web page) using WebUSB API and run |
| it on localhost. |
| |
| See the sample at https://github.com/finikorg/webusb-sample |
| |
| This sample web page demonstrate how to create and use a WebUSB |
| interface, as well as demonstrate the communication between browser |
| and WebUSB enabled device. |
| |
| #. To access JS app go to https://finikorg.github.io/webusb-sample/ |
| |
| #. To host the demo page locally: Clone the repo and start a web server |
| in the appropriate directory. |
| |
| .. code-block:: console |
| |
| $ python -m http.server |
| |
| #. Connect the board to your host. |
| |
| #. Once the device is booted, you should see a notification from |
| Chrome: "Go to localhost to connect.". Click on the notification |
| to open demo page. |
| Note that at the moment WebUSB landing page notification is disabled |
| in Chrome on Windows. See https://github.com/WICG/webusb#implementation-status |
| |
| #. Click on Connect button to connect to the device. |
| |
| #. Send some text to the device by clicking on the Send button. The demo app |
| will receive the same text from the device and display it in the textarea. |