What's the way play local videos? This option doesn't work:
const url = '/localVideo.mp4';
<ReactPlayer url={url} width="100%"
height="100%"
controls={true} />
I get the error that src attribute is empty:
MediaError {code: 4, message: 'MEDIA_ELEMENT_ERROR: Empty src
attribute'}
The url is a correct sting, works fine with native <video element.
I checked the sources for the library, and it seems like the MediaStream is required:
if (isMediaStream(url)) {
try {
this.player.srcObject = url
} catch (e) {
this.player.src = window.URL.createObjectURL(url)
}
MDN says it's no longer required. It should work with a string.:
In older versions of the Media Source specification, attaching a
stream to a element required creating an object URL for the
MediaStream. This is no longer necessary, and browsers are removing
support for doing this.
Related
JavaScript and I am loading random images from https://picsum.photos but it is not working. Note that for now, I do not want to use the new image optimization in next.js.
Local images are working but external images are not working.
Below is my code and my next.config.js
<Slider
{...settingsThumbs}
asNavFor={nav1}
ref={slider => setSlider2(slider)}
>
{slidesData.map(slide => (
<div className='slick-slide' key={slide.id}>
<img
className='slick-slide-image'
src={`https://picsum.photos/800/400?img=${slide.id}`}
alt='sfd'
/>
</div>
))}
</Slider>
below is my next.js config
module.exports = {
images: {
domains: ['https://picsum.photos/']
}
};
Per the docs, the domain does not appear to need a protocol (https or http) in front of it. Try
module.exports = {
images: {
domains: ['picsum.photos']
}
};
I also suspect you have an error like the following in your console, going off this source code:
domains value must follow format { domain: 'picsum.photos', ... }.
See more info here: https://err.sh/next.js/invalid-i18n-config`
Note: Modifications to the next.config.js file may sometimes require to to restart the dev server before they take effect.
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've been struggling quite a bit with React filepond lately so I just need some help. So, I'm able to upload photos to the server with react filepond with rails backend and amazon s3 storage. Everything works, no issue. Now I'm trying to set an initial image but I'm having issues getting the preview to work.
So, here I'm setting the initial image from a publicly accessible placeholder image:
class UserForm extends Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {
files: [{
source: "https://picsum.photos/200/300",
options: {
file: {
size: 200
}
}
}],
code omitted for brevity
and here's my FilePond component:
<FilePond
ref={ref => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
maxFiles={3}
oninit={() => this.handleInit()}
onupdatefiles={ this.fileChange }
allowImageCrop={true}
imageCropAspectRatio={'1:1'}
allowImageResize={true}
imageResizeTargetWidth={100}
imageResizeTargetHeight={100}
imageResizeUpscale={false}
imageResizeMode={'contain'}
allowImageTransform={true}
onpreparefile={ this.prepareFile }
So, its supposed to load the placeholder image in the preview but this is what I see instead:
Any configurations Im missing to get the preview to show up?
Thanks!
Edit 1
Added code sandbox link. Note that if I remove the options, specifically the file size, it will throw a warning saying that its waiting for the size
https://codesandbox.io/s/react-filepond-live-demo-8s7oc?file=/src/index.js
And here's the docs for setting up initial files in filepond: https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting-initial-files
I figured it out!
Here's a working code sandbox link:
https://codesandbox.io/s/react-filepond-live-demo-2sdn0?file=/src/index.js
you need to set the server config like this:
<FilePond
files={files}
allowMultiple={false}
server={{
load: (source, load, error, progress, abort, headers) => {
var myRequest = new Request(source);
fetch(myRequest).then(function(response) {
response.blob().then(function(myBlob) {
load(myBlob);
});
});
}
}}
labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
/>
Credit goes to this asnwer from this link:
https://github.com/pqina/filepond/issues/192
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.
I have a data file api that has bunch of images url stored locally
const url =[
{ title:img1,
img_src="./img/img1.png"
},
{ title:img2,
img_src="./img/img2.png"
},
{ title:img3,
img_src="./img/img3.png"
}
]
And using react/redux I pass the url state as props to my react components.Next I want to display them in my components by using require
<img src=require(?)/>
What's the appropriate syntax here? I've used es6 template string ${this.props.urls.img_src} but it throws an error that it couldn't resolve the path. I've tried to require("./img/img1.png") just to test to rule out broken path and it worked. But still wouldnt work if you reference it using a prop.
Solution
After researching, and thanks to Rei Dien for the input, I now can use variables in require by using context require
<img src={require("./img/"+this.props.img_src)}/>
Since you passed the url in the props, you can do this :
this.props.url.map(n => {
return (
<img src={n.img_src}/>
)
})
this will diplay all the images.
since require works in static mode during build process on node only so follow following steps.
1) take all image urls and store them in a javascript file
so
//imageURLs.js
import image1 from "path_to_image_file_1";
import image2 from "path_to_image_file_2";
import image3 from "path_to_image_file_3";/**do like this for all images stored locally, image1, image2,.. are the image identifiers(title in your case) you would get in api call**/
export const urls = {image1, image2, image3};
//image usage file
read api for identifier and
import imageURLs from './imageURLs.js';
<img src={imageURLs[image_id_from_api]}/>