useScreenRecording-yl
Hook for recording an specific element on screen
Content
Features ✨
- Easy to use.
- Continuously Maintained.
Install 🐙
You can install useRecording-yl by entering this command
npm i use-recording-yl
Usage 💡
This package is for recording element on screen and it will generate blob video and url video of recording.
Exemples 🖍
const refContainer: any = useRef();
const {
urlVideoState,
blobVideoState,
ScreenRecording,
handleStartRecording,
handleStopRecording,
} = useScreenRecording();
...
const handleClickStart = () => {
setVisible(false);
handleStartRecording(
refContainer.current.getBoundingClientRect().x,
refContainer.current.getBoundingClientRect().y,
refContainer.current.getBoundingClientRect().width,
refContainer.current.getBoundingClientRect().height,
0, //By Default is 0
0, //By Default is 0
500,//By Default is 1500
500 //By Default is 500
);
};
const handleClickStop = () => {
handleStopRecording();
};
...
return (
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<ScreenRecording />
<h2>Image for testing</h2>
<img
ref={refContainer}
src="https://www.chess.com/bundles/web/images/offline-play/standardboard.6a504885.png"
alt=""
width="500"
height="500"
/>
<button onClick={handleClickStart}>Start Recording</button>
<button onClick={handleClickStop}>Stop Recording</button>
<button onClick={handleClickShow}>Show Video</button>
...
</div>
);
Contributing 🍰
Please make sure to read the Contributing Guide before making a pull request.
Thank you to all the people who already contributed to this project!
Maintainers 👷
 Yei Linux 💻 |
License ⚖️
Enter what kind of license you're using.