Content

• Features
• Install
• Usage
• Exemples
• Documentation
• API
• Contributing
• Maintainers

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 👷

License ⚖️

Enter what kind of license you're using.