I tried to stream my webcam video using react. The browser got rendering of the video tag with specified height and weight. Yet My webcam video is not playing? What mistake have I done? I m new to react.
import React from 'react'
import reactDom from 'react-dom'
import {useState, useEffect,useRef} from 'react'
function MyVideo() {
let Video=document.getElementsByClassName('video')
useEffect(()=>{
navigator.mediaDevices.getUserMedia({
audio:true,
video:true
}).then (stream=>{
Video.srcObject=stream;
})
},[])
return (
<div>
<video width='750' height='500'autoplay controls className='video'>
</video>
</div>
)
}
export default MyVideo
You have to query video node inside useEffect. Here is the complete example.
Related
How to play live camera view in ReactJS using RTSP. I have RTSP URL to play IP camera's video live how can we play
import React from "react";
import RTSPPlayer from "react-rtsp-player";
const CameraView =()=>{
return (
<RTSPPlayer
url="rtsp://<camera-ip-address>:<port>/<stream>"
controls={true}
/>
);
}
export default CameraView;
I am trying to display a background video on my web app after fetching it from firebase storage. The code looks something like this:
import React, { useState, useEffect } from "react";
import { storage } from "../firebase";
const videoRef = storage.ref().child('<filename>');
export default function Dashboard() {
const [videoURL, setVideoUrl] = useState('');
useEffect(() => {
videoRef.getDownloadURL().then((url) => {
setVideoUrl(url);
});
}, []);
return (
<div>
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
</div>
);
}
The resulting page is blank, but inspecting the element via dev tools shows the video element with the correct url. In fact, if I just copy the url and hard code it as src it works just fine.
I assume there is some issue related to React not refreshing after updating the url but I haven't found a solution so far.
You need to render <video> tag when the videoURL is available.
return (
<div>
{!!videoURL && (
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
)}
</div>
);
You should try to use a component to do that.
i found react-player very easy to use.
https://www.npmjs.com/package/react-player
example of usage:
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Try adding the videoRef inside the dependency array on the useEffect.
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
I am trying to use react-avatar-editor (https://www.npmjs.com/package/react-avatar-editor ) I have installed and import the component but I didn't get the button upload
Here is my simple component wher I used the Avatar Editor
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Nav from "./Nav";
import AvatarEditor from 'react-avatar-editor'
export default class EditProfile extends Component {
render () {
return (
<div>
<Nav logoUrl="logo_white.svg" color="#D41F36"/>
hello there
<AvatarEditor
image="/imgs/A066.jpg"
width={250}
height={250}
border={50}
color={[255, 255, 255, 0.6]} // RGBA
scale={1.5}
rotate={0}
/>
</div>
)
}
}
I should have this screen
but I had this
please help out on this ?
react-avatar-editor doesn't handle the image selection. It deals specifically with the image crop, resizing and rotation of a given image. So you need to code something to get the image and pass to react-avatar-editor component.
You can check how to do it here https://github.com/mosch/react-avatar-editor/blob/master/docs/App.jsx