Hello Thunkers,
I am happy to share a module that captures an Image from camera and returns it as base64 and it works on web (Web app).
As it is mentioned in our docs, camera block is not supported on the web and doesn’t return images as base64.
This is why, I created this module using HTML code to capture an image from the camera and convert it to base64.
Here is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Photo Capture (Thunkable)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.camera-btn {
background-color: #4a7cff;
color: #fff;
font-size: 16px;
padding: 14px 36px;
border: none;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.camera-btn:hover {
background-color: #3565e9;
}
input[type="file"] {
display: none;
}
</style>
</head>
<body>
<label for="uploadInput" class="camera-btn">Take Photo</label>
<input type="file" accept="image/*" capture="environment" id="uploadInput" />
<script>
const ThunkableWebviewerExtension = {
postMessage: function (message) {
if (window.ReactNativeWebView) {
window.ReactNativeWebView.postMessage(message);
} else {
window.parent.postMessage(message, '*');
}
}
};
const input = document.getElementById('uploadInput');
input.addEventListener('change', function () {
const file = this.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function () {
const base64 = reader.result;
ThunkableWebviewerExtension.postMessage(base64);
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
On the module, I added a web viewer component, uploaded the HTML file and set it as the web viewer’s URL:
Then, I set up an event called "Image Captured" that passes the base64 image as a parameter:
And connected the message from the web viewer into the event:
Finally, I used the "When Image Captured" block to display the base64 result in a Label:
Check out a full sample project using the module here:
https://x.thunkable.com/projects/680229d15ba99a2912dd4791/
I’d love to hear your ideas! Which other functionalities would you like to see implemented as module? Comment below and let’s build together! 
Happy Thunking!