This project implements a simple WebRTC video streaming application using WebSockets for signaling. It allows a sender to stream video to a receiver in real time.
- Real-time Video Streaming: Stream video from the sender to the receiver using WebRTC.
- WebSocket Signaling: Use WebSockets to handle signaling messages for establishing the peer connection.
- User Interaction for Playback: Video playback is initiated by user interaction to comply with browser autoplay policies.
- Frontend: React
- WebRTC: For real-time video communication
- WebSocket: For signaling
- HTML5 Video: To display the video stream
- Node.js and npm installed on your machine.
- A local server or a WebSocket server running on
ws://localhost:8080
.
-
Clone the repository:
git clone <repository-url> cd <project-directory>
-
Install dependencies:
npm install
-
Start the application:
npm start
- Open two instances of your web browser (or two different browsers).
- In the first instance, navigate to the Sender component to start streaming video.
- In the second instance, navigate to the Receiver component to view the streamed video.
- Click the "Play Video" button in the receiver to start video playback.
- Receiver.tsx: Handles the receiving of the video stream and displays it.
- Sender.tsx: Manages video capture and streaming to the receiver.
- Ensure that your WebSocket server is running and accessible at the specified URL.
- Check the browser console for any errors related to WebRTC or WebSocket connections.
This project is licensed under the MIT License.