WebRTC and GStreamer integration using werift-webrtc for real-time audio and video streaming, enabling low-latency communication in multimedia applications.
This project implements a video streaming application using Vue.js, Werift for WebRTC, and GStreamer for media processing. The application allows real-time video streaming with minimal latency, enabling efficient peer-to-peer communication.
The primary goal of this project is to create a seamless video streaming experience for users. By leveraging WebRTC technology, the application allows for real-time video sharing and communication, making it suitable for various use cases, including video conferencing, remote collaboration, and live streaming events.
Werift serves as the backbone of the WebRTC implementation in this project. It handles the signaling process, establishing connections between peers, and managing the ICE candidates. By utilizing Werift, the project can efficiently manage real-time video streams and handle the complexities of WebRTC.
GStreamer is utilized for processing and managing multimedia streams in this application. It allows for the configuration of media pipelines that can handle various formats and sources, such as RTSP streams or a local video file. GStreamer enables the application to receive, process, and transmit video streams seamlessly, ensuring high-quality video delivery with minimal latency. Additionally, it supports various output codecs, including OPUS, VP8, H264, VP9, and AV1, allowing for flexible and efficient streaming options.
This project uses coTURN as a TURN server to facilitate WebRTC connections. coTURN is an open-source implementation of TURN (Traversal Using Relays around NAT) and STUN (Session Traversal Utilities for NAT) protocols. It is essential for enabling reliable peer-to-peer communication, especially in scenarios where direct connections cannot be established due to NAT or firewall restrictions. By relaying media traffic, coTURN ensures that users can connect successfully even in challenging network environments.
Monitoring for coTURN is accomplished using Prometheus and Grafana running in Docker containers. Prometheus scrapes metrics from the coTURN server and provides a monitoring interface to track performance and statistics, while Grafana allows for visualizing these metrics through customizable dashboards.
To set up coTURN, Prometheus, and Grafana, the following Docker commands are utilized:
Run coTURN:
docker run -d --network=host -v /home/ubuntu/turnserverConf/turnserver.conf:/etc/turnserver.conf -v /home/ubuntu/certs/fullchain.pem:/etc/ssl/certs/fullchain.pem -v /home/ubuntu/certs/privkey.pem:/etc/ssl/private/privkey.pem coturn/coturn
Run Prometheus:
docker run -d -p 9090:9090 -v /home/ubuntu/officialProm/prometheus.yml:/etc/prometheus/prometheus.yml prom/prometheus
Run Grafana:
docker run -d -p 3000:3000 --name=grafana grafana/grafana-oss
The prometheus.yml
file is configured to scrape metrics from coTURN, Grafana, and the node exporter:
global:
scrape_interval: 1s
evaluation_interval: 1s
scrape_configs:
- job_name: 'coturn'
static_configs:
- targets: ['server_public_ip_addr:9641']
metrics_path: '/metrics'
scheme: 'http'
params:
collector: [all]
- job_name: 'grafana'
static_configs:
- targets: ['server_public_ip_addr:3000']
metrics_path: '/metrics'
scheme: 'http'
params:
format: ['prometheus']
- job_name: node
static_configs:
- targets: ['server_public_ip:9100']
The turnserver.conf
file includes the necessary configurations for coTURN, including the listening and external IPs, user credentials, and enabling Prometheus metrics:
listening-ip=server_local_ip_addr
relay-ip=server_OS_local_ip_addr
external-ip=server_public_ip_addr
realm=your.personaldomain.com
user=testUsername:testPassword
user=test2Username:test2Password
cert=/home/ubuntu/certs/fullchain.pem
pkey=/home/ubuntu/certs/privkey.pem
prometheus=true
prometheus-username-labels=true
verbose
http://<public_ip>:9090
.http://<public_ip>:3000
.By utilizing these monitoring tools, you can effectively track the performance and reliability of the coTURN server in your video streaming application.
Before running the project, ensure you have the following installed:
Install Dependencies
Navigate to the server
directory and run the following command to install the required dependencies:
npm install express cors werift
Configure STUN/TURN Servers
In server.js
, replace stun_ip_address
, stun_port
, turn_ip_address
, turn_port
, turn_username
, and turn_credential
with your actual STUN/TURN server configurations.
Start the Server
Run the server with the following command:
node server.js
Install Dependencies
Navigate to the client
directory and run the following command to install the required dependencies:
npm install
Run the Client
Start the Vue.js client with the following command:
npm run serve
The application will be accessible at http://localhost:8080
by default.
To modify the GStreamer pipeline in server.js
, you can change the pipeline1
and pipeline2
variables to match your media source requirements.
Example pipeline configuration for RTSP streaming:
const pipeline1 = `gst-launch-1.0 rtspsrc location=rtsp://admin:rtsp_stream_addr latency=50 ! rtph264depay ! h264parse ! avdec_h264 ! videoconvert ! videoscale ! video/x-raw,width=640,height=480 ! vp8enc deadline=1 buffer-size=1000000 cpu-used=8 threads=4 cq-level=5 dropframe-threshold=15 tuning=1 ! rtpvp8pay name=pay0 pt=96 ! udpsink host=127.0.0.1 port=${port1}`;
This project demonstrates the integration of Vue.js, Werift, and GStreamer for real-time video streaming applications. Adjust configurations and pipelines as needed for your specific use case.