react-multimedia-capture

Now supports React@16!

react-multimedia capture is module for capturing multimedia from WebBrowser via React.
It uses navigator.mediaDevices.getUserMedia and MediaRecorder API, so make sure that your browser supports.

Features

- Uses supporting getUserMedia API from mediaDevices.getUserMedia/getUserMedia/-vendor_prefix-GetUserMedia.
- Easy, intuitive interface
- Video Recording
- Audio Recording
- Supports Pausing & Resuming

Example

$3

Example can found from here: react-multimedia-capture-example.
Example demonstrates all features in react-multimedia-capture.

``javascript

import MediaCapturer from 'react-multimedia-capture';

class VideoExample extends Component { ... render() { return (


				...
				Video Recording Example

				
									constraints={{ audio: true, video: true }}
					timeSlice={10}
					onGranted={this.handleGranted}
					onDenied={this.handleDenied}
					onStart={this.handleStart}
					onStop={this.handleStop}
					onPause={this.handlePause}
					onResume={this.handleResume}
					onError={this.handleError}
					onStreamClosed={this.handleStreamClose}
					render={({ request, start, stop, pause, resume }) => 
					

						Granted: {granted.toString()}

						Rejected Reason: {rejectedReason}

						Recording: {recording.toString()}

						Paused: {paused.toString()}
						{!granted && }
						
						
						
						
						
						
Streaming test

						
					

				} />


		);
	}
}

Props

$3

Set the getUserMedia constraints. Default is { video: true, audio: true }.

$3

Set the class name of the element.

$3

Set mimeType for MediaRecorder API. It uses 'video/webm;codecs=vp8' by default. If you are trying to record Audio, you should use 'audio/webm' instead.

$3

Set time slice of mediaRecorder.start.

$3

Handler that fires on browser acquired permission to access media devices. From @1.2.1, MediaStream passing through first argument.

$3

Handler that fires on browser denied permission to access media devices.

$3

Handler that fires on user started recording.

$3

Handler that fires on user stopped recording. This method will stop MediaStream, but if you want to stay alive, set stopStream to false.

$3

Handler that fires on user paused recording.

$3

Handler that fires on user resumed recording.

$3

Handler that fires on error occurs. This also could be fired if the browser not support getUserMedia and mediaRecorder API.

$3

Handler that fires when stream is closed. This happens when you stop the record. After stopped record, you can't start record before get permission again to get new MediaStream to work.

$3

Render the child components with functions. Each function actually manipulate recording related jobs into parent like VideoRecorder or AudioRecorder.

- request: Function to get permission of recording media.
- start: Function to start recording.
- stop: Function to stop recording.
- pause: Function to pause recording.
- resume: Function to resume recording.

Updates

$3

- Added stop recording on unmounting component

$3

- Fixed event typo in ondataavailable

$3

- Fixed "Cannot find module" issue using with Webpack

$3

- Passing MediaStream to onGranted props.

$3

- Fixed Stop recording doesn't work anymore
- Added functionality to request permission after stop recording

$3

- Updated Stop method to decide stop MediaStream or not.

$3

- Updated to support changing camera.