Arducam as a live web cam

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.

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.z8.web.core.windows.net/)
7. Click “Save”

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”

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”

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”

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.

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.