Detect Color with a Webcam
In this tutorial, you will detect the color red using your computer’s webcam and the Viam vision service. Without writing any code, you will be able to view your camera stream, with detection bounding boxes, from the Viam app control interface.
The vision service enables a robot to use its cameras to see and interpret the world around it. The service also allows you to create different types of detectors with which the robot can recognize objects, scan QR codes, perform optical quality inspections, sort different colored objects, take measurements, and more.
You can follow this tutorial with your own computer (laptop, desktop, or single-board computer) and webcam, or you can remotely borrow a Viam rover if your computer is not compatible with viam-server
.
Connect your computer to the Viam app
In the Viam app, create a machine and follow the setup instructions on your new machine’s page to install viam-server
on your computer and connect it to the Viam app.
Configure your webcam
- If you are using an external USB camera, connect it to your computer.
- With your computer powered on, check the status indicator on your machine’s page in the Viam app. It should be green and read “Live.”
- In the CONFIGURE tab, click the + (create) button in the left side menu and select Component.
- Type “webcam” and select
camera / webcam
. Name itcam
and click Create. - In the webcam card, click Show more, then click the dropdown video_path menu. Since your machine is live, this auto-populates with all connected webcams. Select the camera you want to use.
- Save the config.
Test the webcam
- On the CONTROL tab, click the cam card to expand it.
- Click to enable the View cam toggle and view your camera’s live stream.
Each Try Viam rover already has viam-server
installed and is equipped with a webcam, so Try Viam is a great option if you do not have a macOS or Linux computer and a webcam available.
Tip
If you are renting a rover, we recommend that you skim through this tutorial before renting your rover to familiarize yourself with the steps so you do not run out of time on your rental.
Be aware that if you are running out of time during your rental, you can extend your rover rental as long as there are no other reservations.
Borrow a rover
Borrow a rover free of cost for 10 minutes (with free time extension if no one is waiting) through Try Viam.
Enable the cameras
Before configuring color detection, enable the rover’s camera to get a better sense of what it perceives.
If you are running this tutorial with a rented Viam Rover, enable both provided cameras: the front-facing camera and the overhead cam. In the
viam_base
component panel under the CONTROL tab, enable both thecam
for the front-facing camera and theoverhead-cam:overheadcam
for an overhead view of your rover.You can also view and control the camera streams from the individual camera component panels.
If you are running this tutorial on your own Viam Rover, enable the front facing camera. If you are using the
ViamRover
fragment with your rover, the front facing camera is namedcam
and can be enabled in theviam_base
component panel under the CONTROL tab.
Add the vision service to detect a color
This tutorial uses the color #7a4f5c
or rgb(122, 79, 92)
(a reddish color).
Hex color #7a4f5c:
Navigate to your machine’s CONFIGURE tab on the Viam app and configure your vision service color detector:
- Click the + (Create) icon next to your machine part in the left-hand menu and select Service.
- Select the
vision
type, then select thecolor detector
model. - Enter
my_color_detector
as the name for your detector and click Create. - In the resulting vision service panel, click the color picker box to set the color to be detected.
For this tutorial, set the color to
rgb(122, 79, 92)
or use hex code#7a4f5c
. - Then, set Hue Tolerance to
0.06
and Segment size px to100
.
Your configuration should look like the following:
Select JSON mode on the CONFIGURE tab. Add the vision service object to the services array in your rover’s JSON configuration:
"services": [
{
"name": "my_color_detector",
"type": "vision",
"model": "color_detector",
"attributes": {
"segment_size_px": 100,
"detect_color": "#7a4f5c",
"hue_tolerance_pct": 0.06
}
},
... // Other services
]
The color_detector
is a heuristic-based detector that draws boxes around objects according to their hue.
Click Save to save your configuration.
You cannot interact directly with the vision service. To be able to interact with the vision service you must configure a camera component.
Tip
If you want to detect other colors, change the color parameter detect_color
.
Object colors can vary dramatically based on the light source.
We recommend you verify the desired color detection value under actual lighting conditions.
To determine the color value from the actual cam component image, you can use a pixel color tool, like Color Picker for Chrome.
In the following steps you’ll be able to test the color detector.
If you notice the color is not reliably detected, drag the Hue Tolerance slider to the right or switch to JSON mode to increase the hue_tolerance_pct
.
Note that the detector does not detect black, perfect greys (greys where the red, green, and blue color component values are equal), or white.
Configure a transform camera to use the color detector
Viam camera components can be physical like the one already configured on the rover, or virtual. A virtual transform camera transforms the output from a physical camera.
To view output from the color detector overlaid on images from a physical camera, configure a transform camera:
- Navigate to the CONFIGURE tab in the Viam app.
- Click the + (Create) icon next to your machine part in the left-hand menu and select Component.
- Select
camera
as the type. - Select
transform
as the model. - Enter a name, for example
detectionCam
, and click Create.
On the detection camera’s component panel, click {} (Switch to advanced) to switch to the advanced mode, where you can edit the attributes directly with JSON. Copy and paste the following JSON configuration into the attributes field:
{
"source": "cam",
"pipeline": [
{
"attributes": {
"detector_name": "my_color_detector",
"confidence_threshold": 0.3
},
"type": "detections"
}
]
}
Explanations of each attribute are as follows:
source
: The name of the physical camera on the rover, which provides the visual feed to get detections from. If you used a different name for your camera, edit this field.pipeline
: Contains the transformation objects to apply to the camera.attributes
: The attributes of this transform camera.detector_name
: The name of the detector.confidence_threshold
: The percentage of confidence needed by the detection service to identify a color. Since we set it to0.3
, this means that detections with less than 30% confidence won’t be recognized.type
: The type of transform camera.
The filled-in transform camera configuration panel will look like this:
After adding the component and its attributes, click Save in the top right corner of the page to save your config.
Test your transform camera in the CONTROL tab
In the CONTROL tab, click the detectionCam card to expand it, and toggle View detectionCam to show the camera feed.
Point the camera at a rose-colored object or hold one up in front of the camera.
Each time the camera detects the color, you will see a red rectangle around the color labeled with the detection confidence level.
In the CONTROL tab, click on your base component and enable detectionCam in the Live Feeds section.
Next, enable the keyboard and move your rover around until your camera detects the specified color.
Each time the camera detects the color, you will see a red rectangle around the color labeled with the detection confidence level.
You can also find the dedicated detectionCam card in the CONTROL tab, displaying the same feed.
Next steps
Try changing the detector config to detect other colors.
To do more with the vision service and incorporate machine learning, try our person detection security robot tutorial.
To learn about coding with Viam’s SDKs, try making a rover move in a square.
You can also ask questions in the Community Discord and we will be happy to help.
Was this page helpful?
Glad to hear it! If you have any other feedback please let us know:
We're sorry about that. To help us improve, please tell us what we can do better:
Thank you!