Blog Home

Web Serial Camera stream with Arduino

Arduino TeamAugust 1st, 2024

Hey there, fellow tech enthusiasts! Ever wondered how you could effortlessly stream camera footage from your Arduino boards directly to your web browser? Wonder no more! Arduino’s Web Serial Camera demo shows how to bring your camera projects to life.

Stream images from your Arduino boards

Arduino hardware like the Nicla Vision and Portenta Vision Shield has democratized accessibility to camera data on embedded systems. On the mission to simplify processing camera images, we are excited to introduce a new cross-platform approach to reading video streams over the serial port. This Web Serial-based advancement is more streamlined and user-friendly than previous methods, which required the installation of additional software and manual configuration.

Requirements

The Web Serial Camera web application enables you to connect Arduino boards equipped with a camera and stream their images straight to your browser. At the time of writing, these include the Portenta H7 + Portenta Vision Shield, Nicla Vision, and GIGA R1 WiFi + OV7675, OV7670, GC2145, HM0360 or HM01B0 camera. All it takes is one of these mentioned boards, an Arduino sketch, and a browser that supports Web Serial.

Unpacking the demo

Connectivity: Experience the magic of the Web Serial technology as you seamlessly connect your Arduino hardware to web applications. Enjoy easy data transfer between your board and the browser.

Image processing: Step into the world of image data processing with JavaScript. The example shows how to process and transform the raw image data from your Arduino board so that it can be displayed in the browser.

Image filters: Learn how to implement basic image filters. From adjusting brightness to applying a sepia effect, you’ll discover how simple it is to transform your images right in your browser. While exploring these filters you’ll gain a deeper understanding of how to manipulate pixels and breathe life into your visuals.

Image download: Frames from the camera stream can be downloaded with the click of a button. This makes it easy to use the camera images for further processing such as training a machine learning model for image classification.

How to get started

1. Upload the Arduino sketch: Visit our dedicated page to access the “CameraCaptureWebSerial” sketch. Simply upload the Arduino sketch to your compatible board using the Arduino IDE or the Arduino CLI.

2. Access the web application: Visit the link to the web application as described on the page mentioned above to access the Web Serial Camera web application. Click “connect”, select your board and confirm the selection.

3. Start experimenting: Dive into the world of real-time imaging in the browser and let your creativity flow.

Are you ready?

The Web Serial-based solution for video streaming on Arduino boards is an effective and adaptable tool for prototyping camera-based applications. Head over to our website and start tinkering today!

We can’t wait to see what you come up with! Share your experiences and creations on social media, and be sure to tag us!