Steps to create the React App & Install Required Modules
Step 1: Create a React App
npx create-react-app video-stream
Step 2: Navigate to the newly created project folder by executing the below command.
cd video-stream
Step 3: Steps to install required modules
npm install react-router-dom
Project Structure:
The updated dependencies in package.json will look like this:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Insert the below code in the App.js, HomeScreen.js, and App.css file mentioned in the above directory structure.
Javascript
// App.js import React from 'react' ; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' ; import HomeScreen from './HomeScreen' ; import './App.css' ; const App = () => { return ( <Router> <div className= "app" > <Routes> <Route path= "/" element={<HomeScreen defaultVideoUrl= 'https://www.youtube.com/watch?v=0lLmU-VqXzk' />} /> </Routes> </div> </Router> ); }; export default App; |
Javascript
// HomeScreen.js import React, { useState, useEffect } from 'react' ; import { useNavigate } from 'react-router-dom' ; import './App.css' ; const HomeScreen = ({ defaultVideoUrl }) => { const [vURL, set_vURL] = useState(defaultVideoUrl); const [errorMsg, set_ErrorMsg] = useState( '' ); const [vReady, set_vReady] = useState( true ); useEffect(() => { set_ErrorMsg( '' ); }, [defaultVideoUrl]); const vPlayFn = () => { if (validateFn(vURL)) { set_ErrorMsg( '' ); set_vReady( true ); } else { set_ErrorMsg( 'Please enter a valid video URL' ); } }; const validateFn = (url) => { return url.trim() !== '' && vFormatFn(url); }; const vFormatFn = (url) => { const vFormats = [ 'mp4' , 'webm' , 'ogg' , 'ogv' , 'avi' , 'mov' , 'flv' , 'mkv' ]; const ext = url.split( '.' ).pop(); if (url.includes( 'youtube.com' ) || url.includes( 'youtu.be' )) { return true ; } return vFormats.includes(ext.toLowerCase()); }; const checkYTFn = (url) => { return url.includes( 'youtube.com' ) || url.includes( 'youtu.be' ); }; const getYTFn = (url) => { const match = url.match(/[?&]v=([^?&]+)/); return match ? match[1] : '' ; }; const inputFn = (e) => { set_vURL(e.target.value); set_vReady( false ); }; return ( <div className= "container" > <h1 className= "heading" > w3wiki Video Streaming App </h1> <div className= "input-container" > <input className= "input" placeholder= "Enter Video URL" onChange={inputFn} value={vURL} /> <button className= "button" onClick={vPlayFn}> Play Video </button> </div> { errorMsg && <p className= "error-message" > {errorMsg} </p> } <div className= "video-preview" > {vReady && ( <> {checkYTFn(vURL) ? ( <iframe title= "YouTube Video Preview" width= "100%" height= "315" src={` https: //www.youtube.com/embed/${getYTFn(vURL)}`} frameBorder= "0" allowFullScreen ></iframe> ) : ( <video controls width= "100%" height= "315" > <source src={vURL} type= "video/mp4" /> Your browser does not support the video tag. </video> )} </> )} </div> </div> ); }; export default HomeScreen; |
CSS
/* App.css */ body { margin : 0 ; font-family : 'Arial' , sans-serif ; background : linear-gradient( 135 deg, #8ff062 , #6eecb7 ); color : white ; height : 100 vh; overflow : hidden ; } .app { background : linear-gradient( 135 deg, #ffffff , #ffffff ); box-shadow: 0 4px 8px rgba( 0 , 0 , 0 , 0.1 ); margin : 20px auto ; padding : 20px ; width : 60% ; border-radius: 10px ; } .container { display : flex; flex- direction : column; align-items: center ; padding : 16px ; } .heading { font-size : 2em ; font-weight : bold ; margin-bottom : 20px ; color : green ; } .input-container { display : flex; flex- direction : column; align-items: center ; width : 100% ; margin-bottom : 20px ; } .input { width : 80% ; height : 40px ; margin-bottom : 10px ; border : 2px solid rgb ( 255 , 0 , 0 ); border-radius: 5px ; padding-left : 10px ; font-size : 1em ; outline : none ; background : rgba( 255 , 255 , 255 , 0.1 ); } .button { background : linear-gradient( 45 deg, #228b22 , #2eb82e ); color : white ; border : none ; height : 40px ; border-radius: 5px ; cursor : pointer ; width : 30% ; font-size : 1em ; transition: background 0.3 s ease-in-out; outline : none ; } .button:hover { background : linear-gradient( 45 deg, #2eb82e , #228b22 ); } .error-message { color : #ff0000 ; margin-bottom : 10px ; font-size : 0.8em ; } .video-preview { width : 100% ; max-width : 560px ; margin-top : 20px ; border-radius: 10px ; overflow : hidden ; box-shadow: 0 0 10px rgba( 255 , 0 , 0 , 0.2 ); } @media ( max-width : 768px ) { .input { width : 100% ; } .button { width : 100% ; } } |
Start your application using the following command:
npm start
Output: Type the following URL in the address bar http://localhost:3000/
Create a Video Streaming Platform with React
This article focuses on Creating and Designing a Video Streaming Application using React JS. In this application, users can stream any video just by entering the video link in the input field, the preview and streaming of the video is started in the application itself. Proper error messages are shown when an application fails to render the video.
Output Preview: Let us have a look at how the final output will look like.
Contact Us