React video recording not displaying in the video element

Question

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)

javascript reactjs video material-ui webcam

Answer 1

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?

Answer 2

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?

React video recording not displaying in the video element

Answer №1

Similar questions

I'm struggling with getting the state.map function in react.js to display the data correctly

JavaScript, AJAX rapid iteration

React Form with Conditional Input Options and Validation

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

ng-enter animation not working for ui-view nested within another ui-view after page reload

Use PHP to highlight the row that has been selected in an HTML table

Is there a way to change the rotation direction of my circular progress bar in mui?

Checking for the accuracy of the provided full name

Is there a way to link dynamic server fields with VueJS?

I am encountering difficulties retrieving data from the context API in React.js

How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Maintain stack navigation in React Native's createSwitchNavigator even when switching screens

Best method to generate an element using any jQuery selector string

Encountering a 404 error when attempting to fetch @reach/router via NPM

The function has exceeded the time limit of 60000 milliseconds. Please make sure that the callback is completed

Halt of dispatcher playback occurs after a duration of 10 minutes with discord.js

Why is React JS unable to discover my exported modules?

Grabbing a section of a URL through a bookmarklet: A simple guide

Concerns arise with jQuery grid compatibility in Firefox browsers

Unable to retrieve the field value from the Json Object