apprtc
appr.tc has been shutdown. Please use the Dockerfile to run your own test/dev instance.
Top Related Projects
Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
Simple peer-to-peer with WebRTC.
📡 Simple WebRTC video, voice, and data channels
Janus WebRTC Server
Cutting Edge WebRTC Video Conferencing
Quick Overview
AppRTC is a WebRTC demo application developed by Google. It serves as a reference implementation for WebRTC, demonstrating how to build a video chat application using WebRTC technology. The project includes both client-side and server-side components, making it a comprehensive example for developers looking to implement WebRTC in their own applications.
Pros
- Provides a complete, working example of a WebRTC application
- Developed and maintained by Google, ensuring high-quality code and best practices
- Includes both client-side and server-side implementations
- Serves as an excellent learning resource for WebRTC developers
Cons
- Not actively maintained, with the last significant update in 2018
- May not incorporate the latest WebRTC features or best practices
- Complexity may be overwhelming for beginners
- Requires additional setup for signaling and TURN servers
Code Examples
- Initializing a peer connection:
const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};
const peerConnection = new RTCPeerConnection(configuration);
- Adding a local stream to the peer connection:
navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then(stream => {
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
});
- Creating and sending an offer:
peerConnection.createOffer()
.then(offer => peerConnection.setLocalDescription(offer))
.then(() => {
// Send the offer to the remote peer via your signaling channel
sendSignalingMessage({type: 'offer', sdp: peerConnection.localDescription});
});
Getting Started
To run AppRTC locally:
-
Clone the repository:
git clone https://github.com/webrtc/apprtc.git
-
Install dependencies:
cd apprtc npm install
-
Start the server:
npm start
-
Open your browser and navigate to
http://localhost:8080
to use the application.
Note: For a full WebRTC experience, you'll need to set up STUN/TURN servers and configure the application accordingly.
Competitor Comparisons
Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.
Pros of Jitsi Meet
- More feature-rich, including screen sharing, recording, and chat functionality
- Active development with frequent updates and community support
- Scalable for larger deployments and enterprise use cases
Cons of Jitsi Meet
- More complex setup and configuration compared to AppRTC
- Higher resource requirements due to additional features
Code Comparison
AppRTC (JavaScript):
var startTime = window.performance.now();
call.pc1.createOffer(offerOptions)
.then(function(desc) {
return call.pc1.setLocalDescription(desc);
})
.then(function() {
trace('Offer from pc1\n' + call.pc1.localDescription.sdp);
return call.pc2.setRemoteDescription(call.pc1.localDescription);
})
Jitsi Meet (JavaScript):
const options = {
hosts: {
domain: 'jitsi-meet.example.com',
muc: 'conference.jitsi-meet.example.com'
},
bosh: 'https://jitsi-meet.example.com/http-bind',
clientNode: 'http://jitsi.org/jitsimeet'
};
const confOptions = {
openBridgeChannel: true
};
const connection = new JitsiMeetJS.JitsiConnection(null, null, options);
connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
connection.connect();
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
Pros of WebRTC-Experiment
- More extensive collection of WebRTC demos and examples
- Simpler setup and easier to get started quickly
- Actively maintained with frequent updates
Cons of WebRTC-Experiment
- Less focus on a single, polished application
- May lack some advanced features present in AppRTC
- Documentation could be more comprehensive
Code Comparison
AppRTC (Python):
def get_room_parameters(request, room_id, client_id, is_initiator):
params = {}
params['room_id'] = room_id
params['client_id'] = client_id
params['is_initiator'] = is_initiator
return params
WebRTC-Experiment (JavaScript):
function getRoom(roomid) {
var room = {
roomId: roomid,
participants: {},
isRoomFull: function() {
return Object.keys(this.participants).length >= 2;
}
};
return room;
}
The code snippets show different approaches to handling room parameters. AppRTC uses a Python function to create a dictionary of room parameters, while WebRTC-Experiment uses a JavaScript function to create a room object with methods for managing participants.
Simple peer-to-peer with WebRTC.
Pros of PeerJS
- Simpler API and easier to use for beginners
- Lightweight and focused solely on peer-to-peer connections
- Better documentation and examples for quick implementation
Cons of PeerJS
- Less flexible for complex WebRTC scenarios
- Relies on PeerServer for signaling, which may introduce limitations
- Smaller community and fewer updates compared to AppRTC
Code Comparison
AppRTC (JavaScript):
var pc = new RTCPeerConnection(pcConfig);
pc.onicecandidate = function(event) {
if (event.candidate) {
sendMessage({type: 'candidate', label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid, candidate: event.candidate.candidate});
}
};
PeerJS (JavaScript):
var peer = new Peer();
peer.on('open', function(id) {
console.log('My peer ID is: ' + id);
});
peer.on('connection', function(conn) {
conn.on('data', function(data) {
console.log('Received', data);
});
});
The AppRTC code shows lower-level WebRTC implementation, while PeerJS abstracts much of this complexity away, providing a simpler interface for peer-to-peer connections.
📡 Simple WebRTC video, voice, and data channels
Pros of simple-peer
- Lightweight and easy to use, with a simple API
- Works in both Node.js and the browser
- Supports data channels and media streams
Cons of simple-peer
- Less comprehensive than AppRTC, focusing mainly on peer connections
- May require additional setup for signaling and STUN/TURN servers
- Limited built-in features compared to AppRTC's full-stack approach
Code Comparison
AppRTC (Java):
public class PeerConnectionClient {
private void createPeerConnection() {
PeerConnection.RTCConfiguration rtcConfig = new PeerConnection.RTCConfiguration(iceServers);
peerConnection = factory.createPeerConnection(rtcConfig, pcObserver);
}
}
simple-peer (JavaScript):
const peer = new SimplePeer({
initiator: true,
trickle: false,
config: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }
})
AppRTC provides a more comprehensive WebRTC implementation with additional features and a full-stack approach, while simple-peer offers a lightweight and easy-to-use solution for basic WebRTC peer connections. AppRTC may be better suited for complex applications, while simple-peer is ideal for simpler use cases or rapid prototyping.
Janus WebRTC Server
Pros of Janus-gateway
- More versatile: Supports multiple protocols (WebRTC, RTMP, SIP) and use cases (video conferencing, streaming, SFU)
- Highly scalable: Designed for large-scale deployments and high concurrency
- Extensive plugin system: Allows for easy customization and extension of functionality
Cons of Janus-gateway
- Steeper learning curve: More complex architecture and configuration compared to AppRTC
- Higher resource requirements: May require more server resources due to its comprehensive feature set
Code Comparison
AppRTC (JavaScript):
var pcConfig = {
'iceServers': [{
'urls': 'stun:stun.l.google.com:19302'
}]
};
Janus-gateway (C):
janus_ice_stream *stream = handle->stream;
if(stream == NULL) {
JANUS_LOG(LOG_ERR, "[%"SCNu64"] No stream!!\n", handle->handle_id);
return;
}
Both projects use different programming languages and architectures. AppRTC focuses on a simple WebRTC implementation, while Janus-gateway offers a more comprehensive and flexible approach to real-time communication.
Cutting Edge WebRTC Video Conferencing
Pros of mediasoup
- Designed for scalability and performance, suitable for large-scale deployments
- Offers more flexibility and control over media routing and processing
- Supports advanced features like simulcast and SVC
Cons of mediasoup
- Steeper learning curve due to its more complex architecture
- Requires more setup and configuration compared to AppRTC
- Less suitable for simple, quick WebRTC implementations
Code Comparison
AppRTC (JavaScript):
var pc = new RTCPeerConnection(pcConfig);
pc.onicecandidate = function(event) {
if (event.candidate) {
sendMessage({type: 'candidate', label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid, candidate: event.candidate.candidate});
}
};
mediasoup (JavaScript):
const router = await mediasoupWorker.createRouter({ mediaCodecs });
const transport = await router.createWebRtcTransport({
listenIps: [{ ip: '0.0.0.0', announcedIp: null }],
enableUdp: true,
enableTcp: true,
preferUdp: true,
});
The code snippets illustrate the difference in complexity and control. AppRTC uses a more straightforward approach with standard WebRTC APIs, while mediasoup provides lower-level control over transport creation and routing.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
AppRTC Demo Code
NOTE: This project is no longer served via https://appr.tc. See Docker for local dev/testing deployment.
Development
Detailed information on developing in the webrtc github repo can be found in the WebRTC GitHub repo developer's guide.
The development AppRTC server can be accessed by visiting http://localhost:8080.
Running AppRTC locally requires Google App Engine SDK for Python, Node.js and Grunt.
Follow the instructions on Node.js website, Python PIP and on Grunt website to install them.
When Node.js and Grunt are available you can install the required dependencies
running npm install
and pip install -r requirements.txt
from the project root folder.
Before you start the AppRTC dev server and everytime you update the source code
you need to recompile the App Engine package by running grunt build
.
Start the AppRTC dev server from the out/app_engine
directory by running the Google App Engine SDK dev server,
<path to sdk>/dev_appserver.py ./out/app_engine
Then navigate to http://localhost:8080 in your browser (given it's on the same machine).
Testing
You can run all tests by running grunt
.
To run only the Python tests you can call,
grunt runPythonTests
Deployment
Docker
This allows it to be setup on a machine and accessed by other machines on the same local network for testing purposes.
Download the Dockerfile to a new folder and follow the instructions within the Dockerfile.
Manual setup
Instructions were performed on Ubuntu 14.04 using Python 2.7.6 and Go 1.6.3.
- Clone the AppRTC repository
- Do all the steps in the Collider instructions then continue on step 3.
- Install and start a Coturn TURN server according to the instructions on the project page.
- Open src/app_engine/constants.py and do the following:
Collider
- If using Google Cloud Engine VM's for Collider
- Change
WSS_INSTANCE_HOST_KEY
,WSS_INSTANCE_NAME_KEY
andWSS_INSTANCE_ZONE_KEY
to corresponding values for your VM instances which can be found in the Google Cloud Engine management console.
- Change
- Else if using other VM hosting solution
- Change
WSS_INSTANCE_HOST_KEY
to the hostname and port Collider is listening too, e.g.localhost:8089
orotherHost:443
.
- Change
TURN/STUN
-
If using TURN and STUN servers directly
Either:
- Comment out
ICE_SERVER_OVERRIDE = None
and then uncommentICE_SERVER_OVERRIDE = [ { "urls":...]
three lines below and fill your TURN server details insrc/app_engine/constants.py
. e.g.
ICE_SERVER_OVERRIDE = [ { "urls": [ "turn:hostnameForYourTurnServer:19305?transport=udp", "turn:hostnameForYourTurnServer:19305?transport=tcp" ], "username": "TurnServerUsername", "credential": "TurnServerCredentials" }, { "urls": [ "stun:hostnameForYourStunServer:19302" ] } ]
- Or:
Set the the comma-separated list of STUN servers in
app.yaml
. e.g.ICE_SERVER_URLS: "stun:hostnameForYourStunServer,stun:hostnameForYourSecondStunServer"
- Comment out
-
Else if using ICE Server provider [1]
- Change
ICE_SERVER_BASE_URL
to your ICE server provider host. - Change
ICE_SERVER_URL_TEMPLATE
to a path or empty string depending if your ICE server provider has a specific URL path or not. - Change
ICE_SERVER_API_KEY
to an API key or empty string depending if your ICE server provider requires an API key to access it or not.
ICE_SERVER_BASE_URL = 'https://appr.tc' ICE_SERVER_URL_TEMPLATE = '%s/v1alpha/iceconfig?key=%s' ICE_SERVER_API_KEY = os.environ.get('ICE_SERVER_API_KEY')
- Change
8. Build AppRTC using grunt build
then deploy/run:
-
If running locally using the Google App Engine dev server (dev/testing purposes)
- Start it using dev appserver provided by the Google app engine SDK
pathToGcloudSDK/platform/google_appengine/dev_appserver.py out/app_engine/
.
- Start it using dev appserver provided by the Google app engine SDK
-
Else if running on Google App Engine in the Google Cloud (production)
- Make sure you have a Google Cloud Account and Google App Engine enabled.
- Download the Google Cloud SDK and initialize it.
- Deploy your AppRTC app by executing the following in the out/app_engine directory
gcloud app deploy --project [YOUR_PROJECT_ID] -v [YOUR_VERSION_ID]
(You can find the [YOUR_PROJECT_ID] and [YOUR_VERSION_ID] in your Google cloud console).
9. Open a WebRTC enabled browser and navigate to http://localhost:8080
or
https://[YOUR_VERSION_ID]-dot-[YOUR_PROJECT_ID]
(append ?wstls=false
to the
URL if you have TLS disabled on Collider for dev/testing purposes).
Advanced Topics
Enabling Local Logging
Note that logging is automatically enabled when running on Google App Engine using an implicit service account.
By default, logging to a BigQuery from the development server is disabled. Log information is presented on the console. Unless you are modifying the analytics API you will not need to enable remote logging.
Logging to BigQuery when running LOCALLY requires a secrets.json
containing Service Account credentials to a Google Developer project where BigQuery is enabled. DO NOT COMMIT secrets.json
TO THE REPOSITORY.
To generate a secrets.json
file in the Google Developers Console for your
project:
- Go to the project page.
- Under APIs & auth select Credentials.
- Confirm a Service Account already exists or create it by selecting Create new Client ID.
- Select Generate new JSON key from the Service Account area to create and download JSON credentials.
- Rename the downloaded file to
secrets.json
and place in the directory containinganalytics.py
.
When the Analytics
class detects that AppRTC is running locally, all data is logged to analytics
table in the dev
dataset. You can bootstrap the dev
dataset by following the instructions in the Bootstrapping/Updating BigQuery.
BigQuery
When running on App Engine the Analytics
class will log to analytics
table in the prod
dataset for whatever project is defined in app.yaml
.
Schema
bigquery/analytics_schema.json
contains the fields used in the BigQuery table. New fields can be added to the schema and the table updated. However, fields cannot be renamed or removed. Caution should be taken when updating the production table as reverting schema updates is difficult.
Update the BigQuery table from the schema by running,
bq update -t prod.analytics bigquery/analytics_schema.json
Bootstrapping
Initialize the required BigQuery datasets and tables with the following,
bq mk prod
bq mk -t prod.analytics bigquery/analytics_schema.json
[1] ICE Server provider AppRTC by default uses an ICE server provider to get TURN servers. Previously we used a compute engine on demand service (it created TURN server instances on demand in a region near the connecting users and stored them in shared memory) and web server with a REST API described in draft-uberti-rtcweb-turn-rest-00. This has now been replaced with a Google service. It's similar from an AppRTC perspective but with a different response format.
Top Related Projects
Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.
WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
Simple peer-to-peer with WebRTC.
📡 Simple WebRTC video, voice, and data channels
Janus WebRTC Server
Cutting Edge WebRTC Video Conferencing
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot