How to create a video streaming app using React and Vime
Tags: javascript, react, webdev, tutorial
Published: 2022-12-20 12:41:42

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](https://vimejs.com/) 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](https://vimejs.com/getting-started/player).
## 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](https://github.com/Gbadeboife/React-video-streaming-app-), and a live demo of the app is hosted on [Vercel](https://react-video-streaming-app.vercel.app/).

## 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](https://vimejs.com/) 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`.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k78jmftpyh1oi5q5g3tr.png)

First of all, we create the `Home` component which accesses all videos available in our app.
```jsx
//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.


```jsx
//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](https://vimejs.com/getting-started/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
```jsx
//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

```css

.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.
![](https://i.imgur.com/jPFFQKj.gif)

## 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](https://vimejs.com/)