Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@nolanholden/use-media-recorder
Advanced tools
Readme
Headless React hooks for the MediaStream Recording API for audio, video, and screen recording.
MediaStream
s for ease-of-useMediaStream
s to reduce start/stop latencyMediaStream
s as input.bun add @nolanholden/use-media-recorder
pnpm add @nolanholden/use-media-recorder
npm install @nolanholden/use-media-recorder
yarn add @nolanholden/use-media-recorder
export default function Page() {
const [audioURL, setAudioURL] = useState("");
const [transcription, setTranscription] = useState("");
const {
browserSupportError,
error,
// <idle|acquiring_media|ready|recording|paused|stopping|stopped|failed>
status,
isAudioMuted,
startRecording,
pauseRecording,
resumeRecording,
stopRecording,
mediaBlob,
clearMediaBlob,
muteAudio,
unmuteAudio,
liveStream,
// internals:
activeMediaRecorder,
acquireMediaStream,
releaseMediaStream,
} = useMediaRecorder({
mediaStreamConstraints: {
audio: true,
video: false,
},
onStop: (audioBlob) => {
if (!audioBlob) throw new Error("No audio to transcribe.");
const blob = audioBlob;
async function stop() {
setAudioURL(URL.createObjectURL(blob));
const formData = new FormData();
formData.append("audio", blob, "my-audio-file");
const res = await fetch("/api/transcribe", {
method: "POST",
body: formData,
});
if (!res.ok)
throw new Error(`Error transcribing the audio: ${res.statusText}`);
const data = (await res.json()) as unknown as {
dictation_text: string;
};
if (typeof data.dictation_text !== "string")
throw new Error(`Error parsing response: ${JSON.stringify(data)}`);
return data.dictation_text;
}
stop()
.then((text) => {
setTranscription(text);
copyToClipboard(text);
})
.catch((err: Error) => {
console.error(err);
alert("Error transcribing audio: " + err.message);
});
},
});
useEffect(() => {
if (browserSupportError) {
console.error(browserSupportError);
alert(browserSupportError);
}
}, [browserSupportError]);
const isRecording = status === "recording";
const toggleRecording = () => {
if (isRecording) {
stopRecording();
} else {
startRecording().catch((err) => {
console.error(err);
});
}
};
return (
<div className="flex flex-col items-center justify-center gap-4">
<button
disabled={!!error}
onClick={toggleRecording}
className="rounded-lg bg-blue-500 px-6 py-3 font-bold text-white hover:bg-blue-700"
>
{isRecording ? "Stop Recording" : "Start Recording"}
</button>
<p>{audioURL || "(blob url)"}</p>
{audioURL && (
<div className="flex justify-center">
<audio src={audioURL} controls />
</div>
)}
{transcription && (
<div className="mt-3 flex flex-col items-center justify-center gap-2 pt-2">
<p className="text-lg font-bold">Transcription:</p>
<p className="pb-1 text-center text-sm text-slate-400">
<em>(copied to clipboard)</em>
</p>
<div className="border-slate/20 w-full rounded-[8px] border p-2 text-sm">
<p>{transcription}</p>
</div>
</div>
)}
</div>
)
}
FAQs
Headless React hooks for the MediaStream Recording API for audio, video, and screen recording.
The npm package @nolanholden/use-media-recorder receives a total of 1 weekly downloads. As such, @nolanholden/use-media-recorder popularity was classified as not popular.
We found that @nolanholden/use-media-recorder demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.