WebRTC with Python & React: Building Real-Time Communication Applications

1brew install ffmpeg opus libvpx pkg-config

1pip install aiortc

1from aiortc import RTCPeerConnection, MediaStreamTrack

1peer_connection = RTCPeerConnection()

1class VideoStreamTrack(MediaStreamTrack):
2    # Your implementation here to capture video frames
3    pass
4
5video_track = VideoStreamTrack()
6peer_connection.addTrack(video_track)

1async def connect():
2    offer = await peer_connection.createOffer()
3    await peer_connection.setLocalDescription(offer)
4    # Now send the offer to the remote peer

1from aiortc import RTCPeerConnection
2
3peer_connection = RTCPeerConnection()

1@peer_connection.on("track")
2def on_track(track):
3    print("Received track:", track.kind)
4    if track.kind == "video":
5        # Handle video track
6        pass
7
8@peer_connection.on("icecandidate")
9def on_icecandidate(candidate):
10    print("New ICE candidate:", candidate)

1from aiortc import MediaStreamTrack, VideoStreamTrack
2
3class CustomVideoTrack(MediaStreamTrack):
4    kind = "video"
5
6    async def recv(self):
7        frame = await self.next_frame()
8        # Process frame (e.g., apply filters)
9        return frame
10
11video_track = CustomVideoTrack()
12peer_connection.addTrack(video_track)

1import cv2
2
3# Capture from the default camera
4cap = cv2.VideoCapture(0)
5
6while True:
7    ret, frame = cap.read()
8    if not ret:
9        break
10    # Convert the frame to the right format and send it
11    video_track.send(frame)

1from flask import Flask, request, jsonify
2
3app = Flask(__name__)
4
5@app.route('/api/offer', methods=['POST'])
6def receive_offer():
7    offer = request.json['offer']
8    print("Received offer:", offer)
9    # Process offer and generate answer
10    return jsonify(answer="Here is the answer")
11
12if __name__ == '__main__':
13    app.run(debug=True, port=5000)

1from flask import Flask, request, jsonify
2from flask_sockets import Sockets
3
4app = Flask(__name__)
5sockets = Sockets(app)
6
7@sockets.route('/websocket')
8def echo_socket(ws):
9    while not ws.closed:
10        message = ws.receive()
11        ws.send(message)  # Echo the websocket message back to the client
12
13if __name__ == "__main__":
14    app.run()

1from aiortc import RTCPeerConnection, MediaStreamTrack
2
3@app.route('/offer', methods=['POST'])
4def handle_offer():
5    offer = request.json['sdp']
6    pc = RTCPeerConnection()
7    pc.setRemoteDescription(offer)
8    # Create an answer
9    answer = pc.createAnswer()
10    pc.setLocalDescription(answer)
11    return jsonify({'sdp': pc.localDescription.sdp})

1import React, { useRef } from 'react';
2
3function App() {
4    const localVideoRef = useRef();
5    const remoteVideoRef = useRef();
6
7    // More React code to handle video streams
8
9    return (
10        <div>
11            <video ref={localVideoRef} autoPlay playsInline />
12            <video ref={remoteVideoRef} autoPlay playsInline />
13        </div>
14    );
15}
16
17export default App;

1// Assuming signaling via WebSocket is set up
2const pc = new RTCPeerConnection();
3
4pc.ontrack = (event) => {
5    if (event.streams && event.streams[0]) {
6        remoteVideoRef.current.srcObject = event.streams[0];
7    }
8};
9
10// Function to start the connection
11function startConnection() {
12    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
13        .then(stream => {
14            localVideoRef.current.srcObject = stream;
15            stream.getTracks().forEach(track => pc.addTrack(track, stream));
16        });
17    // Signaling code to exchange offers/answers and candidates
18}