hackingbeauty / react-mic Goto Github PK

This Issue has been raised before and the reply was to upgrade. I am using 12.4 right now but am facing the same issue. The red dot does not disappear even was stopping to record. This happens randomly. Any suggestions?

I'm thinking why you need this tracking line?

ReactGA.initialize('UA-98862819-1');

When i start recording for very first time the sinewave context is clear... when i stop recording the sine wave is staying as is, so here when recording is stopped, the sinewave has to be cleared.. how to achive that....?

So how to achieve clearing sinewave when stopped recording... we are passing the "record" state as true and false when started and stopped recording... but still sinewave stays... can you please let us know..

Is this anything to do with visualizer? how to clear that too...

are there analytics embedded in this?

I want save the audio for late upload to database

Preferably using AWS Amplify Storage class.

One can upload other files using following code.

Storage.put('test.txt', 'Hello')
    .then (result => console.log(result))
    .catch(err => console.log(err));

Please share the debugging process to test for mobile browser

I just need to be able to display the oscillations instead of recording the audio from mic.

Could you please tell how I can do it?

I want update An audio recorded with the microphone to my firebase database , but I get an BLOB object and I take the url like this blob:http://localhost:3000/b890eafb-2265-458e-a9d8-84b81657d7fb but if I want play this audio in other computer not heard.

And the only thing I can think of is to convert it to .mp3 or .wav and upload it

Hey guys, I'm trying to use this component to record audio. Using Google Chrome as the browser, but onData and onStop are never fired, so I can never access the data that was created.

I see an oscillator and the oscillator moves when voice input is detected, but those other events never fire. Anyone know what's up?

Because of audio file size constraint, I want to limit the duration of the recording.

Is this possible with react-mic? How to do this? If not, do you have a suggestion on how to implement it?

THanks!

Hi is it possible to change the sampleRateHertz of the resulting file?

We try to record something with this library and to translate it with the Google speech API. But this accepts only opus files with a sampleRateHertz of 16000.

I don't know if this is related to https://github.com/muaz-khan/RecordRTC/issues/315

when:
this bug does not occur regularly, only reproducible after at least 2 hours of inactivity (could be relevent: on a Android Chrome browser).
Then if the user pushes startRecording-button first, says something and hit endRecording-button

screenshot of the bug (caught in errorBoundary React 0.16)

code:

import React, {Component} from 'react';
import {FontIcon} from 'react-md';
import {ReactMic} from 'react-mic';
// import toastr from 'toastr';

export default class Mic extends Component {
	constructor (props) {
		super(props);
		this.state = {
			record: false,
			blobObject: null,
			isRecording: false,
			startVoice: false
		};
	}

	startRecording = () => {
        console.info("startRecording: ");
		this.setState({
			record: true,
			isRecording: true
		});
	}

	stopRecording = () => {
        console.info("stopRecording: ");
		this.setState({
			record: false,
			isRecording: false
		});
	}

	onStart = () => {
		console.log('onStart: ');
	}

	onStop = (blobObject) => {
		const {setAudioPath} = this.props; // eslint-disable-line
        console.info("onStop blobObject: ", blobObject);
		this.setState({
			blobURL: blobObject.blobURL
		});
		blobObject.blobURL = new Date();
		console.info("blobObject: ", blobObject);
       /*  window.socket.emit("saveAudio", blobObject
			, res => {
				if (res.error) {
					toastr.error(res.error);
				} else {
					window.pushNotification({
						message: "audio file saved successfully: " + res.success,
						title: "info",
						status: "info"
					});
					setAudioPath(res.success);
				}
			}
		); */
	}

