Add onNotAllowedOrFound for component and hook

README.md

@@ -45,6 +45,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 | :------------ |:--------------- |:--------------- | :--------------- |
 | **`onRecordingComplete`**  | A method that gets called when "Save recording" option is pressed | N/A | Yes |
 | **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track | N/A | Yes
+| **`onNotAllowedOrFound`** | This gets called when the `getUserMedia` promise is rejected. It takes the resultant `DOMException` as its parameter | N/A | Yes
 | **`downloadOnSavePress`**  | A `boolean` value that determines if the recording should be downloaded when "Save recording" option is pressed | `false` | Yes |
 | **`downloadFileExtension`**  | The file extension to be used for the downloaded file. Allowed values are `mp3`, `wav` and `webm` | `mp3` | Yes |
 | **`classes`** | This allows class names to be passed to modify the styles for the entire component or specific portions of it | N/A | Yes |
@@ -53,9 +54,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 
 If you prefer to build up your own UI but take advantage of the implementation provided by this package, you can use this hook instead of the component
 
-| Params   | Description |
-| :------------ |:---------------|
-| **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track |
+| Params   | Description | Optional |
+| :------------ |:---------------|:---------------|
+| **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track | Yes |
+| **`onNotAllowedOrFound`** | This gets called when the `getUserMedia` promise is rejected. It takes the resultant `DOMException` as its parameter | Yes |
 
 The hook returns the following:
 
@@ -123,3 +125,5 @@ const ExampleComponent = () => {
   )
 }
 ```
+
+**NOTE: When using both `AudioRecorder` and `useAudioRecorder` in combination, the `audioTrackConstraints` and `onNotAllowedOrFound` should be provided in the `useAudioRecorder` hook**

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-audio-voice-recorder",
   "private": false,
-  "version": "1.1.4",
+  "version": "1.1.6",
   "license": "MIT",
   "author": "",
   "repository": {

src/components/AudioRecordingComponent.tsx

@@ -17,12 +17,14 @@ import "../styles/audio-recorder.css";
  * @prop `recorderControls` Externally initilize hook and pass the returned object to this param, this gives your control over the component from outside the component.
  * https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
  * @prop `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
+ * @prop `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
  * @prop `downloadOnSavePress` If set to `true` the file gets downloaded when save recording is pressed. Defaults to `false`
  * @prop `downloadFileExtension` File extension for the audio filed that gets downloaded. Defaults to `mp3`. Allowed values are `mp3`, `wav` and `webm`
  * @prop `classes` Is an object with attributes representing classes for different parts of the component
  */
 const AudioRecorder: (props: Props) => ReactElement = ({
   onRecordingComplete,
+  onNotAllowedOrFound,
   recorderControls,
   audioTrackConstraints,
   downloadOnSavePress = false,
@@ -37,8 +39,10 @@ const AudioRecorder: (props: Props) => ReactElement = ({
     isRecording,
     isPaused,
     recordingTime,
+  } =
+    recorderControls ??
     // eslint-disable-next-line react-hooks/rules-of-hooks
-  } = recorderControls ?? useAudioRecorder(audioTrackConstraints);
+    useAudioRecorder(audioTrackConstraints, onNotAllowedOrFound);
 
   const [shouldSave, setShouldSave] = useState(false);
 
@@ -71,10 +75,9 @@ const AudioRecorder: (props: Props) => ReactElement = ({
       onRecordingComplete != null
     ) {
       onRecordingComplete(recordingBlob);
-    }
-
-    if (downloadOnSavePress && recordingBlob != null) {
-      downloadBlob(recordingBlob);
+      if (downloadOnSavePress) {
+        downloadBlob(recordingBlob);
+      }
     }
   }, [recordingBlob]);
 

src/components/interfaces.ts

@@ -36,6 +36,11 @@ export interface Props {
    * In case the recording is cancelled, the blob is discarded.
    **/
   onRecordingComplete?: (blob: Blob) => void;
+  /**
+   * This gets called when the getUserMedia Promise is rejected.
+   * It takes the resultant DOMException as its parameter.
+   **/
+  onNotAllowedOrFound?: (exception: DOMException) => any;
   /**
    * Allows calling of hook outside this component. The controls returned by the hook can then be passed to the component using this prop.
    * This allows for use of hook methods and state outside this component

src/hooks/useAudioRecorder.ts

@@ -27,6 +27,7 @@ export type MediaAudioTrackConstraints = Pick<
  * @returns Controls for the recording. Details of returned controls are given below
  *
  * @param `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
+ * @param `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
  *
  * @details `startRecording`: Calling this method would result in the recording to start. Sets `isRecording` to true
  * @details `stopRecording`: This results in a recording in progress being stopped and the resulting audio being present in `recordingBlob`. Sets `isRecording` to false
@@ -38,8 +39,9 @@ export type MediaAudioTrackConstraints = Pick<
  * @details `mediaRecorder`: The current mediaRecorder in use
  */
 const useAudioRecorder: (
-  audioTrackConstraints?: MediaAudioTrackConstraints
-) => recorderControls = (audioTrackConstraints) => {
+  audioTrackConstraints?: MediaAudioTrackConstraints,
+  onNotAllowedOrFound?: (exception: DOMException) => any
+) => recorderControls = (audioTrackConstraints, onNotAllowedOrFound) => {
   const [isRecording, setIsRecording] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [recordingTime, setRecordingTime] = useState(0);
@@ -80,7 +82,10 @@ const useAudioRecorder: (
           setMediaRecorder(undefined);
         });
       })
-      .catch((err) => console.log(err));
+      .catch((err: DOMException) => {
+        console.log(err.name, err.message, err.cause);
+        onNotAllowedOrFound?.(err);
+      });
   }, [timerInterval]);
 
   /**

src/main.tsx

@@ -18,6 +18,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         noiseSuppression: true,
         echoCancellation: true,
       }} 
+      onNotAllowedOrFound={(err) => console.table(err)}
     />
   </React.StrictMode>
 );