How to create a video streaming app using React and Vime

Video streaming has transformed the way video media is delivered to us online as it allows users to watch videos without the having to download them.
This is highly convenient as it saves us the time spent downloading a video and the storage space required for downloaded content.
It is a key resource for information sharing in today's world, serving educational, entertainment, professional, and other functions.

Vime

Vime is a simple React framework that provides a flexible, expandable media player that can be used with a variety of Javascript frameworks like React, Vue, Angular, and Svelte. This project will utilize a sample clip from the Vime documentation.

Prerequisites for this project

• Knowledge of CSS, and React and React hooks
• Latest version of Node.js installed

This project's source code can be found on Github, and a live demo of the app is hosted on Vercel.

Setting up the project

First, we create a new React app with the following line of code:

npx create-react-app react-streaming-app

After that, run the following line of code in the terminal to include Vime in the project:

npm i @vime/core @vime/react

Running npm start will launch the project on the local development server at http://localhost:3000/ in our browser.

Constructing our components

Now that we've installed our app's dependencies, we create a components folder to store the two components that will be used in this project, Home and Video1.

First of all, we create the Home component which accesses all videos available in our app.

//components/Home.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function Home(){

  return(

      <div className="home">
      <Link to="/Video" >
      <img src="https://media.vimejs.com/poster.png"/>
      <p>Video 1</p></Link>
      </div>

  )
}


export default Home

To prevent the site from refreshing when the video link is clicked, we utilize React Router. In Home.js, The React Router's 'BrowserRouter' and 'Link' are imported, Link creates an anchor tag that leads to the page specified in it's to prop, in this case /video which stores the video to be used.

//components/Videoplayer.js
import React from "react";
import {
  Player,
  DefaultUi,
  Video
} from "@vime/react";

 function VideoPlayer() {

  return (
    <div className="player">
    <Player>
      //this inserts our video into the app.
      <Video crossOrigin=""  poster="https://media.vimejs.com/poster.png">
        //specify location of video to be used
        <source data-src="https://media.vimejs.com/720p.mp4" type="video/mp4" />
        <track
          default
          kind="subtitles"
          src="https://media.vimejs.com/subs/english.vtt"
          srcLang="en"
          label="English"
        />
      </Video>
      //this loads the default UI of the vime framework
      <DefaultUi ></DefaultUi>
    </Player>
    </div>
  );
}


export default VideoPlayer

In The VideoPlayer component above, we import the dependencies needed to display the video from @vime/react and then create the body for the video. Providers load the video to be used into the app and Vime supports a couple including Youtube, Vimeo, and Dash.
The poster prop of Video fetches a thumbnail to be displayed while the video is loading, source contains the link to the clip to be loaded, DefaultUi ensures that the default interface of vime is used for the video; note that a few dependencies can be imported to create a custom User Interface for the video.

Now that our components are now defined, they are imported into App.js where they are displayed.

Importing defined components into App component

//App.js

import React from "react";
import { BrowserRouter as Router, Route,Switch} from "react-router-dom";
import VideoPlayer from "./components/Video";
import "./App.css"
import Home from "./components/Home";

function App(){


  return(
    <div className="player">

  <Router>
    <Switch>
      //displays only on the home page
      <Route exact path="/" ><Home/></Route>
      //displays while the path of the app is `Video`
      <Route path="/Video"><VideoPlayer/></Route>
    </Switch>

  </Router>
  </div>


  )
}


export default App

In the the App component, Router and Route are both imported and a Router component is required to house the Routes being used. Route contains a component which is rendered when the path matches the url of the page, meaning the / path of the first Route matches the initial and additional pages of the app, making the component it contains render on every page; because of this, we include exact in the Route so that it only appears on the initial page.
The second route has a path of /Video which can be visited when the Link in the Home component is clicked.

Styling the app

.home{
  width: 30%;
  text-align: center;
  border: 1px solid black;
  margin: auto;
  padding-top: 10px;
  background-color: rgb(173, 212, 207);
  border-radius: 5px;
  font-weight: 700;
  box-shadow: #73ffe0 0px 0px 20px 10px;
}
.home p{
  font-size: 20px;
}
.home img{
  width: 95%;
}
span{
  font-size: 30px;
  position: absolute;
  top: 0;
  z-index: 5;
  left: 0;
  color: white;
  padding: 30px 100px;
}

a{
  text-decoration: none;
}
.player{
  padding-top: 10vh;
}
.video{
  width: 70%;
  margin: auto;
}
.message{
  border: 1px solid black;
  font-size: 40px;
}
.message button{
  padding: 15px 30px;
}

Let's have a peek at the finished product now that our app has been styled.

Conclusion

This article demonstrates how a video streaming app can be created using React and the Vime framework, which includes several features. Feel free to expand the app by adding new videos and features.

Resources

• Vime documentation