React video recording not displaying in the video element

I'm currently developing a React application that facilitates webcam interviews with candidates. As part of this process, candidates have the option to "Start Again" or "Complete" their interviews.

One challenge I am facing is displaying the recorded data as an HTML video. The issue arises when the video does not appear after recording, particularly because the video data is in blob format.

In addition to this, a download button has been included for users. When users utilize this feature, they are able to successfully download and save the video locally.

Various solutions have been attempted to address the display problem. These solutions range from directly embedding the video using .mp4 or .webm extensions in the src attribute to experimenting with third-party React video player npm packages. Unfortunately, none of these methods have yielded successful results thus far.

... (proceeding with code snippet)
javascriptreactjsvideomaterial-uiwebcam

Answer №1

note: I don't use React so please try to fix any mistake(s) below:

To resolve the issue, you should update the video tag's source with your blob data.

Here is a suggestion to get started with the above concept:

(1). Utilize this setup for your <video> tag (example: ensure to assign a ref for this element):

<video
  ref={videoRef}
  type="video/mp4"
  src=""
  controls
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
  onError={(e) => { console.log('Error', e); }}
/>

(2) Next, utilize the \\Download Video function to enable playback of the blob data (assuming it contains valid information):

//# Download Video
const handleDownload = React.useCallback(() => {
 if (recordedChunks.length) 
 {
   const blob = new Blob(recordedChunks, { type: 'video/webm' });
   const url = URL.createObjectURL(blob);
   
   //# test playback ...
   videoRef.current.src = url;
   videoRef.current.load();
   videoRef.current.play();
   
   //# save as file
   const a = document.createElement('a');
   document.body.appendChild(a);
   a.style = 'display: none';
   a.href = url;
   a.download = 'react-webcam-stream-capture.webm';
   a.click();
   window.URL.revokeObjectURL(url);
   setRecordedChunks([]);
 }
}, [recordedChunks] );

PS: One thing to keep in mind is that on Apple devices, the video may be received as type video/mp4 instead of video/webm. It is noted that Safari browser on iOS generates an MP4 video. Consider whether your operating system and/or browser are impacting the result if the HTML tag is still not functioning properly.
For instance: Is the issue due to setting as video/webm in Safari on a Mac / iPad / iPhone?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the `ng-if` directive in Angular to check for the

I need to output data in JSON format using items. To display a single item, I utilize ng-repeat="item in items". Additionally, I can access the user object of the currently logged-in user with user. Every item has the ability to belong to multiple wishlis ...

javascriptjsonangularjs

"Scotchy McScotchface's to-do list application powered