	render () {
		const {isRecording, startVoice} = this.state;
		const {newConfig, handleCommentInputChange, commentInput} = this.props; // eslint-disable-line
		console.debug("Mic render newConfig: ", newConfig);
		return (
			<div>
				<ReactMic
					className="oscilloscope"
					record={this.state.record} // defaults -> false.  Set to true to begin recording
					backgroundColor="white" // background color
					visualSetting="sinewave"
					audioBitsPerSecond={128000}
					onStop={this.onStop} // callback to execute when audio stops recording
					onStart={this.onStart}
					strokeColor="black" // sound wave color:
					width="300"
				/>
				<div>
					<audio ref="audioSource" controls="controls" src={this.state.blobURL}/>
					<FontIcon
						className="mic-btn"
						secondary
						disabled={isRecording}
						onClick={this.startRecording}>
						mic
					</FontIcon>
					<FontIcon
						className="mic-btn"
						secondary
						disabled={!isRecording}
						onClick={this.stopRecording}>
						stop
					</FontIcon>
				</div>
			</div>
		);

	}
};

appreciate some help :)

I test the demo code and failed. Then I tried the demo at the link as below:
https://hackingbeauty.github.io/react-mic/
and I failed again.

For both I get the same exception:

(index):1 Uncaught (in promise) DOMException
Promise.then (async)
startRecording @ MicrophoneRecorder.js:58
t.render @ ReactMic.js:98
u @ react-dom.production.min.js:129
beginWork @ react-dom.production.min.js:133
o @ react-dom.production.min.js:160
a @ react-dom.production.min.js:160
i @ react-dom.production.min.js:161
x @ react-dom.production.min.js:167
k @ react-dom.production.min.js:167
batchedUpdates @ react-dom.production.min.js:170
st @ react-dom.production.min.js:53
Jt @ react-dom.production.min.js:70

I saw someone saied it was a https problem, however I think I tried .github.io link with chrome so it should be another problem.

Hey there!! I am know deeply into your code, and trying to find possible ways to pause and resume recording. Do you have any suggestions on how I can achieve this ?

I have tried to use the onData function , but the callback is not firing so i am not able to get the real time data. can anyone help?

onData(recordedBlob) {
console.log('chunk of real-time data is: ', recordedBlob);
}

After recording is stopped, the recorded blob size is zero.

I want to send the speech input to Google/Micrsoft API for speech to text conversion. Any help regarding how to get the actual blob/audio file to send to the API end point would be appreciated. I hope I am not asking a trivia (I am new to React).

Hi
How do I get rid of the red dot when I move to the next page. Any specific method i need to call?

Hi,

I use redux to store the bool to start and stop the recording, and when I call the action to update the redux "record" variable to false, the render function sees the change, however, the recording still continues. However, if I use the component's state, it works as expected.

As pictured above, the recording icon appears active even after I stop listening.
This is a confusing user experience.

Is it possible the recognition was not properly aborted on your end?
Or can I resolve this on my end?

I sent the following link via Facebook Messenger
https://hackingbeauty.github.io/react-mic/

When I tried to open the link and record it, nothing happened. Apparently Facebook's In-App Browser does not allow for apps to access the microphone. Is there a way to get around this.

When I set the backgroundColor as "transparent" the visualization stops working properly, it seems that the waves or the bars overlap.

See this issue, the .stop() method I think was removed, this is the new way to do it:

streamproc/MediaStreamRecorder#76

Would be good if we could pass constructor arguments back to MediaRecorder ? Mostly to set the encoding format and bitrate etc. Looking at the code there isn't a way currently ?

I have add react-mic to my own project. But I have a issue, I want to add multiple record in one web page. But onStop event only is called one, and there is only one BLOB file is created if I try recording at any Mic record in own page. Please help, thank alot.

I used your code to record user's voice from microphone. I want to obtain the url of the blob file. How can I do it in reacts? thanks.

I can't seem to access my own methods with onStop. do you have any examples on how to set the state with your onStop method?

ie append audio link to state. display on page.

Only getting this error when running tests

TypeError: (window.AudioContext || window.webkitAudioContext) is not a constructor 

I found onStart and onStop function work well， but onSave function not work

version : "react-mic": "^11.0.0"

Hi there,
Thank you for awesome code
When i try it, i got this problem. Anyone can help?

Is it possible with this library (or would you know how) to stop recording audio after detecting when a user has stopped speaking?

Similar to popular speech recognition integrations (Alexa, Siri, Google).

Last December I've tested this library on Chrome and Firefox and works fine. This January however the library stopped working in Chrome browser but working well in Firefox. After digging some information it seems that it was affected by the Chrome's new autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio. @hackingbeauty It seems to need an update to cover the new policy.

