I have a video in an Amazon S3 bucket. The video is around 6MB in size, has been made public, and is used as a background video for the homepage of my React application. I have applied the object URL directly to the video html element however when the React application loads, the video does not show. If I were to go to a different page and come back to the homepage, the video appears just fine.
Code:
import React, { Component } from 'react';
import black from '../../imgs/backgrounds/black.jpg';
class HeaderVideo extends Component {
render() {
return (
<video poster={black} autoPlay={true} loop>
<source src="https://beatsbyzero.s3.us-east-2.amazonaws.com/videos/blackwhite1.mp4" type="video/mp4" />
</video>
)
}
}
export default HeaderVideo;
Any ideas on how to handle this?
I think I found the root cause:
https://blog.chromium.org/2017/09/unified-autoplay.html
I prepared video for you (without sound track)
https://drive.google.com/file/d/1lHGyoq-UHZ0YBHLY0-C_zf9yWkGgU2AZ/view?usp=sharing
Your video had a silent audio:
Now video hasn't audio:
Please, download video and replace it, then run your code.
I hope all be fine.
It can be helpful also:
Browser denying javascript play()
How to remove an audio track from an mp4 video file:
https://unix.stackexchange.com/questions/6402/how-to-remove-an-audio-track-from-an-mp4-video-file
Related
How to display image from object?
I was trying to copy relative path, but it's not working for me. Output on browser:
./images/avatars/image-maxblagun.png
data.json
"image": {
"png": "./images/avatars/image-amyrobson.png",
comment.tsx
import React from 'react';
import data from '../../data.json';
const Comment = () => {
const mapData = Object.values(data.comments).map((value) => (
<div key={value.id}>
<div>
<img src={value.user.image.png} alt={value.user.image.png} />
{value.content}
</div>
</div>
));
return <>{mapData}</>;
};
export default Comment;
Link to repository: https://github.com/xflameyoke/interactive-comment-section-app
To add to jsecksn's answer, usually you would import images and the like at the top of your file like this. This ensures that when your project is built, webpack will copy the necessary resources etc.
Since your requirement does not allow for such an import, I believe that just copying the resources to the public folder and changing the url's from relative to absolute is the easiest approach.
In that way the images are out of scope for data.json while rendering.
You must move your images folder images/avatars/ to the root of the /public folder in your project.
Meanwhile in data.json, modify the locations for each image, as if it (data.json) were inside the /public folder i.e. "png": "/images/avatars/image-juliusomo.png" and so forth.
I want to capture a local video, MediaStream object from a react video component and pass it into WebRTC. captureStream() method is not present in React may be, can someone share me the code of this???
when i try to run captureStream() in react it shows me error that (captureStream is not present in reactjs)
<video ref={videoElementRef} muted id="video-element-ids" className="video" />
const url = URL.createObjectURL(file);
this.videoElementRef.current.src = url;
await this.videoElementRef.current.play();
const mediaSream = this.videoElementRef.current.captureStream();
I'm looking to use the full-featured PDF.js in a React component in a Next.js project, as seen in Firefox and as on this online demo. Some important features here are being able to navigate to a certain page number by typing it in, and searching for text in the PDF. Is there a React component available for that?
The library react-pdf is nice for rendering a single page, but doesn't provide a toolbar or a convenient way of lazily loading pages in a scrollable view.
Similar to the questions How to use full PDF.js viewer with toolbar in webpack and Vuejs? (where the accepted answer provides a Vue component) and Embed Full Mozilla pdf.js viewer in vue.js ( using webpack via vue-cli ), but for React.js.
I tried including including /web/viewer.html as part of the inner HTML of a React component by doing the following, but it didn't work out.
Download the latest release and extract it to a folder part of my Next.js project (which I called pdfjs). I tried several folders, such as /client, /client/components, /pages, /node_modules, and /.
Run npm install --save-dev html-loader
Use this Webpack loader that parses HTML files, by changing next.config.js to the following:
module.exports = {
// …
webpack: (config, options) => {
config.module.rules.push({
test: /\.html$/,
exclude: /node_modules/,
use: { loader: 'html-loader' }
});
return config;
},
}
Create a simple page under /pages as follows:
import React from 'react';
import PdfViewer from '../pdfjs/web/viewer.html'
export default function () {
return (
<div className="content" dangerouslySetInnerHTML={{ __html: PdfViewer }} />
);
};
After running next in terminal to start a dev server and navigating to that page in the browser, I get an error about the JavaScript heap running out of memory.
Even if my computer had enough memory, I'm not sure that this would actually result in the PDF rendering – not to mention the danger of using dangerouslySetInnerHTML. It looks like a better solution would probably be to have an actual React component rather than trying to embed an HTML file.
I think this might be more of what your after. I wrapped it in a component for you already but this is a document viewer which can view PDF documents with out much work.
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
class DocView extends React.Component{
constructor(props){
super(props);
}
render(){
var url = "https://docs.google.com/viewerng/viewer?url="+this.props.src+"&embedded=true";
return(
<iframe style={this.props.style} src={url}></iframe>
);
}
}
export default DocView;
CloudPDF offers a React PDF viewer. It is basically pdf.js but then pre-rendered on the server. This gives the possibility for lazy loading of large pdf files and still keeping performance. And by default has a nice layout for the viewer.
import CloudPdfViewer from '#openbook/cloudpdf-viewer';
export default function () {
return (
<CloudPdfViewer documentId="346467a6-fa61-43ad-b45a-d1fdc3da0007" width="100%" height="500px" />
);
};
Disclamer: I am working for CloudPDF and it is still a beta version.
I'm developing an app using React and Electron.
I'm storing the images in src/assets/images. When I run the app in development using react-scripts start and electron . everything works fine.
The problem occurs when the react app is built using react-scripts build. When the first view is loaded the path is correctly resolved, for example file:///D:/Projects/app-name/build/static/media/logo.e99ed458.png and the image is displayed.
Now, when the route changes, the image no longer works. In the network tab in devTools the request URL is file:///D:/main/static/media/logo.e99ed458.png which is obviously incorrect.
This is my component code:
import React from "react";
import Logo from '../../assets/images/ad.png';
const Logo = () => {
return (
<React.Fragment>
<img src={Logo} alt="no image" />
</React.Fragment >
);
};
export default Logo;
And in electron.js
mainWindow.loadURL(url.format({
protocol: 'file',
slashes: true,
pathname: require('path').join(__dirname, '../build/index.html')
}));
I've been trying to solve this problem for two days now. Does anyone know a solution?
EDIT:
I have also tried using PUBLIC_URL according to https://create-react-app.dev/docs/using-the-public-folder/
But the result is the same, the path is resolved correctly when the first view is displayed and after that it resolves to file:///D:/assets/images/logo.png.
When I log process.env.PUBLIC_URL it says that PUBLIC_URL is equal to ".".
I solved this issue by changing the routers instead of using BrowserRouter you should use HashRouter
This article https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/ has a good example but Does not have the configurations of routers
I have implemented react-webcam and react-video-recorder to take pictures and video respectively using the device's webcam. I have followed the document and both of them work perfectly on my localhost. The issue is when I deploy them, the browser doesn't support recording the video. I have tested it on Chrome, Firefox and Opera, and none of them support it.
I've followed https://www.npmjs.com/package/react-webcam for taking image and https://www.npmjs.com/package/react-video-recorder for recording video through the device's webcam.
class VideoPost extends Component {
handleRecordingComplete = (videoBlob, startedAt, thumbnailBlob, duration) => {
const urlCreator = window.URL || window.webkitURL;
const videoUrl = urlCreator.createObjectURL(videoBlob);
this.setState({ videoSrc: videoUrl, video: videoBlob });
};
onVideoDisplay = () => (
<video
src={this.state.videoSrc}
controls
style={{
height: '200px',
width: '200px'
}}
/>
);
render(){
return(
<div>
<VideoRecorder
onRecordingComplete={this.handleRecordingComplete}
renderLoadingView={this.onVideoDisplay}
/>
</div>
)
}
}
i expect the video to work
however on the live site,
Am i missing out something?
This might be due to insecure origin. Make sure you have deployed your application on https i.e. you have a valid SSL cert applied
Refer - react-webcam's npm page
Note: Browsers will throw an error if the page is loaded from insecure origin. I.e. Use https.