How To: Get Image from USB WebCam to 'My Web Bots' website
This section explains how to create a solution that enables you to get pictures from the USB camera attached on your remote computer to 'My Web Bots' web page.
Overview
On high level, in this example we will:- [In Web Browser] Customize your 'My Web Bots' web page with a Button and Image Box
- [In Easybots Studio] Install 'Web Bots' and 'USB Camera' app
- [In Easybots Studio] Create a solution: when a button on the web page is clicked, the USB Camera to take a picture and send it to the web page
What is 'Web Bots'? - click to expand...
What is 'Web Bots'?
We wanted to provide an easy way for our users to control other bots from web.
'Web Bots' is your personal, customizable web page. You can customize this web page by adding buttons, image boxes, text boxes, labels, sliders, any many other components.
To get the commands from these components on your computer, you need to install the 'Web Bots App' on your PC, and that will allow you to receive triggers from the web bots, or invoke action on the web bots (for example: Image Box => Set Image)
With Web Bots, you have direct link between your PC and your website, anywhere, anytime.
How To: Step by Step
Step 1: Customize 'My Web Bots' web page with a Button and an Image Box
1.1 Go to My Web Bots [https://easybots.net/WebBots]
1.2 Click on the Add/Edit Web Bots button
1.3 Add New Button
1.4 Add New Image
1.5 Finish Editing
Verify Step 1 - click to expand and see how it should look like...
My Web Bots should look like this:
Step 2: Easybots Studio - Install Apps
2.1 In Easybots Studio, navigate to 'Download Apps' -> 'Public App Store'
2.2 Find 'Web Bots' app (You can use the 'Filter' textbox)
2.3 Install it and run it
2.4 In the 'Web Bots' app, log-in with your Easybots credentials.
The 'Button' and 'ImageBox' web bots should appear.
2.5 In the Public App Store, find the 'USB & Web Cam' app
2.6 Install it and run it
Verify Step 2 - click to expand and see how it should look like...
Easybots Studio should show the added apps and bots
Step 3: Create the Easybots Solution
Now, we need to connect the bots: when the button is clicked, the camera should take a pic and send it to the image box on the web.
3.1 In Easybots Studio Editor, click on the 'Add New Solution' button, and then on 'Create Solution'
3.2 In the 'Apps' panel, navigate to: 'Web Bots' -> 'Button' -> 'ButtonClicked' trigger
3.3 Drag & Drop the 'ButtonClicked' to the 'New Solution'
3.4 Navigate to: 'USB & Web Cam' -> 'Camera 1' -> 'Take Picture' action.
If you don't have camera, use 'Image Utilities' -> 'CreateEmptyPictureWithText' action.
3.5 Drag & Drop the 'Take Picture' action to the 'ButtonClicked' trigger
3.6 Navigate to: 'Web Bots' -> 'ImageBox' -> 'SetImage' action.
3.7 Drag & Drop the 'SetImage' action to the 'Take Picture' action
3.8 Select the newly added 'ImageBox.SetImage' node, and in the Properties window, choose 'Camera 1.TakePicture Result' as Input
Step 4: Let's see it in action!
4.1 Navigate to My Web Bots [https://easybots.net/WebBots]
4.2 Click on 'Button'
4.3 After a couple of seconds, the ImageBox should show the image from your web cam
In Easybots Studio, you can see the execution in real time:
Well Done! Congratulations on connecting your PC to Your Web Bots webpage!