I set strokeColor and backgroundColor to this.state... and when I change the state (as well as the recording state), the color does not change with it.

thoughts?

The demo does not work if I download and convert webm file to mp3 file though I am getting the size means it has data

"react-mic": "^11.0.0",

<ReactMic
record={record}
save={save}
className="sound-wave"
onSave={this.onSave}
onStart={this.onStart}
onStop={this.onStop}
visualSetting="sinewave"
audioBitsPerSecond= {10}
mimeType= {'audio/amr-wb'}
strokeColor="#000000"
backgroundColor="#FF4081" />

audioBitsPerSecond change but Blob Size No change

Howdy,

I've just set everything up to use react-mic.. Using react (v15.6.x), react-router (v4.1.x) and the latest version of react-mic (v7.0.8) I get an error: "Uncaught (in promise) TypeError: onStartCallback is not a function". Everything works as expected, until I go to start the audio recorder (via a button click) which is when it errors out (after it recognises that getUserMedia is available). A little digging shows that the issue seems to point to the onStartCallback var in MicrophoneRecorder.js

Here is my first attempt at getting it going:

import React from 'react';
import { ReactMic } from 'react-mic';

export default class AudioRecorder extends React.Component {
	constructor(props) {
		super(props);
		this.state = { 
			'file': {},
			'record': false
		};
	}

	startRecording = () => {
		console.log('start recording');
		this.setState({
			record: true
		});
	}

	stopRecording = () => {
		this.setState({
			record: false
		});
	}

	onStop(recordedBlob) {
		console.log('recorded blob is: ' + recordedBlob);

		//TODO - Playback to user and send to server next
	}

	render() {
		return (
			<div>
				<ReactMic record={this.state.record} className="sound-wave" onStop={this.onStop} strokeColor="#000000" backgroundColor="#FF4081" />
				<button onClick={this.startRecording} type="button">Start</button>
				<button onClick={this.stopRecording} type="button">Stop</button>
			</div>
		);
	}
}

Is this something on my end (relatively new to React) that I'm missing? Thanks for an otherwise superb library.

Cheers Kyle

Hey. So i have a need to save the audio as a .wav file to the back end. But react-mic is only returning as a .webm format only.

I tried passing the mime type in the props like this :
<ReactMic mimeType="audio/wav">

But it doesn't seem to work. When i hit the returned blobURL, and downloaded the file, the file is in .wav, but when i right click it and open it's audio properties, it says the container is WebM and codec is Opus. audio/webm codec=opus, are all default prop values. So how can i get the result as a real .wav file?

I'm just trying to get rid of the recording icon in broswer

https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active

`
The fixed final code will be like:

  MicrophoneRecorder.prototype.stopRecording = function stopRecording() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
      mediaRecorder.stop();
      audioCtx.suspend();
        stream.getTracks()[0].stop();
    }
  };

It works fine but when you start recording again you will get an error says you can't start recording because there are no audio or video tracks available.

Hi
This is not available to Yarn list. unable to add this package using yarn?

Is it possible to pass a function to ReactMic component and get the audio data chunks as an when they become available so that the data can be sent to server for real time processing?

I looked in the source and it said something about options but I can't really figure out what to put.

would also be nice to be able to assign a bitrate, as the quality is a bit low for my needs.

PropTypes should be accessed via prop-types

PS: Thanks for this package 👍

when i upload project on remote server this error occures.
but it works correctly on my local.

Uncaught Error: The error you provided does not contain a stack trace. at B (index.js:1582) at G (index.js:1899) at index.js:1914 at index.js:1933 at index.js:1414 B @ index.js:1582 G @ index.js:1899 (anonymous) @ index.js:1914 (anonymous) @ index.js:1933 (anonymous) @ index.js:1414 record:1 Uncaught (in promise) DOMException

version: 12.3.0

At the first time, When I use react-mic, the animation is ok.
After that, I tried to record at the second time, the animation has frozen.
Same as the demo

https://hackingbeauty.github.io/react-mic/
Check out demo app . Visualization dont work first time