Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added audio recorder - onStop doesn't pick up #20

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added audio recorder - onStop doesn't pick up #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eace2e6
added audio recorder - onStop doesn't pick up
urosran Jul 17, 2020
4da9579
added event listeners
urosran Jul 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,8 @@
"jsmin": "^1.0.1",
"typescript": "^3.7.2"
},
"types": "./lib/index.d.ts"
"types": "./lib/index.d.ts",
"dependencies": {
"audio-recorder-polyfill": "^0.3.6"
}
}
20 changes: 19 additions & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
import AudioRecorder from 'audio-recorder-polyfill'

type ReactMediaRecorderRenderProps = {
error: string;
Expand Down Expand Up @@ -60,7 +61,8 @@ export const ReactMediaRecorder = ({
screen = false,
mediaRecorderOptions = null,
}: ReactMediaRecorderProps) => {
const mediaRecorder = useRef<MediaRecorder | null>(null);
window.MediaRecorder = AudioRecorder
Copy link

@no-1ne no-1ne Nov 5, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be overwrite only if mediarecorder doesn’t exist

( As suggested in the audio recorder polyfill readme)

if (!window.MediaRecorder) {
document.write(
decodeURI('%3Cscript defer src="/polyfill.js">%3C/script>')
}

const mediaRecorder = useRef<AudioRecorder | null>(null);
const mediaChunks = useRef<Blob[]>([]);
const mediaStream = useRef<MediaStream | null>(null);
const [status, setStatus] = useState<StatusMessages>("idle");
Expand Down Expand Up @@ -104,7 +106,9 @@ export const ReactMediaRecorder = ({
}, [audio, video, screen]);

useEffect(() => {
console.log("test test")
if (!window.MediaRecorder) {
alert("Unsupported Browser")
throw new Error("Unsupported Browser");
}

Expand Down Expand Up @@ -165,7 +169,18 @@ export const ReactMediaRecorder = ({
if (isStreamEnded) {
await getMediaStream();
}

// mediaRecorder.current.onstop = onRecordingStop;
mediaRecorder.current = new MediaRecorder(mediaStream.current);
mediaRecorder.current.addEventListener("dataavailable", event => {
onRecordingActive(event)
});

// mediaRecorder.current.ondataavailable = onRecordingActive;
mediaRecorder.current.addEventListener("stop", () => {
onRecordingStop()
mediaRecorder.current.stream.getTracks().forEach(track => track.stop())
console.log("executing stop event listener");})
mediaRecorder.current.ondataavailable = onRecordingActive;
mediaRecorder.current.onstop = onRecordingStop;
mediaRecorder.current.onerror = () => {
Expand Down Expand Up @@ -215,8 +230,11 @@ export const ReactMediaRecorder = ({
};

const stopRecording = () => {
console.log("stop recording called ")
console.log(mediaRecorder.current, " current")
if (mediaRecorder.current) {
if (mediaRecorder.current.state !== "inactive") {
console.log("stopping the recording from stopRecording")
setStatus("stopping");
mediaRecorder.current.stop();
mediaStream.current &&
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
"noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
Expand Down