@bigbinary/neeto-media-recorder 1.0.3 → 1.0.4

package/README.md

@@ -1 +1,263 @@
-# neeto-media-recorder
+# @bigbinary/neeto-media-recorder
+
+![npm](https://img.shields.io/npm/v/@bigbinary/neeto-media-recorder?color=greenyellow)
+![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-media-recorder?color=greenyellow)
+
+## Installation
+
+```bash
+yarn add @bigbinary/neeto-media-recorder
+```
+
+## Usage
+
+This package exports four different sets of functions and components.
+
+1. [Components](#components)
+2. [Utilities](#utilities)
+3. [Constants](#constants)
+4. [Core](#core)
+
+
+### Components
+  - #### MediaRecorder
+
+    The `MediaRecorder` react component capture's device screen and upload it to the AWS S3 storage. It contains  UI controls to start, pause/resume, discard and restart a recording.
+
+    You can import the components from `@bigbinary/neeto-media-recorder`.
+    ```js
+    import { MediaRecorder } from "@bigbinary/neeto-media-recorder"
+    ```
+
+    `MediaRecorder` accepts two props:
+
+    - `onUploadComplete`: This callback will get triggered once the uploading of the screen recording is completed.
+    - `onDiscard`: This callback will get triggered whenever the user discard's the screen recording.
+
+### Utilities
+
+  You can import utilities from `@bigbinary/neeto-media-recorder/utils`.
+
+  ```js
+  import { generatePublicUrl } from "@bigbinary/neeto-media-recorder/utils"
+  ```
+
+  - #### `generatePublicUrl(recordingId)`
+    Can be used to generate the public URL for a screen recording by providing the `recordingId` as an argument.
+
+### Constants
+
+  You can import constants from `@bigbinary/neeto-media-recorder/constants`.
+  ```js
+  import { UPLOAD_EVENT, UPLOAD_STATUS,... } from "@bigbinary/neeto-media-recorder/constants"
+  ```
+
+  The available constants are:
+  ```js
+  const UPLOAD_EVENT = { onComplete: "onComplete" };
+
+  const UPLOAD_STATUS = {
+    uploading: "uploading",
+    completed: "completed",
+    aborting: "aborting",
+  };
+
+  const SCREEN_RECORDER_STATUS = {
+    media_aborted: "media_aborted",
+    permission_denied: "permission_denied",
+    no_specified_media_found: "no_specified_media_found",
+    media_in_use: "media_in_use",
+    invalid_media_constraints: "invalid_media_constraints",
+    no_chrome_flags_set: "no_chrome_flags_set",
+    recorder_error: "recorder_error",
+    idle: "idle",
+    acquiring_media: "acquiring_media",
+    media_acquired: "media_acquired",
+    restarting: "restarting",
+    recording: "recording",
+    stopping: "stopping",
+    stopped: "stopped",
+    paused: "paused",
+  };
+
+  const SCREEN_RECORDER_ERROR = {
+    AbortError: "media_aborted",
+    NotAllowedError: "permission_denied",
+    NotFoundError: "no_specified_media_found",
+    NotReadableError: "media_in_use",
+    OverconstrainedError: "invalid_media_constraints",
+    TypeError: "no_chrome_flags_set",
+    None: "",
+    NoRecorder: "recorder_error",
+    UnSupportedBrowser: "unsupported_browser",
+  };
+
+  const SCREEN_RECORDER_EVENT = {
+    onStart: "onStart",
+    onStop: "onStop",
+    onDiscard: "onDiscard",
+    onDataAvailable: "onDataAvailable",
+    onDiscardDuringCountdown: "onDiscardDuringCountdown",
+    onRestart: "onRestart",
+  };
+  ```
+
+### Core
+
+The `@bigbinary/neeto-media-recorder/core` contains two singleton class's `screenRecorder` and `multipartS3Uploader`.
+
+  ```js
+  import { screenRecorder, multipartS3Uploader } from "@bigbinary/neeto-media-recorder/core"
+  ```
+
+- #### screenRecorder
+  It handles the screen and audio capturing process. The various methods provided by `screenRecorder` are:
+
+  - `startRecording()`
+
+    Used to start screen recording.
+
+  - `stopRecording()`
+
+    Used to stop the current screen recording.
+
+  - `pauseRecording()`
+
+    Used to pause the current screen recording.
+
+  - `resumeRecording()`
+
+    Used to resume the screen recording.
+
+  - `discardRecording()`
+
+    Used to discard the current screen recording.
+
+  - `restartRecording()`
+
+    Used to discard the current screen recording and start a new one.
+
+  - `addCallback(event, callback)`
+
+    Used to add callback function for a specific screen recording event. The constant `SCREEN_RECORDER_EVENT` contains all the possible screen recording events.
+
+    ```js
+    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, handleStartRecording)
+    ```
+
+  - `removeCallback(event, callback)`
+
+    Used to remove an already added callback by providing the event and callback to be removed.
+
+    ```js
+    screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onStart, handleStartRecording)
+    ```
+
+  - `removeAllCallbacksByEvent(event)`
+
+    Used to remove all callbacks associated with a particular event.
+
+    ```js
+    screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onStart)
+    ```
+
+  - `resetState()`
+
+    Used to reset the internal states of the screenRecorder to initial state.
+
+  - `revokePermissions()`
+
+    Used to revoke the browser permission to access the MediaRecorder api.
+
+  - `useRecorderStore()`
+
+    A zustand store which can be used know the screenRecorder status and error if any occurred inside a react component
+
+- #### multipartS3Uploader
+  It handles the upload of recorded screen data to AWS S3 storage. `multipartS3Uploader` provides the ability to upload the recording to S3 in multiple chunks. The methods provided `multipartS3Uploader` are:
+
+    - `initialize(recordingId, uploadId)`
+
+      Used to initialize the `multipartS3Uploader` by providing the `recordingId` and `uploadId`. `recordingId` and `uploadId` can be obtained by creating a new recording in `neeto-record-web`.
+
+    - `push(data)`
+
+      Used to upload the recorded chunk to S3.
+
+    - `completeUpload()`
+
+       Once the recording is completed this method should be called to mark the recording as completed.
+
+    - `abortUpload()`
+
+      Used to discard the partially uploaded recording.
+
+    - `resetState()`
+
+      Used to reset the internal state of multipartS3Uploader to initial state.
+
+    - `addCallback(event, callback)`
+
+      Used to add callback function to a specific upload event. The constant `UPLOAD_EVENT` contains all the possible upload events.
+
+    - `removeCallback(event, callback)`
+
+      Used to remove an already added callback by providing the event and callback to be removed.
+
+    - `useMultipartS3UploadStore()`
+
+      A zustand store which can be used know the screenRecorder status inside a react component.
+
+## Development
+
+Install all the dependencies by executing the following command
+
+```bash
+yarn install
+```
+
+### Using host application
+
+1. Clone this repository.
+2. Run `yarn install` to download the dependencies and setup the development
+   environment.
+3. Have a host application ready.
+4. Run `yarn watch` to automatically transpile code as you save the
+   file. You can run `yarn build` if you want to run the build only once.
+5. In a different terminal, run `yalc publish` to publish the
+   neeto-media-recorder to the local yalc store.
+6. Run `yalc add @bigbinary/neeto-media-recorder` to install the
+   neeto-media-recorder to the host application.
+7. After making necessary changes to `neeto-media-recorder`, run
+   `yarn release` to push the changes to the host application (assuming that you
+   are in watch mode and the changes are bundled automatically). Restart
+   webpack-dev-server in host if changes are not applied.
+8. Video explanation on how to use yalc: https://www.youtube.com/watch?v=QBiYGP0Rhe0
+
+# Building and releasing.
+
+The `@bigbinary/neeto-neeto-media-recorder` package gets published to NPM when we merge a
+PR with `patch`, `minor` or `major` label to the `main` branch. The `patch`
+label is used for bug fixes, `minor` label is used for new features and `major`
+label is used for breaking changes. You can checkout the
+`Create and publish releases` workflow in GitHub Actions to get a live update.
+
+In case if you missed to add the label, you can manually publish the package.
+For that first you need to create a PR to update the version number in the
+`package.json` file and merge it to the `main` branch. After merging the PR, you
+need to create a
+[new github release](https://github.com/bigbinary/neeto-media-recorder/releases/new)
+from main branch. Whenever a new release is created with a new version number,
+the github actions will automatically publish the built package to npm. You can
+checkout the `Publish to npm` workflow in GitHub Actions to get a live update.
+
+Please note that before publishing the package, you need to verify the
+functionality in some of the neeto web-apps locally using `yalc` package
+manager.
+
+# Project integrations
+
+|          Projects             |  neeto-media-recorder  |
+|:-----------------------------:|:----------------------:|
+|        neeto-record-web       |   :white_check_mark:   |
+| neeto-record-chrome-extension |   :white_check_mark:   |

package/core.js

@@ -3713,22 +3713,6 @@ var ScreenRecorder = /*#__PURE__*/function () {
       writable: true,
       value: void 0
     });
-    _defineProperty$1(this, "getPreviewStream", function () {
-      return new MediaStream(_classPrivateFieldGet(_this, _mediaStream).getVideoTracks());
-    });
-    _defineProperty$1(this, "getMediaBlobUrl", function () {
-      var blob = new Blob(_classPrivateFieldGet(_this, _mediaChunks), {
-        type: 'video/webm;codecs="vp9"'
-      });
-
-      // TODO: Revoke the object url
-      return URL.createObjectURL(blob);
-    });
-    _defineProperty$1(this, "getWebmMediaBlob", function () {
-      return new Blob(_classPrivateFieldGet(_this, _mediaChunks), {
-        type: 'video/webm;codecs="vp9"'
-      });
-    });
     _defineProperty$1(this, "addCallback", function (event, callback) {
       var _classPrivateFieldGet2;
       var existingCallbacks = (_classPrivateFieldGet2 = _classPrivateFieldGet(_this, _callbacks)[event]) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : [];