In This Topic ▼

Playback a Video File - React JS

This tutorial shows how to use VideoViewer to perform simplified playback of a video file in a React JS application using the LEADTOOLS Multimedia SDK.

Overview
Summary	This tutorial covers how to use the `VideoViewer` object in a React JS application.
Completion Time	30 minutes
Visual Studio Project	Download tutorial project (2 MB)
Platform	React JS Web Application
IDE	Visual Studio : Service \ Visual Studio Code : Client
Development License	Download LEADTOOLS
Try it in another language	C#: .NET 6+ (WinForms) C API: C DLL (Windows) HTML5: HTML5 JavaScript, HTML5 React JS

Required Knowledge

Get familiar with the basic steps of creating a project by reviewing the Add References and Set a License tutorial, before working on the Playback a Video File - React JS tutorial.

Create the Project and Add LEADTOOLS References

Start with a copy of the project created in the Add References and Set a License tutorial. If you do not have a copy of that tutorial project, follow the steps inside that tutorial to create it.

The references needed depend upon the purpose of the project. For this project, the following JS files are needed:

Leadtools.Annotations.Engine.js
Leadtools.Controls.js
Leadtools.Document.d.ts
Leadtools.Document.js
Leadtools.Multimedia.d.ts
Leadtools.Multimedia.js
Leadtools.d.ts
Leadtools.js
jquery.d.ts

Make sure to copy these files to the public\common folder and import them in the public\index.html file.

For more information on which files to include for your JavaScript application, see Files to be Included with your Application.

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details, including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

Evaluation license, obtained at the time the evaluation toolkit is downloaded. It allows the toolkit to be evaluated.
Deployment license. If a Deployment license file and developer key are required, refer to Obtaining a License.

Note: Adding LEADTOOLS local references and setting a license are covered in more detail in the Add References and Set a License tutorial.

Import LEADTOOLS Dependencies

Open the index.html file in the public folder and add the below necessary script tags inside the head to import LEADTOOLS dependencies.

<!DOCTYPE html> 
<html lang="en"> 
   <head> 
      <!-- Third Party Jars --> 
      <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 
 
      <!-- LEADTOOLS Dependencies --> 
      <script src="/common/Leadtools.js"></script> 
      <script src="/common/Leadtools.Annotations.Engine.js"></script> 
      <script src="/common/Leadtools.Controls.js"></script> 
      <script src="/common/Leadtools.Document.js"></script> 
      <script src="/common/Leadtools.Multimedia.js"></script> 
      <title>Playback Video File</title> 
   </head> 
   <body> 
      <noscript>You need to enable JavaScript to run this app.</noscript> 
      <div id="root"></div> 
   </body> 
</html>

Add the DocumentService and VideoViewer Code

With the project created, the references added, and the license set coding can begin.

Create a new folder inside of the src folder and name it Components. Inside of the Components folder create two new files called DocumentService.tsx and VideoPlayback.tsx. Open the DocumentService.tsx file and add the following code to initialize the DocumentService and begin interacting with it:

///<reference path="../../public/Common/Leadtools.Document.d.ts" /> 
import { useState, useEffect } from "react"; 
 
function DocumentHelper() { 
   const [serviceStatus, setServiceStatus] = useState(String); 
 
   useEffect(() => { 
      connectToDocumentService(); 
   }, []); 
 
   async function connectToDocumentService() { 
      try { 
         lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
         lt.Document.DocumentFactory.servicePath = ""; 
         lt.Document.DocumentFactory.serviceApiPath = "api"; 
         setServiceStatus("Connecting to service " + lt.Document.DocumentFactory.serviceUri); 
         await lt.Document.DocumentFactory.verifyService(); 
         setServiceStatus("Service Connection Verified!"); 
      } catch (error) { 
         console.error(error); 
         setServiceStatus("Service not properly connected."); 
      } 
   } 
 
   return <p id="serviceStatus">{serviceStatus}</p>; 
} 
 
export default DocumentHelper;

Next open the VideoPlayback.tsx file and add the following code to create the video viewer and link it with html elements:

///<reference path="../../public/Common/Leadtools.Document.d.ts" /> 
///<reference path="../../public/Common/Leadtools.Multimedia.d.ts" /> 
///<reference path="../../public/Common/jquery.d.ts" /> 
import { ChangeEvent, useEffect, useRef, useState } from "react"; 
 
