Convert Figma logo to code with AI

webrtc logoapprtc

appr.tc has been shutdown. Please use the Dockerfile to run your own test/dev instance.

4,158
1,374
4,158
126

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!!

12,311

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

  1. Initializing a peer connection:
const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};
const peerConnection = new RTCPeerConnection(configuration);
  1. 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));
  });
  1. 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:

  1. Clone the repository:

    git clone https://github.com/webrtc/apprtc.git
    
  2. Install dependencies:

    cd apprtc
    npm install
    
  3. Start the server:

    npm start
    
  4. 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.

12,311

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Build Status

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.

  1. Clone the AppRTC repository
  2. Do all the steps in the Collider instructions then continue on step 3.
  3. Install and start a Coturn TURN server according to the instructions on the project page.
  4. 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 and WSS_INSTANCE_ZONE_KEY to corresponding values for your VM instances which can be found in the Google Cloud Engine management console.
  • 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 or otherHost:443.

TURN/STUN

  • If using TURN and STUN servers directly

    Either:

    • Comment out ICE_SERVER_OVERRIDE = None and then uncomment ICE_SERVER_OVERRIDE = [ { "urls":...] three lines below and fill your TURN server details in src/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"
    
  • 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')
    

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/.
  • Else if running on Google App Engine in the Google Cloud (production)

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:

  1. Go to the project page.
  2. Under APIs & auth select Credentials.
  3. Confirm a Service Account already exists or create it by selecting Create new Client ID.
  4. Select Generate new JSON key from the Service Account area to create and download JSON credentials.
  5. Rename the downloaded file to secrets.json and place in the directory containing analytics.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.