As a continuation to the blog post Stream Video with Open Web Services we will in this post develop a web application for streaming the video we have created.

In this guide we will use the build tool Vite to setup a web project for a web application based on the React framework.

Setup the React Typescript project

Run the following command to scaffold a new project based on React template.

% npm create vite@latest my-video-app -- --template react-ts

Then run:

% cd my-video-app
% npm install
% npm run dev

Open your browser to http://localhost:5173/ and you will see the following template.

Create a Video Player component

Now it is time to add a video player component. We will use the open source web player from Eyevinn in this example.

First install the library.

% npm install --save @eyevinn/web-player

Then we will create a folder for our components

% mkdir src/components

In this folder we will create a file called Player.tsx containing the following code.

import webplayer from '@eyevinn/web-player';
import { useEffect, useRef } from 'react';

import '@eyevinn/web-player/dist/webplayer.css';

export default function Player({
  src,
  autoplay = false
}: {
  src: string;
  autoplay?: boolean;
}) {
  const elRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (elRef.current) {
      const instance = webplayer(elRef.current, {});
      instance.player.load(src, autoplay);
      return () => {
        instance.destroy();
      };
    }
  }, [src]);

  return <div ref={elRef} className="h-full" />;
}

Use the Player component

Now we can use this Player component on our main page. Replace the contents in the file src/App.tsx and replace the src property with the URL to the video you created in the previous blog.

import { useState } from 'react'
import './App.css'
import Player from './components/Player'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React + Eyevinn OSC</h1>
      <div className="card">
        <Player src="https://eyevinnlab-devguide.minio-minio.auto.prod.osaas.io/devguide/VINN/52e124b8-ebe8-4dfe-9b59-8d33abb359ca/index.m3u8"/>
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

export default App

Now when updating the browser you should see the video player with your video.

Make the web application available online

Now you have a working application running locally on your computer and it is time to make it available online. To make it available online we will be using Eyevinn Open Source Cloud to host this website as described in a blog post on Eyevinn Open Source Cloud blog.

First modify the vite config file vite.config.ts to use a relative base url (default expects the root /).

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  base: './',
  plugins: [react()],
})

Then we can build the application by running the following command.

% npm run build

Go to the web console of Eyevinn Open Source Cloud and obtain the access token available under Settings. Copy the token and store it in the environment variable OSC_ACCESS_TOKEN.

% export OSC_ACCESS_TOKEN=YOUR_TOKEN

Now run the following command to deploy the build. We name the website “video” which will be the bucket where the files are placed.

% npx @osaas/cli@latest web publish -s video dist/

Now your web application is available online at the address returned by the command above. In our example it is available at https://eyevinnlab-video.minio-minio.auto.prod.osaas.io/video/index.html

Conclusion

This gives you an example of how you can build a video streaming application based on open source without having to host everything in-house. From video processing to the deployment of the web application based on open web services in Eyevinn Open Source Cloud.

As everything is based on open source you always have the option to bring it in-house if you want to.

Author Of article : Jonas Birmé Read full article