68 lines
2.3 KiB
ReStructuredText
68 lines
2.3 KiB
ReStructuredText
.. _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.
|
|
|
|
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.
|