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();
Related
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.
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
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 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]}/>
I'm using koa-static to serve static file with root url localhost:3000/, and koa-router to serve RESTful api, like localhost:3000/api/account/login
Make a fakeBuild folder contain only one file index.html. All work fine. root url and api url show correct content.
// serve static file
const serve = require('koa-static')
const staticPath = path.join(__dirname,'..','Client','poker','fakeBuild')
log(staticPath)
app.use(serve(staticPath))
// router
const router = require('./router/Index.js')(app)
Then I try to connect Koa with React
I use yarn build to build React static files, React project is created by create-react-app, not modified.
Then I change the koa-static's target to build folder, just one line changed
const staticPath = path.join(__dirname,'..','Client','poker','build')
Then access localhost:3000/, chrome show React start page, works
Then access localhost:3000/api/account/login, chrome show React start page, what??
Use postman check localhost:3000/api/account/login, it response what I put in router, fine.
So I can use apis, just ignore chrome's result?
It must be React and Chrome doing something extra. I try to remove service-worker.js in React build folder, api url render correctly in chrome.
So anyone can give some documents or explain to help me understand what react done, to keep all the url render it.
And why my api localhost:3000/api/account/login not require service-worker.js (just return some text in response body), also got the js worked. Just because koa-static served the file?
====
Update: my router code, And project available on here
router/Index.js
const Router = require('koa-router');
const R = (app)=>{
const router = new Router();
const api = require('./Api.js');
router.use('/api', api.routes(), api.allowedMethods())
app.use(router.routes())
.use(router.allowedMethods());
};
module.exports = R;
router/Api.js
const Router = require('koa-router')
const log = require('../helper/Utils').log;
module.exports = (function () {
const Api = new Router();
Api.get('/account/login', async (ctx, next)=>{
log("hello");
ctx.status = 200;
ctx.body = `login`
});
Api.get('/account/register', async (ctx, next)=>{
ctx.status = 200;
ctx.body = `register`
});
return Api;
})();