Tag: Azure

Using Azure AI on a web cam image

blog1

So far I’ve connected an Arducam 3MP camera to an ESP32 controller and uploaded regular photos to Azure and displayed them on a web page. Those details are here:

https://blog.ciaopslabs.com/2026/01/18/arducam-as-a-live-web-cam/

Now what I want to do is feed those images into Azure AI and display the results back on a web page.

The first step in this process will be to create a Computer Vision Service in Azure.

  1. In Azure Portal, click “+ Create a resource” (top left)
  2. Search for Computer Vision
    • Type: “Computer Vision”
    • Click on “Computer Vision” (with the eye icon)
    • Make sure it says “Computer Vision” not “Azure AI services”
    • Click “Create”
  3. Configure the Resource
    • Subscription: Your Azure subscription
    • Resource Group: Select “image-analysis-rg” (the one you created earlier)
    • Region: CRITICAL – Must be one of these:
      • East US
      • West US
      • France Central
      • North Europe
      • West Europe
      • Southeast Asia
      • East Asia
      • Korea Central
        Choose East US if unsure (best compatibility with Vision Studio)
    • Name: Give it a unique name
      • Example: “my-vision-service-2026”
      • Lowercase, numbers, hyphens only
    • Pricing tier: “Free F0”
      • Gives you 5,000 API calls per month
      • 20 calls per minute
      • Completely FREE!
  4. Create the Resource
    • Check the “Responsible AI Notice” checkbox
    • Click “Review + create”
    • Click “Create”
    • Wait 1-2 minutes
    • Click “Go to resource”

With this create you now need to get yoru API credentials for the AI service.

  1. In your Computer Vision resource, look at the left menu
  2. Click “Keys and Endpoint” (under “Resource Management”)
  3. Copy Your Credentials
    • Click “Show Keys”
    • Click the copy icon next to KEY 1
    • Paste into Notepad and label it: API Key: [your-key]
  4. Copy Your Endpoint

Keep these values safe – you’ll need them in the next step!

Next, you’ll need to create a HTML webpage to connect and display the results. You’ll find that here:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/vision-index.html

Make sure you update these values in yoru file to match your service:

const VISION_ENDPOINT = ‘https://<YOUR VISION SERVICE NAME>.cognitiveservices.azure.com/’;

const VISION_KEY = ‘<YOUR VISION SERVICE KEY>’;

const IMAGE_URL = ‘<YOUR BLOB STORAGE ACCOUNT>.blob.core.windows.net/images/latest.jpg’;

Note: this is not a secure way to implement the service if you are going to expose the page to the Internet. This should therefore be addressed if you plan to make the page public.

Once you have the new HTML file upload it to the $web container of your Blob storage account via:

  1. Go back to Azure Portal
  2. Navigate to your Storage Account
    • Search for your storage account name in the top search bar
    • Click on it
  3. Open Storage Browser
    • In the left menu, click “Storage browser”
    • Expand “Blob containers”
    • Click on “$web” (this is the special container for static websites)
  4. Upload your HTML file
    • Click “Upload” button at the top
    • Click “Browse for files”
    • Select your “index.html” file
    • Important: Check the box “Overwrite if files already exist”
    • Click “Upload”
    • Wait for upload to complete (shows green checkmark)

Now you should be able to view the website by:

  1. Open your browser
  2. Go to your website URL (from Step 2)
  3. What you should see:
    • Your image displayed
    • “Analyzing image…” message appears
    • After 2-3 seconds:
      • AI-generated caption (e.g., “a person standing on a beach”)
      • Confidence score (e.g., “Confidence: 87.5%”)
      • Tags with percentages (e.g., “outdoor 99%”, “beach 95%”)
    • Australian date/time format timestamp
    • Every 60 seconds, the image auto-refreshes

Screenshot 2026-01-18 121901

Troubleshooting Common Issues

Issue 1: “Access Denied” or 401 Error

Cause: API key is incorrect or endpoint is wrong

Solution:

  1. Go back to Azure Portal
  2. Navigate to your Computer Vision resource
  3. Click “Keys and Endpoint”
  4. Click “Show Keys”
  5. Verify you copied KEY 1 correctly (no extra spaces)
  6. Check the endpoint URL matches exactly
  7. Re-edit your index.html file with correct values
  8. Re-upload to $web container

Issue 2: Image Doesn’t Show

Cause: Image URL is wrong or image container is not public

Solution:

  1. Go to Storage Account → Containers → “images”
  2. Click on your image file
  3. Copy the URL and verify it’s correct in your HTML
  4. Click on the “images” container name
  5. Click “Change access level”
  6. Select “Blob (anonymous read access for blobs only)”
  7. Click OK

Issue 3: CORS Error in Browser Console

Cause: Cross-Origin Resource Sharing not configured

Solution:

  1. Go to your Computer Vision resource
  2. Find “CORS” in the left menu (under API or Settings)
  3. Add a new allowed origin:
  4. Click Save
  5. Refresh your webpage

Issue 4: “Analysis never completes” or Stuck on “Analyzing…”

Cause: Usually a JavaScript error or network issue

