use-video-recording
v1.0.2
Published
Use Video Recording
Downloads
6
Readme
use-video-recording
Use Video Recording
Installation
To install the package, use npm:
pnpm add use-video-recording
yarn install use-video-recording
npm install use-video-recording
Usage
import React, { useRef, useState } from 'react';
import { useVideoRecording } from 'use-video-recording';
const VideoRecorder: React.FC = () => {
const {
startRecording,
pauseRecording,
resumeRecording,
stopRecording,
completeRecording,
isRecording,
isPaused,
videoStream
} = useVideoRecording();
const [videoSrc, setVideoSrc] = useState<string | null>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const handleComplete = async () => {
const videoUrl = await completeRecording();
setVideoSrc(videoUrl);
};
return (
<div>
<h2>Video Recorder</h2>
<video ref={videoRef} autoPlay playsInline muted style={{ width: '400px', height: '300px' }}>
{videoStream && <source src={URL.createObjectURL(videoStream)} />}
</video>
<div>
<button onClick={startRecording} disabled={isRecording}>
Start Recording
</button>
<button onClick={pauseRecording} disabled={!isRecording || isPaused}>
Pause
</button>
<button onClick={resumeRecording} disabled={!isRecording || !isPaused}>
Resume
</button>
<button onClick={stopRecording} disabled={!isRecording}>
Stop
</button>
<button onClick={handleComplete}>
Complete
</button>
</div>
{videoSrc && (
<div>
<h3>Recorded Video:</h3>
<video controls src={videoSrc} style={{ width: '400px', height: '300px' }}></video>
</div>
)}
</div>
);
};
export default VideoRecorder;
tsup
Bundle your TypeScript library with no config, powered by esbuild.
https://tsup.egoist.dev/
How to use this
- install dependencies
# pnpm
$ pnpm install
# yarn
$ yarn install
# npm
$ npm install
- Add your code to
src
- Add export statement to
src/index.ts
- Test build command to build
src
. Once the command works properly, you will seedist
folder.
# pnpm
$ pnpm run build
# yarn
$ yarn run build
# npm
$ npm run build
- Publish your package
$ npm publish
test package
https://www.npmjs.com/package/use-video-recording