https://github.com/grand-27-master/streamwave

StreamWave is a React-based web application that enables real-time audio streaming between two users using WebRTC. It also allows basic audio manipulation, including the application of filters, and provides a real-time audio visualization feature
https://github.com/grand-27-master/streamwave

canvas-api html-css-javascript htmlcanvas netlify-deployment reactjs webaudio-api webrtc

Last synced: about 1 month ago
JSON representation

StreamWave is a React-based web application that enables real-time audio streaming between two users using WebRTC. It also allows basic audio manipulation, including the application of filters, and provides a real-time audio visualization feature

• Host: GitHub
• URL: https://github.com/grand-27-master/streamwave
• Owner: grand-27-master
• Created: 2024-09-07T20:51:07.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-07T21:04:56.000Z (almost 2 years ago)
• Last Synced: 2025-03-31T00:44:26.466Z (about 1 year ago)
• Topics: canvas-api, html-css-javascript, htmlcanvas, netlify-deployment, reactjs, webaudio-api, webrtc
• Language: JavaScript
• Homepage: https://earnest-bombolone-3bf869.netlify.app/
• Size: 180 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# StreamWave

**Interview Coding Challenge:**

_Create a React application that streams audio between two users and allows basic audio manipulation. The challenge is divided into three steps, with each step increasing in complexity. You can complete as many steps as you’re comfortable with, but completing all of them will showcase your full range of skills._

StreamWave is a React-based web application that enables real-time audio streaming between two users using WebRTC. It also allows basic audio manipulation, including the application of filters, and provides a real-time audio visualization feature.

## Features

1. **Audio Streaming**:

   - Users can stream audio between each other using WebRTC.

   - Audio input and output devices can be set for the stream.

2. **Audio Filters**:

   - Apply a frequency and gain filter to the audio stream.

   - Toggle the filter on and off dynamically during the stream.

   - Default filter settings:

     - Gain: 0.75

     - Frequency range: 0-200 Hz

3. **Audio Visualization**:

   - Real-time visualization of the audio stream as a waveform or frequency spectrum.

## Technologies Used

- **React**: Frontend framework for building the UI components.

- **WebRTC**: Used for real-time audio communication between users.

- **Web Audio API**: For audio manipulation and visualization.

- **Canvas API**: For rendering real-time audio waveforms.