📷 RippleBerry Camera Recorder

RippleBerry Camera Recorder is a powerful, yet easy-to-use JavaScript library that allows developers to capture video and audio from connected media devices. Built on top of the native MediaRecorder API, this package simplifies the process of recording media streams in modern web applications.

---

🚀 Key Features

• Multi-Device Support: Seamlessly record from various audio and video devices.
• Simple Configuration: Easily customize video and audio settings with flexible options.
• Built-in Permission Handling: Automatically manage permissions for camera and microphone access.
• Control Methods: Intuitive methods for starting, stopping, and managing media recordings.
• Cross-Browser/Platform Compatibility: No need to worry about compatibility! It works smoothly on Android 📱, iOS 🍏, and Windows 💻.
• Auto Duration Fixing: Automatically fixes the duration for webm blobs, ensuring accurate recording length.

---

🌐 Cross-Browser and Platform Compatibility

RippleBerry Camera Recorder works across all modern browsers and platforms, ensuring seamless functionality on:

• Android 📱
• iOS 🍏
• Windows 💻

---

🎥 Demo

Check out the demo application at Demo Link.

---

🛠️ Installation

Install the package using npm or yarn:

1npm install rippleberry-camera-recorder
2# or
3yarn add rippleberry-camera-recorder

---

📖 Usage

1. Import the Library

Start by importing the necessary components from the package:

1import RBCameraRecorder, {
2  getConnectedDevices,
3  getSupportedVideosOptions,
4  getSupportedAudiosOptions,
5  checkPermission,
6  requestPermission,
7} from "rippleberry-camera-recorder"

2. Initializing the Recorder

You can initialize the recorder with or without options, depending on your use case.

With Options:

You can customize the recorder's behavior by passing an options object when initializing:

Keep in mind that some options may not be supported by all devices. so it's recommended to use the default options.

1const options = {
2  video: {
3    width: 1280, // Optional
4    height: 720, // Optional
5    deviceId: "your-video-device-id", // Optional
6  },
7  audio: {
8    deviceId: "your-audio-device-id", // Optional
9  },
10  mimeType: "video/webm", // Optional
11  audioBitsPerSecond: 128000, // Optional
12  videoBitsPerSecond: 2500000, // Optional
13}
14
15const recorder = new RBCameraRecorder(options)

Without Options:

You can initialize the recorder without passing any specific options. This will use the default media devices and settings:

1const recorder = new RBCameraRecorder()

3. Handling Permissions

Before accessing the camera or microphone, ensure permissions are granted. RippleBerry makes it simple:

1const permissions = await checkPermission()
2if (!permissions.camera || !permissions.microphone) {
3  await requestPermission()
4}

4. Get Connected Devices

To display or list all available audio and video devices:

1const { videoDevices, audioDevices } = await getConnectedDevices()

5. Preview the Video

You can preview the video stream before starting the recording. Simply attach the stream to a video element:

1const previewStream = await recorder.getPreviewStream()
2videoElement.srcObject = previewStream
3videoElement.play()

6. Start and Stop Recording

To start recording:

1const stream = await recorder.start()
2// Optionally, use the stream to show the live video

To stop recording:

1const videoBlob = await recorder.stop()
2// You now have a Blob containing the recorded media (e.g., for download or further processing)

---

⚙️ Optional Methods

Changing Devices

Switch Video Device:

1await recorder.changeVideoDevice(newDeviceId)

Switch Audio Device:

1await recorder.changeAudioDevice(newDeviceId)

Supported Configuration Options

Get Supported Video Options:

Retrieve all supported video settings like resolution, frame rate, etc.:

1const supportedVideoOptions = await getSupportedVideosOptions()
2console.log(supportedVideoOptions)

Get Supported Audio Options:

Retrieve all supported audio settings such as bit rate, sample rate, etc.:

1const supportedAudioOptions = await getSupportedAudiosOptions()
2console.log(supportedAudioOptions)

---

🧑‍💻 Example

Here’s a simple React example showing how to use the RippleBerry Camera Recorder:

1import React, { useRef, useState } from "react"
2import RBCameraRecorder, {
3  checkPermission,
4  requestPermission,
5} from "rippleberry-camera-recorder"
6
7const App = () => {
8  const [recorder, setRecorder] = useState(null)
9  const [isRecording, setIsRecording] = useState(false)
10  const videoRef = useRef(null)
11
12  const startRecording = async () => {
13    if (!recorder) {
14      const options = {
15        /* your custom options */
16      }
17      const newRecorder = new RBCameraRecorder(options)
18      setRecorder(newRecorder)
19    }
20
21    const stream = await recorder.start()
22    videoRef.current.srcObject = stream
23    setIsRecording(true)
24  }
25
26  const stopRecording = async () => {
27    const blob = await recorder.stop()
28    const url = URL.createObjectURL(blob)
29    // Optionally download or save the video
30    setIsRecording(false)
31  }
32
33  return (
34    <div>
35      <video ref={videoRef} controls />
36      {!isRecording ? (
37        <button onClick={startRecording}>Start Recording</button>
38      ) : (
39        <button onClick={stopRecording}>Stop Recording</button>
40      )}
41    </div>
42  )
43}
44
45export default App

---

🔍 API Reference

RBCameraRecorder

Constructor: RBCameraRecorder(options?: IOptions)

Creates a new instance of the recorder with specified configuration options.

Methods:

• isSupported(): boolean
  Checks if the provided mime type is supported by the browser.

• getPreviewStream(): Promise<MediaStream>
  Returns a media stream for previewing before recording starts.

• start(): Promise<MediaStream>
  Starts the recording process and returns the media stream.

• stop(): Promise<Blob>
  Stops the recording and returns the captured media as a Blob.

• reset(): void
  Resets the recorder to its initial state.

• changeVideoDevice(deviceId: string): Promise<void>
  Switches to a different video input device.

• changeAudioDevice(deviceId: string): Promise<void>
  Switches to a different audio input device.

• getSupportedVideosOptions(): Promise<VideoOptions[]>
  Retrieves a list of supported video configuration options.

• getSupportedAudiosOptions(): Promise<AudioOptions[]>
  Retrieves a list of supported audio configuration options.

---

📝 License

This project is licensed under the MIT License.

---

Contributing

Contributions are welcome! For issues, suggestions, or contributions, feel free to open an issue or submit a pull request in the repository!

---

Contact

For any inquiries or support, please contact [dev@rippleberry.net].