Coder Social home page Coder Social logo

zephyr-stm32-webusb's Introduction

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:

  1. Run the latest Google Chrome on host.

  2. 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.

    1. To access JS app go to https://finikorg.github.io/webusb-sample/

    2. To host the demo page locally: Clone the repo and start a web server in the appropriate directory.

      $ python -m http.server
  3. Connect the board to your host.

  4. 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

  5. Click on Connect button to connect to the device.

  6. 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.

zephyr-stm32-webusb's People

Contributors

dimka-rs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

zephyr-stm32-webusb's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.