Building a Video on Demand Web Application with Gatsby and AWS

Understanding AWS

The world of on-demand streaming has revolutionized the way we consume entertainment. With the rise of powerful services like Netflix and Amazon Prime, it’s no wonder that media companies are looking to invest in building their own video on demand web applications.

AWS offers a vast variety of services, including Amplify, which provides a quick interface to help you get started with mobile and web applications quickly. With Amplify, you can easily integrate AWS services like S3, MediaConvert, and Cognito into your project.

Using Gatsby and GraphQL

While AWS is the brains of our project, we still need a way to communicate with the user. That’s where Gatsby comes in. As a pre-rendering framework built on top of React, Gatsby allows you to pre-render your React code and takes the load off your users’ clients to render your application on the device.

Additionally, Gatsby has awesome support for GraphQL, an open-source language used for data query and manipulation. GraphQL enables you to query only the data you need, reducing network overhead and improving performance.

query {
  videos {
    id
    title
    description
  }
}

Getting Started with a VoD Application

To set up our VoD application, we’ll need to create a new Gatsby project and install the necessary dependencies.

npm init gatsby
npm install gatsby-plugin-aws-amplify video.js

We’ll also create a basic video player component using Video.js, a library that supports video streaming and playback in JavaScript environments.

import videojs from 'video.js';

const VideoPlayer = ({ videoId }) => {
  const videoRef = React.createRef();

  useEffect(() => {
    const player = videojs(videoRef.current, {
      techOrder: ['html5'],
      sources: [{
        src: `https://example.com/videos/${videoId}`,
        type: 'video/mp4'
      }]
    });
  }, [videoId]);

  return (
    <div>
      <video ref={videoRef} width="100%" height="400px" />
    </div>
  );
};

Creating a Page to House the Player

Next, we’ll create a page to house our video player component. We’ll pass in the video ID as a prop to the component, which will then fetch the video from the AWS CDN and stream it for viewing.

import React from 'eact';
import VideoPlayer from '../components/VideoPlayer';

const VideoPage = ({ videoId }) => {
  return (
    <div>
      <h1>{videoId}</h1>
      <VideoPlayer videoId={videoId} />
    </div>
  );
};

Creating a Common List of Available Videos

To take our application to the next level, we’ll add a feature to view the videos that are uploaded to our bucket. We’ll create an API call inside the useEffect Hook to fetch the list of available videos.

import React, { useState, useEffect } from 'eact';
import axios from 'axios';

const VideoList = () => {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    axios.get('https://example.com/api/videos')
     .then(response => {
        setVideos(response.data);
      })
     .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <ul>
      {videos.map(video => (
        <li key={video.id}>
          <a href={`/video/${video.id}`}>{video.title}</a>
        </li>
      ))}
    </ul>
  );
};

Integrating AWS Amplify

Now that we have our frontend set up, it’s time to integrate AWS Amplify into our project. We’ll install the Amplify CLI and set up a new Amplify project inside our Gatsby project.

npm install -g @aws-amplify/cli
amplify init

We’ll then install the VOD plugin and set up a VOD resource to provision the required resources on the cloud.

amplify add plugin aws-vod
amplify push

Watching it in Action

Finally, we’ll test out our application by uploading a sample video via the AWS interface and testing it inside our app. We’ll also explore how to use the GraphQL API to manage our videos and create a homepage that displays all available videos.

query {
  videos {
    id
    title
    description
  }
}

By following these steps, we’ve successfully built a basic video on demand web application using Gatsby and AWS Amplify.