How is the index.html (frontend Angular) being triggered? The tutorial mentioned that by including one of the following routes in route.js, the frontend gets called app.get('*', function(req, res) { res.sendfile('./public/index.html&ap ...

javascriptangularjsnode.jsexpress

I'm facing an issue with SSRProvider in my NextJs application

My application is developed using NextJs and Typescript, utilizing the react-bootstrap library for creating components. I am facing an issue where I keep receiving an error message stating that When server rendering, you must wrap your application in an &l ...

javascriptreactjstypescriptnext.js

Is it possible to showcase a unique date for every item that gets added to a list?

I am new to using React, so please bear with me. I want to be able to show the date and time of each item that I add to my list (showing when it was added). I am struggling to get this functionality working with my current code. Any help or explanation o ...

reactjstypescriptreact-hooks

It is not possible to retrieve a cookie via a request

Currently, I am in the process of setting up an Express JS server that uses cookies. This is my first time incorporating cookies into a project :) Upon user login, I send cookies to them using the following code: res.cookie('pseudo', list[i].ps ...

javascriptnode.jsexpresscookies

What is the best way to set up environments for Google App Engine (GAE

After developing a web app with server and client components, I decided to deploy it to Google Cloud using App Engine. Although the deployment process was successful, the main issue lies in the non-functioning env_variables that are crucial for the applic ...

reactjstypescriptexpressgoogle-app-enginegoogle-cloud-platform

The potential weakness that arises during the installation of react-scripts

After installing react-scripts, I discovered a total of 58 vulnerabilities, including 16 moderate, 40 high, and 2 critical threats. Here is a breakdown of my setup: Operating System: Linux Debian 10 Node.js version: v14.18.1 Npm version: 8.1.0 React versi ...

reactjsnpmnpm-scripts

Combining the Powers of Angular JS and Symfony2

Currently working on a project involving Symfony2 and in need of some advice. Considering a hybrid application approach in two ways: a) Using a traditional form with CSRF Token for the Login Page handled by Symfony2, and b) Inner pages (potentially module ...

javascriptphpjsonsymfony

The variable within my function is not being cleared properly despite using a jQuery function

Recently, I encountered an issue with a function that displays a dialog box to ask users if their checks printed correctly. Upon clicking on another check to print, the "checked_id" value remains the same as the previously executed id. Surprisingly, this i ...

javascriptjquery

A guide to creating an HTTPS request using node.js

I am currently in the process of developing a web crawler. Previously, I utilized the following code for HTTP requests: var http=require('http'); var options={ host:'http://www.example.com', path:'/foo/example' }; ...

javascriptnode.jshttps

Display multiple items from a JSON object in Django on the following page

I need to implement a feature that allows users to select multiple entries from a JSON object displayed in an HTML table. After selecting their entries and submitting, they should be redirected to a new page where only their chosen items are shown for conf ...

javascriptjquerydjangodjango-formsdjango-views

Using Node.js to implement GET, POST, and DELETE functionalities

I have embarked on the journey of learning Node.js and I find myself in a state of confusion. Could you please guide me on how to construct effective HTTP requests for the following scenarios: 1) Retrieve all galleries from the gallerySchema using a GET ...

javascriptnode.jsapiexpresshttp

Connect-busboy causing NodeJS issue: TypeError - the method 'on' cannot be called on an undefined object

Recently I encountered an issue with a piece of my code: router.route("/post") .get(function(req, res) { // ... }) .post(authReq, function(req, res) { // ... // Get uploaded file var fstream; req.pipe(re ...

javascriptnode.jsexpressbusboy

Send data in JSON format along with an identifier using Jquery AJAX

I am having trouble sending JSON data along with 2 IDs using a jQuery AJAX post. Despite my efforts, I can't seem to get it working. Here is the code snippet in question: try { var surveyID = localStorage.getItem("surveyId"); var userDetails ...

javascriptjqueryajaxcordova

Tips for generating AJAX requests directly from HTML documents

Hey there! I'm fairly new to JavaScript and have a question that might seem silly to some. How exactly can I invoke a function from a Coffeescript file within my HTML code? I'd like to give users the option to choose the language in which they v ...

javascriptjqueryhtmlajaxcoffeescript

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

Retrieve information from API using the map method

I've been stuck on a problem for days and I need some help. My goal is to create a View that displays information from an API. However, each time I map this item, I want to make another call to the API to check the live price of that product. For exa ...

reactjsreact-native

Updating or swapping images using JavaScript and HTML

I am looking to implement a feature similar to Twitter, where uploading a picture automatically updates the avatar by displaying a spinner while the new image loads. I attempted to accomplish this with the following code: <script language="javascript"& ...

javascriptjqueryajaxhtml

Order an array in Javascript based on the day of the month

I am trying to create a unique function that changes the order of a string based on the day of the month. For instance, if the input string is "HELLO" and today's date is the 1st of April, the output should be "LHEOL". On the 2nd of April, it should ...

javascriptjqueryarraysdateshuffle

implementing smooth scrolling with a specified duration

I decided to use react-router-hash-link over React-Scroll in order to link to another component and implement smooth scrolling. I've managed to adjust the scroll offset, but I'm stumped on how to add a duration to the scroll animation. Can anyone ...

reactjs