Solution:

  1. Press F12 to open browser Developer Tools
  2. Click “Console” tab
  3. Look for red error messages
  4. Common fixes:
    • Check all three values (ENDPOINT, KEY, IMAGE_URL) are correct
    • Ensure no typos in the JavaScript section
    • Try a different browser
  5. Verify your Computer Vision resource is in a supported region (see Step 4)

Issue 5: Wrong Region Error

Cause: Computer Vision resource created in unsupported region

Solution:

  1. Delete the Computer Vision resource
  2. Create a new one in a supported region:
    • East US, West US, France Central, North Europe, West Europe, Southeast Asia, East Asia, or Korea Central
  3. Get the new KEY and ENDPOINT
  4. Update your HTML file
  5. Re-upload

Understanding Costs (Important!)

Free Tier Limits

  • Computer Vision F0: 5,000 API calls per month – FREE
  • Storage Account: First 5GB storage – FREE
  • Bandwidth: First 15GB outbound – FREE

How This Setup Saves Money

Image Refresh: Happens every 60 seconds (FREE – just downloading an image)

AI Analysis: Only happens:

  • When you first load the page (1 call)
  • When you manually refresh your browser (1 call per refresh)

NOT when: The image auto-refreshes every 60 seconds

Example Usage:

  • You check the page 5 times per day = 5 API calls/day
  • Over 30 days = 150 API calls/month
  • Well within 5,000 free limit!

This optimized version:

  • Stays FREE even if left open 24/7 ✅

The next step will be attempt to have the Ai count and display the number of vehicles it sees in each shot.

Arducam as a live web cam

blog1

I recently managed to Send images from Arducam to Azure, which was a major win. Only challenge with that is it isn’t easy to see those images inside Azure. Thus, I wanted an easy way to do this and figured that displaying on a web page was the go.

Turns out, this isn’t to hard using Azure. Thus, I started by modifying the code for the controller so it would always upload an image using the same name and do so every 60 seconds. You can find the code for the controller here:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/storage-web.cpp

and documentation here:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/storage-web.md

Next, I created an index.html file to display the image from Azure Blob storage. You can find a copy of that here:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/web-index.html

you need to rename it to index.html and put the name of your Blob storage URL on line 40.

Next, you’ll need to enable a static website on your Blob storage account.

image

  1. Go to Azure Portal (portal.azure.com)
  2. Navigate to your storage account: arducamimages
  3. In the left menu, find “Static website” (under “Data management” or “Settings”)
  4. Click “Enabled”
  5. Set Index document name: index.html
  6. Note the Primary endpoint URL (e.g., https://arducamimages.z88.web.core.windows.net/)
  7. Click “Save”

image

Then you’ll need to upload your index.html to the $web container in your Blob storage account.

  1. In your storage account, click “Containers” (under “Data storage”)
  2. Click on the $web container (created automatically when you enabled static website)
  3. Click “Upload”
  4. Select your index.html file
  5. Check “Overwrite if files already exist”
  6. Click “Upload”

image

Now you’ll need to set public access for $web container.

  1. While in the $web container, click “Change access level”
  2. Set “Public access level” to “Blob (anonymous read access for blobs only)”
  3. Click “OK”

image

Next, set public access for images container

  1. Go back to “Containers”
  2. Click on the “images” container (where your latest.jpg is stored)
  3. Click “Change access level”
  4. Set “Public access level” to “Blob (anonymous read access for blobs only)”
  5. Click “OK”

image

You should be able to view the website using the Primary endpoint, that was back in the Static website settings as shown above. In my case I also need to add /index.html to end of the URL to get it to display.

image

You can see my result above. The page should refresh every 60 seconds automatically with a new image. You should also be able to now view this image from anywhere by simply browsing to your URL.

My next plan is to try and integrate Azure AI vision, given the image is already now in Azure, and for the page to report the weather i.e. sunny, wet, etc. yes, I know you can see that in the image but that makes it an easy way to very that Ai reading the image correctly. Let’s see how hard that is to do next.

Send images from Arducam to Azure

blog

Now that I have my Arducam working, the next step is to be able to upload the images from the camera to Azure Blob storage. To do this, you’ll need to set up an Azure subscription and follow these steps to actually create an Azure Storage Account:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/azure-storage.md

It is also recommended that you place all you sensitive information (WiFi password, Azure information, etc) in an io_config.h file to separate it from the main code.

With the Azure Blob storage configured next you’ll need to hook up your Arducam to your controller. This time I’ve gone for a Acebott ESP32-Max-V1.0 because it has inbuilt Wifi. Thus, I have wired the following ports:

VSPI (recommended):

  • MOSI (GPIO 23): Top right area, blue header row
  • MISO (GPIO 19): Top right area, blue header row
  • SCK (GPIO 18): Top right area, blue header row
  • CS (GPIO 5): Top left area, blue header row (you can use any available GPIO for CS) orange

Acebott ESP32-Max-V1.0 pinout

image

Arducam Pinout

image

I then uploaded teh following code to the Acebott board:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/capture-image-azure.cpp

and the documentation for this is here:

https://github.com/directorcia/Azure/blob/master/Iot/Arducam/3MP/capture-image-azure.md

but in essence after the board has booted the serial interface will show:

image

If you select one of the upload options you should see something like:

image

then if you look inside the Azure Blob storage container you should see the file like so:

image

This should make it easy to store many images from the camera without having to use the serial port to view and download them