function ImageViewer() { 
   const videoPlayBack = useRef(null); 
   const [videoViewer, setVideoViewer] = useState<lt.Multimedia.VideoViewer>(); 
   const [video, setVideo] = useState<File>(); 
 
   // On component mount, create the ImageViewer 
   useEffect(() => { 
      createVideoPlayback(); 
   }, []); 
 
   useEffect(() => { 
      setNewVideo(); 
   }, [video]); 
 
   function createVideoPlayback() { 
      if (videoPlayBack.current) { 
         const videoViewer = new lt.Multimedia.VideoViewer({ root: videoPlayBack.current }); 
         setVideoViewer(videoViewer); 
      } 
   } 
 
   async function setNewVideo() { 
      if (video) { 
         try { 
            const options = new lt.Multimedia.ConvertVideoOptions(); 
            const safeUrl = await lt.Multimedia.MultimediaFactory.convertVideo(video, options); 
            videoViewer?.setVideo(safeUrl.toString()); 
         } catch (error) { 
            console.error(error); 
            alert("Error: Image not loaded correctly, check console for more information."); 
         } 
      } 
   } 
 
   // When file is uploaded, make sure it is valid then update the state 
   const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => { 
      if (e.target.files) { 
         const selectedFile = e?.target?.files[0]; 
         const fileName = selectedFile.name.toLowerCase(); 
         if (!fileName.endsWith(".mp4")) { 
            alert("Please select a .mp4 file."); 
            return; 
         } 
         setVideo(selectedFile); 
      } 
   }; 
 
   return ( 
      <div className="videoPlaybackDiv"> 
         <div> 
            <p>Choose Video File</p> 
            <input id="chooseFile" type="file" onChange={handleFileUpload} accept=".mp4" /> 
            <div className="videoDisplayDiv" ref={videoPlayBack}></div> 
         </div> 
      </div> 
   ); 
} 
 
export default ImageViewer;

Open the App.tsx file located in the src folder. Replace the return statement with the following:

return ( 
   <div className="App"> 
      <header className="App-header"> 
         <div className="toolbar"> 
            <p>LEADTOOLS - Video Playback</p> 
            <DocumentService /> 
         </div> 
         <VideoPlayback /> 
      </header> 
   </div> 
);

Improve the Visuals of the Project

Navigate to App.css, in the src folder which creates our HTML elements. Add the following code to improve the visuals of the application.

.App { 
   text-align: center; 
} 
 
.App-logo { 
   height: 40vmin; 
   pointer-events: none; 
} 
 
.App-header { 
   background-color: #282c346e; 
   min-height: 100vh; 
   display: flex; 
   flex-direction: column; 
   align-items: center; 
   justify-content: center; 
   font-size: calc(10px + 2vmin); 
   color: white; 
} 
 
.toolbar { 
   background-color: #282c34; 
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
   box-sizing: border-box; 
   width: 100%; 
   position: fixed; 
   padding: 0px 20px; 
   top: 0; 
   left: 0; 
} 
 
.videoDisplayDiv { 
   padding: 10px; 
} 
 
#serviceStatus { 
   font-size: 15px; 
} 
 
#chooseFile { 
   padding-left: 70px; 
}

Run the Document Service

In order to run this application successfully, the LEADTOOLS .NET Framework Document Service is required. The LEADTOOLS .NET Framework Document Service project is located at <INSTALL_DIR>\LEADTOOLS23\Examples\Document\JS\DocumentServiceDotNet\fx.

Note: .NET FrameWork Document Service supports uploadDocumentBlob but .NET Core Document Service does not.

Open the DocumentService.csproj and run the project using IIS Express. After running the csproj Document Service project in Visual Studio, the webpage will show that the service is listening. The Client Side will be able to communicate with the Document Service, allowing the Image Data processing, and returning the OCR's text from the image.

Run the Project

To run the video playback React application open a new terminal and cd into the root of the project. From there, run npm start. If you do not have the node modules included with the project, be sure to also run the command, npm install before running the project.

To test, follow the steps below:

Once the project is running, select Choose File and select a web-compatible video file.
From here you can play, seek, and stop the video.

Note: AVI file types are no longer supported in HTML.

Wrap-Up

This tutorial showed how to load a video source file and playback the file using the VideoViewer object.