As an entrepreneur, tech enthusiast, or developer, you know how daunting it can be to transform an idea into a functional web service. But with the combination of AI and the Eyevinn Open Source Cloud (https://www.osaas.io/), this journey becomes streamlined and efficient. In this post, I’ll share my experience of creating an online movie recommendation site—and how leveraging AI and Eyevinn Open Source Cloud made it possible in just a few hours.
The Idea: An Online Movie Recommendation Site
I had a simple idea: a website where users could enter a movie name and get two new movie recommendations, using the OpenAI API to generate suggestions. This seemed like a perfect project to test the capabilities of Eyevinn Open Source Cloud.
Step 1: Generating the Code with ChatGPT
To kick things off, I used ChatGPT to help create a Docker container with an HTML frontend and a Node.js backend that communicates with the OpenAI API. It requires an OpenAI API key to be entered when starting the Docker container. This approach let me rapidly build a prototype without needing to dive deep into intricate coding.
Step 2: Running the Code Locally
Next, I took the generated code and ran it locally on my Mac using VS Code, with the help of GitHub Copilot. It is important to make sure that the latest version of software, such as Node.js, is used to ensure security and performance, as the code generated by ChatGPT may not always be up to date. This local testing step was crucial to ensure everything worked smoothly before deployment. Once I confirmed the functionality, I published the code in a public GitHub repository. https://github.com/alexbj75/movierecommendator
Step 3: Deploying on Eyevinn Open Source Cloud
With the code ready, I created an account on Eyevinn Open Source Cloud https://www.osaas.io/ and connected it to my GitHub repository. After submitting the repository URL under “My service inbox”, it went through a quick approval process and then I launched the service.
In no time, my movie recommendation site was live and accessible here https://ej75hotmal-alex.alexbj75-movierecommendator.auto.prod.osaas.io.
Advantages of Eyevinn Open Source Cloud
Rapid Development and Deployment: Eyevinn Open Source Cloud and AI tools enabled me to take my idea from conception to a live web service in under three hours, which is impressive for someone who hasn’t written code in 24 years. This rapid turnaround is a game-changer for anyone looking to innovate quickly.
Easy Deployment Without Building or Hosting Software: Eyevinn Open Source Cloud simplifies the process of deploying services by removing the need to build or host the software yourself. This makes launching a project much easier.
Cost Savings: Leveraging open-source software eliminates expensive licensing fees, making it a cost-effective solution. Eyevinn Open Source Cloud also has no lock-in because the source code is always available on GitHub, ensuring full transparency and flexibility. This makes launching a project much easier.
Community-Driven Innovation: By using open-source tools, you benefit from the collective expertise of a global developer community that continuously enhances the software. Eyevinn Open Source Cloud also encourages community-driven innovation through revenue-sharing, contributing back to the community.
Conclusion
Eyevinn Open Source Cloud, combined with AI, is a powerful tool for entrepreneurs, tech enthusiasts, and developers who want to bring their ideas to life quickly and affordably. My experience of creating an online movie recommendation site—even after not having programmed for 24 years—is proof of how accessible this platform is. If you have a web service idea, I highly recommend giving Eyevinn Open Source Cloud a try. You might be surprised by how fast your idea can come to life.
Deploy Your Web Apps with Eyevinn Open Source Cloud
The Hello World repository I created is available on GitHub https://github.com/ernestocarocca/hello-world
If you’re looking for a fast and seamless way to deploy your apps in the cloud, Eyevinn Open Source Cloud (OSC) is the perfect choice.
Here’s a step-by-step guide to deploying a basic “Hello World” app using OSC.
Eyevinn Open Source Cloud web page
insert your repo, then press launch.
After logging in, you’ll be directed to My Inbox, where the repository you uploaded will be listed. If your app requires environment variables, you’ll see how simple and visually clear it is to add them. Just input the required variables in the designated fields and Add new repository.
Once the process is complete and the repository is approved, you can simply search for it by the name you gave it. Press the “Hello World” card.
Here’s where the magic begins! Press on “Create example”.
Fill in the desired name and environment variables. End press on the “Create”
But if, for any reason, you’re unsure about certain terms or settings, don’t worry! There’s an AI assistant available to answer any questions you have regarding the process.
Then you see a card created that looks like this. Just press on the card.
After just a few seconds, I had a fully deployed web app.
Trim video file on an S3 compatible bucket using open source
In this blog post I will describe how to trim a video file on an S3 compatible bucket using ffmpeg without having to download it first, process it and then upload the result.
For trimming the video we will use the open source tool ffmpeg and a script that handles uploading the result to an S3 bucket. This open source script is available as a service in Open Source Cloud.
Step 1: Login to Eyevinn Open Source Cloud
Go to www.osaas.io and login. Sign up for an account if you don’t already have one. It is free to get started and you don’t even have to enter a credit card to try this out.
Step 2: Setup access to S3 bucket
Go to the service in Open Source Cloud called “FFmpeg to S3” using the search bar on the browse page. Click on the card “FFmpeg to S3 to go to the service.
Then click on the tab named “Service secrets”
Get the S3 access key credentials from your administrator of your S3 buckets. You need at minimum the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. Create a service secret for each of these credentials.
Step 3: Generate signed URL to the video to trim
Now we need to generate a signed URL for the video that you want to trim.
Copy the presigned URL to the clipboard
Step 4: Create a ffmpeg trim job
As an example we will extract the first 30 seconds of the video file and the ffmpeg command for that is:
ffmpeg -ss 0 -t 30 -c:v copy -c:a copy
Go back to the FFmpeg to S3 service page in Open Source Cloud and click on button “Create job”.
Enter the following in the settings dialog:
Name: “tutorial”
CmdLineArgs:
Replace [SIGNED_URL] from clipboard and lab-testcontent-input with the name of your bucket:
-i [SIGNED-URL] -d s3://lab-testcontent-input/tutorial-30sec.mp4 "-ss 0 -t 30 -c:v copy -c:a copy"
AwsAccessKeyId and AwsSecretAccessKey: reference to the service secrets created
Region: Location of the S3 bucket
Now press Create and wait for the job to be completed. When the job is completed you should have a file called tutorial-30sec.mp4 on the bucket you provided and 30 seconds duration.
Create a job from command line
You might want to automate or script the creation of these ffmpeg jobs and to facilitate that there is an open source SDK and command line tool for Eyevinn OSC. The command line tool is a Node.js script.
Follow the instructions on how to install Node.js if you don’t already have it installed.
Then install the CLI
% npm install -g @osaas/cli
Obtain the personal access token by going to Settings in OSC and the tab API. Here you find the personal access token that you copy to your clipboard. Set this token as an environment variable in your shell.
% export OSC_ACCESS_TOKEN=token
Now you can create the same job with the following command (replace [SIGNED-URL] and s3 bucket):
% osc create eyevinn-ffmpeg-s3 tutorialcli -o awsAccessKeyId="{{secrets.eyevinnawskeyid}}" -o awsSecretAccessKey="{{secrets.eyevinnawssecret}}" -o cmdLineArgs='-i [SIGNED-URL] -d s3://lab-testcontent-input/tutorial-30sec.mp4 "-ss 0 -t 30 -c:v copy -c:a copy"'
Conclusion
This was an example of how you can run ffmpeg to process a video file on an S3 bucket and output the result back to an S3 bucket without having to develop your own script for it as a script already existed that is open source and made available as a service in Eyevinn Open Source Cloud.
How to create a FAST channel in Open Source Cloud
Creating Free Ad-Supported Streaming TV (FAST) channels is becoming increasingly popular among content creators and broadcasters aiming to reach a wider audience without the need for a subscription model.
With the rise of open-source technologies and cloud platforms, launching your own FAST channel is more accessible than ever. The Open Source Cloud, with its array of tools and services, offers a comprehensive environment to deploy a FAST Channel Engine. This article guides you through the process of setting up a FAST channel using the FAST Channel Engine within the Open Source Cloud using already transcoded videos.
The base for the virtual channel is transcoded and packaged HLS VoD assets stored on an origin. The advantage with virtual channels is that you only prepare and encode the content once.
Prerequisites
As a prerequisite for creating a linear channel using the FAST Channel Engine, you need to have your VOD assets transcoded into HLS format. These assets should be properly segmented and stored on an origin server or accessible file storage system.
Ensuring that your media files are in HLS format and readily accessible allows the channel engine to seamlessly retrieve and stream the content according to your schedule.
Prepare a playlist, in other words a URL pointing to a text file containing a list of .m3u8 URLs, each representing a streamable video segment. One way to do this is to use gist.
– Go to https://gist.github.com
– Enter a name of the playlist in Filename (e.g. playlist.txt)
– Enter a list of URL to HLS manifests (one per line), for example:
https://demo.osc.technology/fast_1/manifest.m3u8
https://demo.osc.technology/fast_2/manifest.m3u8
https://demo.osc.technology/fast_3/manifest.m3u8
– Press Create public gist (green button)
– Press “Raw” on your created playlist file
– Copy the URL to the created playlist file e.g. https://gist.github.com/xxx/playlist.txt
Create a channel
Open your web browser and go to https://app.osaas.io/ and login using your credentials. Once logged in, locate the “Subscriptions” item in the menu on the left-hand side of your screen and click on it. This will take you to the page where you can manage and explore available services.
On the Subscriptions page, look for the card labeled “FAST Channel Engine.” This represents the service you’ll use to create your FAST channel. Next to the service title, there’s a drop-down menu symbolized by three dots. Click on this menu to reveal more options and select “Create channel.”
Enter a meaningful name for your channel. This name will help you identify it among other channels you may create. In this example the type “Playlist” is used. This option indicates that your channel will play content sequentially from a playlist you provide.
Enter the URL to your playlist in the “URL” field, e.g. the playlist created earlier (https://gist.github.com/xxx/playlist.txt). Make sure your playlist is correctly formatted and accessible online.
After entering all necessary information, press the “create” button. The platform will now process your request and start setting up your channel based on the playlist provided. This process may take a few moments. You can monitor the progress directly on the platform.
Once your channel is successfully created, find the channel’s drop-down menu (again, symbolized by three dots). Click on it and select “Copy URL” to copy the channel URL to your clipboard.
Open a new tab in your browser or launch a web player that supports .m3u8 streaming, safari or https://web.player.eyevinn.technology. Paste the copied URL into the player’s input field to start streaming your channel. This step is crucial for ensuring everything is working correctly and allows you to preview your channel’s content as your audience would.
Conclusion
Creating a FAST channel using the FAST Channel Engine in the Open Source Cloud is a powerful way to reach audiences with your content. By leveraging open-source technologies and cloud infrastructure, content creators can deploy scalable, high-performance streaming channels supported by ads.
This approach enable content distribution, allowing creators to broadcast their content globally without the need for heavy infrastructure investments.
Video File Transcoding with Open Source Cloud
SVT Encore is a powerful open-source video transcoder specifically designed for the cloud. It forms the backbone of the transcoding process in the media supply chain, taking raw video inputs and converting them into multiple formats and bitrates suitable for adaptive streaming. The transcoding process involves breaking down video files into different resolutions and bitrates, allowing viewers to receive the best possible quality based on their device and network conditions.
To reduce the barrier to get started with SVT Encore we have added their project to Open Source Cloud together with some supporting backend services that we have added. This blog gives you a walk-through on how to setup video file transcoding using Open Source Cloud.
Prerequisites
- If you have not already done so, sign up for an OSC account.
- 5 remaining services on your subscription plan or individually purchased the services included in this solution.
- S3 compatible object storage solution
This solution is based on the following open source projects made available as a service:
- SVT Encore
- Valkey
- Encore Callback Listener
- Encore Transfer
- Retransfer
After completed this tutorial you will be able to transcode a video file on an S3 compatible storage and the output is placed on another S3 compatible storage when the processing is completed.
Step 1: Create Encore Queue
Go to the web user interface and navigate to the service called SVT Encore. Click on the button “Create queue” and give the queue a name.
You can leave the Profiles URL empty for now and then press Create.
Now you have an instance of SVT Encore running with one single queue and ready to receive transcoding jobs for processing. You can try this out by clicking on the menu item Open API docs to access the online REST API documentation and submit a job.
However, to automatically get transcoded files out from SVT Encore and transferred to the output storage we need a few more help services. So that we will setup now. Start by take a note of the URL to the SVT Encore instance.
Remove the trailing slash an keep it for later use. In this case it is https://demo-blog.encore.prod.osaas.io
.
Step 2: Create Valkey queue
Valkey provides a Redis compatible key / value store and this i what we will use to manage the queue for transferring files out from Encore and to out output bucket.
Navigate to the Valkey service in Open Source Cloud and press “Create valkey”. Give the instance a name and press Create.
Note down the IP and port to the Valkey instance card and this is what will be the Redis URL that we will refer to later in this blog. In this example it would be redis://172.232.131.169:10507
.
Step 3: Launch Encore Callback Listener
Now we need something that monitors a transcoding job in SVT Encore so we know when the file is ready to be transferred. For that you navigate to the Encore Callback Listener in the web user interface. Click on button “Create callback” and enter the name of the instance, Redis URL (above), URL to the SVT Encore instance and the name of the transfer queue. We call it “transfer” in this example.
Important the URL to the SVT Encore instance is without the trailing slash.
Press Create and you are done with this step for now.
Step 4: Setup secrets
Now we have the Callback Listener service running that will monitor transcoding job and place completed jobs in the transfer queue. Now we need a service that picks up a job from the transfer queue and actually transfers the file out from SVT Encore and to our destination bucket.
First we need to configure the transfer job service with API secrets needed for the access to the S3 bucket. Navigate to the Retransfer service in Open Source Cloud and click on the tab Secrets.
Create the secrets containing the Access Key Id and Secret Access Key for the destination storage access. Note down the name of these secrets as you will be using it later.
awsaccesskeyid
awssecretaccesskey
Now navigate to the Encore Transfer service in the web user interface and click on the tab Secrets. Add a secret with your personal access token (OSC token) that you find under Settings and the tab API.
Step 5: Create Encore Transfer service
When the service is created and saved we can now move on with creating the Encore Transfer service. Enter the name of the instance, Redis URL, name of queue in Redis (Valkey), output URL, OSC token and the name of the access key secrets in the Retransfer service. In this example we will have the following values:
Then press Create and wait for the instance to be ready.
Step 6: Submit a job
Now we are ready to try transcoding a video file that we have available on an S3 compatible storage. We will create signed URL to the video file we want to transcode. For example:
https://lab-testcontent-input.s3.eu-north-1.amazonaws.com/NO_TIME_TO_DIE_short_Trailer_2021.mp4?SIGNURLSTUFF
Navigate back to the SVT Encore service and press the menu item to open API docs again.
Click on the POST /encoreJobs bar and button Try it out and enter the following JSON
{ "externalId": "blog", "profile": "program", "outputFolder": "/usercontent/blog", "baseName": "blog", "progressCallbackUri": "https://demo-blog.eyevinn-encore-callback-listener.auto.prod.osaas.io/encoreCallback", "inputs": [ { "uri": "https://lab-testcontent-input.s3.eu-north-1.amazonaws.com/NO_TIME_TO_DIE_short_Trailer_2021.mp4?SIGNURL", "seekTo": 0, "copyTs": true, "type": "AudioVideo" } ] }
And then press button Execute. Now a job is submitted and if you want to see the progress you can go to the Encore Callback Listener service and open the instance logs to check that it is receiving the callbacks.
When the transcoding process is completed it will place a job on the transfer queue that will be picked up by the Encore Transfer service. And when all the transfer jobs are completed you will in this example find a set of files in your output bucket where you have set of different variants with different resolutions and bitrates.
Conclusion
You now have a fully fledged video transcoding pipeline for preparing video files for streaming using ´SVT Encore with some supporting services. All based on open source and you don’t have to setup your own infrastructure for this to get started. If you later choose to do so you are free to do it as the code and everything demonstrated here is available as open source.
Configuration backend service for mobile applications
To provide your mobile applications with centrally controlled configuration you need a backend service that can provide the applications with this. I developed and open sourced a backend service that provide this functionality, and this code is now made available as a service in Open Source Cloud.
This means that you don’t have to have your own cloud infrastructure to get started but you always have the option to do so as it is open source. In this blog post I will walk you through how you setup this service in Open Source Cloud.
Step 1: Create an account
If you already have an account at Open Source Cloud you can skip this step.
Head over to www.osaas.io and create a free account. Follow the procedure and create a new tenant.
Step 2: Create a Key / Value Store
To store the configuration variables we will use a Redis compatible key/value store called Valkey. This is also open source and has been made available as a service in Open Source Cloud.
There is of course nothing preventing you from using a Redis cloud service for this instead but in this post we will use services available in Open Source Cloud.
When you have logged on to the platform and created your tenant, go to browse and search for “valkey” and click on the card in the search result.
Click on the button “Create valkey” and give this instance a name. What name you choose is not important now.
Write down the IP and port found on the instance card for the Valkey instance that you just created.
Step 3: Create a configuration backend
Now it is time to create the configuration service backend. Navigate back to browse and search for “application config” and click on the card named “Application Config Service”.
Now press button “Create config-service” and enter a name of the config backend service and the Redis URL to the Valkey instance you created. Construct the Redis URL using the prefix redis://
and the IP and port you noted down earlier.
Wait until the service is ready and status “running” and then you can click on the instance card.
Insert a new configuration value by clicking on the Add new button in the top right corner. As an example we create a configuration variable called “hello” and with the value “world”.
Press create button and you will find the variable in the list.
Step 4: Use the configuration in your application
To get the address to the configuration value click on the “Copy to clipboard” icon and you can use this address in your application to fetch the variable.
As an example we can write this simple web application (entered in codepen.io):
Conclusion
You no longer need to build and host your own backend to provide the applications with configuration variables with this open source project available as a service in Open Source Cloud.
Fast and simple QR-code implementation
While QR codes are not the hardest thing to add it might be tedious if you have to do it all the time!
I’m sure there are a few tools out there to handle QR-code creation but let me tell you about the QR-code generator on Open Source Cloud!
Head over to www.osaas.io and create a free account.
When you have logged on to the platform and created your tenant, go to browse and search for QR and click on the card in the search result.
Click on Create qr-generator
Now you need to give your generator a name and provide a url to where you want to redirect with your QR-code.
You could provide a logo if you’d like, it should be in a square format for best result.
Click on create and wait for the instance to be created.
Now you have your QR-code!
Implement it in your web apps by simply add the url from the instance card in a img-tag src attribute.
Here I have just created a boilerplate react app with VITE and added the img-tag and provided the url in the src attribute
Live Transcoding with Open Source Cloud
As live streaming continues to grow in popularity across various platforms, building a scalable, resilient, and cost-effective architecture is essential for broadcasters and content providers. Whether you’re streaming live sports, news, or entertainment, ensuring that your content reaches audiences globally with minimal latency and interruptions is critical.
With Open Source Cloud, you can build a live streaming architecture that leverages open-source components to offer scalability, resilience, and customization — all at a lower cost.
Live Transcoding and CDN pull stream
In this scenario the CDN pulls the stream from the encoder instance in Open Source Cloud. We strongly recommend to place a CDN origin shield between the CDN distribution nodes and the encoder instance acting as origin.
This tutorial walks you through how to setup live transcoding using Open Source Cloud.
Prerequisites
- If you have not already done so, sign up for an OSC account.
- Be on a paid subscription plan.
For best guaranteed performance we recommend purchasing a reservation for at least 1 single premium node (200 EUR per month) but not required to getting started.
Step 1: Setup secrets
Go to the web user interface and navigate to the service called Eyevinn Live Encoding. Click on the tab Service Secrets and the button New Secret.
Create a secret called streamkeya
containing mysecretkey
. This will be the stream key the live production software will need to be able to push the stream to the encoder.
Step 2: Create encoder instance
In the web user interface click on the button “Create encoder +” and enter the following in the instance creation dialog.
- Name: guide
- HlsOnly: true
- StreamKey:
{{secrets.streamkeya}}
You will create one encoder instance for each live stream you want to distribute.
Step 3: Start encoder
Once the instance is up and running you can use the provided web user interface to start and stop the encoder.
Click on the instance card to open the web user interface and for automation and integration with API you find the live API documentation by clicking on the menu item Open API Docs.There you are presented with a web based REST API client ready to use.
To start the encoder click on the button START ENCODER. When the encoder is in status “starting” it is ready to receive the stream.
On the service card you find an IP and port in the format IP:PORT
and these values are used when configuring your live production software (for example OBS). For example you enter rtmp://IP:PORT/live/mysecretkey
as the stream destination in OBS.
As soon as the stream is being received by the encoder you will find a video playing the encoded stream.
Step 4: Watch the stream
You can play the HLS stream directly from the origin by opening an HLS capable video player to the address returned by the OSC tool. In this example it was https://demo-guide.eyevinn-live-encoding.auto.prod.osaas.io/origin/hls/index.m3u8.
Step 5: Stop the stream
When the live event has been completed you stop the stream in the live production software and when that is stopped you can stop the encoder by clicking on the button STOP ENCODER.
Step 6: Configure CDN
Configure your CDN and CDN origin shield to fetch the stream from the URL that you tested with your video player as a media origin.
Contact form and CAPTCHA backend in Open Source Cloud
With an open source backend service for form collection and CAPTCHA handling you can implement a contact form with spam protection without developing your own backend services for this. These backend services are also available in Open Source Cloud so you don’t have to host these backend services yourself either.
In this blog I will describe how you can quickly get a contact form where the message is sent to a Slack channel.
Create a Slack Bot
The Slack Bot will be the one posting the message to the channel in Slack. Visit https://api.slack.com/apps/ and create a new app with the permissions to post to the desired Slack channel.
Save the Slack Bot token as this will be used later in this tutorial.
Create form backend service in Open Source Cloud
Login to or signup for an account at Open Source Cloud.
Navigate to the Contact Form Service and click on the tab Service Secrets. Click on New Secret and add a secret that contains the Slack Bot token obtained earlier.
Create a contact form service by pressing the Create service button.
Give the service a name and select slack
in the transport dropdown. Provide the service secret holding the token and enter the ID of the channel where the message should be posted.
When the service is up and running you can copy and save the URL to the contact form service.
Contact form example in React
Develop your contact form in your frontend application which in React could look something like this. Replace BACKEND-SERVICE-URL
with the URL acquired above.
'use client';
import { Input, Textarea } from '@nextui-org/react';
export default function Page() {
const handleSubmit = (formData: any) => {
fetch(new URL('BACKEND-SERVICE-URL/contact'), {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(formData).toString()
});
};
return (
<form action={handleSubmit}>
<Input name="firstname" placeholder="First name" />
<Input name="lastname" placeholder="Last name" />
<Input name="email" placeholder="Your email" />
<Textarea
name="message"
minRows={8}
placeholder="Tell us a bit about what you want our help with"
/>
<Input type="submit" value="Send" />
</form>
)
}
When the form is submitted you should now get a message in your Slack channel. To prevent spam-bots to misuse this form we need to add a CAPTCHA. CAPTCHA is an acronym that stands for "Completely Automated Public Turing test to tell Computers and Humans Apart."
To provide this functionality we will use an open source CAPTCHA backend service to generate and verify CAPTCHA. How it works is that you generate a CAPTCHA image that displays a text. Then you ask the user (human) to provide the text that he or she sees and the backend will verify that this was the text shown in the image.
Create CAPTCHA backend service in Open Source Cloud
Navigate to the CAPTCHA Service and click on the button Create service.
Give the service a name and once the service has started copy the URL to the service. Replace CAPTCHA-SVC-URL
below with this URL.
Add CAPTCHA verification to your form
Extend the form we created above with the following code.
'use client';
import { Input, Textarea } from '@nextui-org/react';
export default function Page() {
const [captchaSvg, setCaptchaSvg] = useState<string | null>(null);
const [captchaId, setCaptchaId] = useState('');
const [captcha, setCaptcha] = useState('');
const [invalidCaptcha, setInvalidCaptcha] = useState(true);
useEffect(() => {
fetch(new URL('/captcha', 'CAPTCHA-SVC-URL'))
.then((response) => response.json())
.then((data) => {
setCaptchaSvg(data.svg);
setCaptchaId(data.id);
});
}, []);
const onCaptchaChange = (value: string) => {
setCaptcha(value);
fetch(new URL('CAPTCHA-SVC-URL/verify/' + captchaId + '/' + value))
.then((response) => {
setInvalidCaptcha(!response.ok);
})
.catch(() => {
setInvalidCaptcha(true);
});
};
const handleSubmit = (formData: any) => {
fetch(new URL('BACKEND-SERVICE-URL/contact'), {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(formData).toString()
});
};
return (
<form action={handleSubmit}>
<Input name="firstname" placeholder="First name" />
<Input name="lastname" placeholder="Last name" />
<Input name="email" placeholder="Your email" />
<Textarea
name="message"
minRows={8}
placeholder="Tell us a bit about what you want our help with"
/>
{captchaSvg && (
<Image src={captchaSvg} className="bg-white" alt="Captcha" />
)}
<Input
name="captcha"
placeholder="Enter the text from the image"
description="This is used to prevent automated submissions."
required
maxLength={4}
value={captcha}
onValueChange={onCaptchaChange}
/>
<Input type="submit" value="Send" isDisabled={invalidCaptcha} />
</form>
)
}
Conclusion
This was an example on how you can add to your web application a contact form with CAPTCHA verification that posts to a Slack channel without having to build or host your own backend services for it.
What is Open Source Cloud?
Open Source Cloud reduces the barrier to get started using open source and reduces the barrier for creators to make their software available as a service. Read more about why we developed it in this post.