In this tutorial, we'll walk through using the Coconut Transcoding API with Node.js and Express.js to upload and transcode video files to MP4, as well as generate thumbnails. We'll cover the following steps:
Before we start, make sure you have the following:
Let's begin with creating an HTML form to receive a video file.
First, create a new HTML file named index.html and add the following code to create a basic form that allows users to select a video file:
This form contains an input field of type file with the accept attribute set to "video/*", which restricts the file selection to video files only. The form also includes a submit button for uploading the selected file.
The S3 bucket needs to have the correct CORS (Cross-Origin Resource Sharing) policy in place to accept PUT requests directly from the browser. The CORS policy allows you to control which origins can access your S3 bucket and what methods they can use.
To enable PUT requests from the browser, you need to add a CORS policy to your S3 bucket that allows PUT requests from the desired origins. Here's an example of a CORS policy that allows PUT requests from any origin:
To add the CORS policy to your S3 bucket:
After you've updated the CORS policy, your S3 bucket should accept PUT requests directly from the browser, as specified in the policy.
In this step, we will create a server-side application using Node.js and Express.js to handle the generation of a pre-signed URL for uploading the video file directly to Amazon S3.
In the same directory, initialize a new Node.js project and install the required packages:
Next, create a config file inside the same directory config.json to save the S3 bucket name, credentials and other information.
Now, create a new file named app.js and add the following code:
When it receives a request, it generates a pre-signed URL for uploading the video file directly to Amazon S3 and returns the URL in the response.
Now that we have set up the server-side application to handle video file uploads, let's integrate the Coconut Transcoding API to transcode the uploaded video file to MP4, and generate 3 thumbnails.
First, install the coconutjs package:
Now, update the app.js file with the following code:
This code initializes the Coconut client with your API key defined in config.json and sets up the notification and storage configurations. It also adds a new createTranscodingJob function that creates a transcoding job using the Coconut API with the uploaded video file's URL as input.
Now, the server-side application is ready to generate presigned URLs and create transcoding jobs using the Coconut Transcoding API.
In this step, we will handle the webhook notification sent by the Coconut Transcoding API when the transcoding job is completed. The webhook will contain the result URLs for the converted video files and generated thumbnails.
We will save the result in a simple in-memory key-value store, so at the beginning of app.js, add the following code:
Update the app.js file with the following code to handle the webhook notification:
In the static/coconut.js file, once the upload is completed, the job status is periodically checked thanks to the function checkJobStatus(jobId). When the job is completed, we use the mp4 URL in order to display the transcoded video within a video player. To accomplish this, insert the following code in app.js, which will be responsible for verifying the status and returning the corresponding result URLs:
In the development phase, you might want to test webhook notifications on your local machine. Ngrok is a handy tool that allows you to create a secure tunnel from a public endpoint to your local development environment. This way, you can receive webhook notifications from the Coconut Transcoding API directly to your local Node.js application.
First, download and install Ngrok for your platform from the official website: https://ngrok.com/download
Ensure your Node.js server is running by executing the following command in the terminal:
This will start your server on port 3000.
Open a new terminal window and navigate to the directory where you downloaded the Ngrok executable. Run the following command to create a secure tunnel to your local server:
After starting Ngrok, you will see a screen with information about the created tunnel. Look for the "Forwarding" section, which contains two URLs: one with HTTP and another with HTTPS. Copy the HTTPS URL, as it is the secure version.
Update the webhook URL in the config.json file:
Now, when the Coconut Transcoding API sends a webhook notification, it will use the Ngrok URL, which will forward the request to your local Node.js server. This enables you to test and debug webhook notifications in your development environment.
Note: Keep in mind that Ngrok tunnels are temporary and have limited usage for the free plan. When you restart Ngrok, you will receive a new subdomain. You will need to update your webhook URL accordingly. For a more permanent solution, consider using a paid plan or deploying your application to a public server.
In this article, we've explored how to integrate the Coconut Transcoding API with a Node.js and Express.js application to handle video transcoding tasks. We covered the process step by step, from setting up the server and creating an HTML form for uploading videos to configuring the transcoding job and receiving webhook notifications with the result URLs.
We also demonstrated how to use Ngrok to tunnel webhook notifications to a local development environment, enabling you to test and debug your application more efficiently.
By following this guide, you can build a robust video transcoding solution that leverages the power of the Coconut Transcoding API, allowing you to convert video files into various formats, generate thumbnails, and stream videos using HTTP Live Streaming (HLS) easily and efficiently. This will greatly enhance your multimedia capabilities and improve the user experience for your web application or platform.