react-record-webcam - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/index.d.ts

@@ -1,3 +0,4 @@
-export * from './RecordWebcam';
-export * from './useRecordWebcam';
+export * from './component';
+export * from './hook';
 export * from './types';
+export * from './constants';

dist/index.js

@@ -13,5 +13,6 @@ "use strict";
 exports.__esModule = true;
-__exportStar(require("./RecordWebcam"), exports);
-__exportStar(require("./useRecordWebcam"), exports);
+__exportStar(require("./component"), exports);
+__exportStar(require("./hook"), exports);
 __exportStar(require("./types"), exports);
+__exportStar(require("./constants"), exports);
 //# sourceMappingURL=index.js.map

dist/types.d.ts

 /// <reference types="react" />
-declare type RecordingType = 'video' | 'audio';
-declare type RecordingMimeType = 'video/mp4' | 'audio/webm' | 'video/webm;codecs=vp9' | 'video/webm;codecs=vp8' | 'video/webm;codecs=h264';
+declare type AudioCodec = 'aac' | 'opus';
+declare type VideoCodec = 'av1' | 'avc' | 'vp8';
+export declare type FileMimeType = 'video/mp4' | 'video/webm';
+export declare type FileType = 'mp4' | 'webm';
+export declare type RecordingOptions = {
+    mimeType: FileMimeType;
+};
 export declare type RecorderOptions = {
-    type: RecordingType;
-    mimeType: RecordingMimeType;
-    video: {
-        minWidth: number;
-        minHeight: number;
-        maxWidth: number;
-        maxHeight: number;
-        minAspectRatio: number;
+    aspectRatio: number;
+    height: number;
+    type: 'video';
+    width: number;
+    isNewSize?: boolean;
+    mimeType?: string;
+    mute?: boolean;
+    disableLogs?: boolean;
+};
+export declare type RecordWebcamOptions = {
+    codec?: {
+        audio: AudioCodec;
+        video: VideoCodec;
     };
+    filename?: string;
+    recordingLength?: number;
+    fileType?: FileType;
+    width?: number;
+    height?: number;
+    aspectRatio?: number;
 };
 export declare type WebcamRenderProps = {
-    status: string;
-    isWebcamOn: boolean;
     isPreview: boolean;
     isRecording: boolean;
+    isWebcamOn: boolean;
+    status: string;
+    closeCamera(): void;
+    download(): void;
+    getRecording(): Blob | undefined;
     openCamera(): void;
-    closeCamera(): void;
     retake(): void;
     start(): void;
     stop(): void;
-    download(): void;
-    getRecording(): Blob | undefined;
 };
 export declare type RecordWebcamHook = {
+    previewRef: React.RefObject<HTMLVideoElement>;
+    status: string | number;
+    webcamRef: React.RefObject<HTMLVideoElement>;
     close(): void;
     download(): void;
+    getRecording(): void;
     open(): void;
     retake(): void;
-    getRecording(): void;
     start(): void;
     stop(): void;
     stopStream(): void;
-    status: CAMERA_STATUS;
-    previewRef: React.RefObject<HTMLVideoElement>;
-    webcamRef: React.RefObject<HTMLVideoElement>;
 };
 export declare type Recorder = {
+    stream: any;
+    getBlob(): Promise<Blob>;
+    getDataURL(): Promise<string>;
     startRecording(): Promise<void>;
     stopRecording(): Promise<void>;
-    getDataURL(): Promise<string>;
-    getBlob(): Promise<Blob>;
-    stream: any;
 };
-export declare enum CAMERA_STATUS {
-    INIT = "INIT",
-    CLOSED = "CLOSED",
-    OPEN = "OPEN",
-    RECORDING = "RECORDING",
-    PREVIEW = "PREVIEW",
-    ERROR = "ERROR"
-}
-export declare enum BUTTON_LABELS {
-    OPEN = "Open camera",
-    CLOSE = "Close camera",
-    START = "Start recording",
-    STOP = "Stop recording",
-    RETAKE = "Retake recording",
-    DOWNLOAD = "Download recording"
-}
-export declare enum NAMESPACES {
-    CSS = "react-record-webcam"
-}
 export {};

dist/types.js

 "use strict";
 exports.__esModule = true;
-exports.NAMESPACES = exports.BUTTON_LABELS = exports.CAMERA_STATUS = void 0;
-var CAMERA_STATUS;
-(function (CAMERA_STATUS) {
-    CAMERA_STATUS["INIT"] = "INIT";
-    CAMERA_STATUS["CLOSED"] = "CLOSED";
-    CAMERA_STATUS["OPEN"] = "OPEN";
-    CAMERA_STATUS["RECORDING"] = "RECORDING";
-    CAMERA_STATUS["PREVIEW"] = "PREVIEW";
-    CAMERA_STATUS["ERROR"] = "ERROR";
-})(CAMERA_STATUS = exports.CAMERA_STATUS || (exports.CAMERA_STATUS = {}));
-var BUTTON_LABELS;
-(function (BUTTON_LABELS) {
-    BUTTON_LABELS["OPEN"] = "Open camera";
-    BUTTON_LABELS["CLOSE"] = "Close camera";
-    BUTTON_LABELS["START"] = "Start recording";
-    BUTTON_LABELS["STOP"] = "Stop recording";
-    BUTTON_LABELS["RETAKE"] = "Retake recording";
-    BUTTON_LABELS["DOWNLOAD"] = "Download recording";
-})(BUTTON_LABELS = exports.BUTTON_LABELS || (exports.BUTTON_LABELS = {}));
-var NAMESPACES;
-(function (NAMESPACES) {
-    NAMESPACES["CSS"] = "react-record-webcam";
-})(NAMESPACES = exports.NAMESPACES || (exports.NAMESPACES = {}));
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "react-record-webcam",
-  "description": "A React webcam hook and component 🎬📹",
-  "version": "0.0.11",
+  "description": "A React webcam recording hook and component 🎬📹",
+  "version": "0.0.12",
   "main": "dist/index.js",
@@ -13,3 +13,3 @@ "files": [
   "dependencies": {
-    "recordrtc": "^5.6.1"
+    "recordrtc": "5.6.2"
   },
@@ -25,8 +25,10 @@ "peerDependencies": {
   "keywords": [
+    "react",
     "webcam",
+    "record",
     "recording",
+    "component",
     "hook",
-    "audio",
     "video"
   ]
 }

README.md

@@ -1,8 +0,10 @@
-<div align="center">
+<div align="center" style="width: 100%; background-color: white;">
   <img style="width: 90%;"src="https://s3.eu-central-1.amazonaws.com/samuel.weckstrom.xyz/github/react-record-webcam-logo.jpg">
 </div>
 
+<br>
+
 [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
 
-Webcam video and audio recording hook and component for React. Use hook for newer React versions, component uses classes so all React versions are supported. Works in all latest browser versions, although Safari requires MediaRecorder to be enabled in the experimental features.
+Webcam recording hook and component for React. Works in all latest browser versions, although Safari requires MediaRecorder to be enabled in the experimental features.
 
@@ -13,10 +15,14 @@ [Demo](https://codesandbox.io/s/react-record-webcam-demo-zog8c)
 
-## Install dependency
+## Add package
 ```
+npm i react-record-webcam
+```
+<i>Or</i>
+```
 yarn add react-record-webcam
 ```
-<br>
 
-## Hook
 
+## Use hook
+
 ```
@@ -64,12 +70,12 @@ import { useRecordWebcam } from 'react-record-webcam'
 
-| Option  ||
+| Options  ||
 | ------------- | ------------- |
-|`downloadFileName?: string`      |Set a namespace for the component CSS classes|
-|`recordingLength?: number`       |Length of recording in seconds|
-|`recordingLength: number`        |Set max recording length in seconds  |
-|`namespace: string`              |Pass own CSS namespace|
-|`options: RecorderOptions`       |Options for recording video|
-|                                 |`type: video |audio`|
-|                                 |`mimeType: video/mp4 | audio/webm | video/webm;codecs=vp9 | video/webm;codecs=vp8 | video/webm;codecs=h264`
-|                                 |`video: { minWidth, minHeight, maxWidth, maxHeight, minAspectRatio }`
+|`filename: string`              |Filename for download|
+|`recordingLength: number`       |Length of recording in seconds|
+|`fileType: 'mp4'` \| `'webm'`|File container for download. Will also set mimeType. |
+|`aspectRatio: number`|Video aspect ratio, default is 1.77|
+|`codec: object`|`{ audio: 'aac' \| 'opus', video: 'av1' \| 'avc' \| 'vp8' }`|
+|`width: number`| Video width|
+|`height: number`| Video height|
+|`disableLogs: boolean`|Disable status logs from console|
 
@@ -80,3 +86,3 @@
 
-## Component
+## Use component
 
@@ -120,42 +126,48 @@ ```
 
-<br>
 
-You can use the below default class names or pass your own namespace to replace the default `react-record-webcam`. 
 
-| className |
-| ------------- |
-|`react-record-webcam__wrapper`
-|`react-record-webcam__status`
-|`react-record-webcam__video`
-|`react-record-webcam__controls`
-|`react-record-webcam__controls-button`
 
-
 <br>
 
-|Prop||
+|Props||
 | ------------- | ------------- |
 |`cssNamespace: string`    |Set a namespace for the component CSS classes|
 |`downloadFileName: string` |Filename for video download |
-|`getStatus` |Callback to get webcam status  |
+|`getStatus: () => string` |Callback to get webcam status  |
 |`recordingLength: number`  |Set max recording length in seconds  |
 |`namespace: string`| Pass own CSS namespace|
 |`options: object` |Options for recording video|
-||`type: video | audio`|
-||`mimeType: video/mp4 | audio/webm | video/webm;codecs=vp9 | video/webm;codecs=vp8 | video/webm;codecs=h264`
-||`video: { minWidth, minHeight, maxWidth, maxHeight, minAspectRatio }`
+||`fileType: 'mp4' \| 'webm'`|
+||`width: number`|
+||`height: number`|
+||`aspectRatio: number`|
+||`codec: { audio: 'aac' \| 'opus', video: 'av1' \| 'avc' \| 'vp8' }`|
+||`disableLogs: boolean`|
 |`controlLabels: object`|Pass custom labels to control buttons|
-|| `{ CLOSE, DOWNLOAD, OPEN, RETAKE, START, STOP }`
+||`CLOSE: string \| number`|
+||`DOWNLOAD: string \| number`|
+||`OPEN: string \| number`|
+||`RETAKE: string \| number`|
+||`START: string \| number`|
+||`STOP: string \| number`|
 |`render`  |Render prop that passes status and controls|
-|| `isWebcamOn`|
-|| `isRecording`|
-|| `isPreview`|
-|| `openCamera`|
-|| `closeCamera`|
-|| `start`|
-|| `stop`|
-|| `retake`|
-|| `download`|
-|| `getRecording`|
-|| `status`|
+|| `openCamera: () => void`|
+|| `closeCamera: () => void`|
+|| `start: () => void`|
+|| `stop: () => void`|
+|| `retake: () => void`|
+|| `download: () => void`|
+|| `getRecording: () => void`|
+|| `status: string`|
 
+<br>
+
+You can use the below default class names or pass your own namespace to replace the default `react-record-webcam`. 
+
+| className |
+| ------------- |
+|`react-record-webcam__wrapper`
+|`react-record-webcam__status`
+|`react-record-webcam__video`
+|`react-record-webcam__controls`
+|`react-record-webcam__controls-button`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71766

increased by7.13%

Number of package files

29

increased by11.54%

Lines of code

1021

increased by4.72%

Number of lines in readme file

169

increased by6.96%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedrecordrtc@5.6.2