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;
Related
I'm writing an educational website using react.js
As a part of my website, I need to play a video. In this regard I use the ReactPlayer package. The codes are as follows:
import React from 'react'
import ReactPlayer from 'react-player'
function VideoPlayer({ url }) {
console.log(url)
return (
<div>
<ReactPlayer url={url} controls={true} width={'100%'} style={{ maxWidth: '1000px' }} />
</div>
)
}
export default VideoPlayer
The player buffers the video (referenced by URL), but the video is not seekable. It seems that the player buffers the file, but I'm not able to forward the video (my video files are all Mp4). Am I doing anything wrong? please help me to solve the problem.
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.
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
I am developing a responsive web app using React and try to use iframe to display PDF.
However, I found that only one page can display in iframe under IOS Safari.
I have read this stackoverflow but this is not work in PDF.
IFrame height issues on iOS (mobile safari)
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
base64Pdf:"XXXXXX"
}
render() {
return (
<div>
<iframe
src = {this.state.base64Pdf}
/>
</div>
);
}
}
export default App;
I would like to ask the solution to display all PDF pages in iframe under IOS Safari.
May I have any advise?