Convert Figma logo to code with AI

webrtc logosamples

WebRTC Web demos and samples

13,956
5,707
13,956
43

Top Related Projects

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!

📡 Simple WebRTC video, voice, and data channels

12,311

Simple peer-to-peer with WebRTC.

Jitsi Meet - Secure, Simple and Scalable Video Conferences that you use as a standalone app or embed in your web application.

node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87

Quick Overview

WebRTC Samples is a collection of WebRTC code samples and demos to help developers understand and implement real-time communication features in web applications. It showcases various WebRTC APIs and functionalities, providing practical examples for audio/video communication, data channels, and more.

Pros

  • Comprehensive set of examples covering various WebRTC features
  • Well-documented and regularly updated to reflect the latest WebRTC standards
  • Serves as an excellent learning resource for both beginners and experienced developers
  • Demonstrates best practices and common use cases for WebRTC implementation

Cons

  • Some examples may require additional setup or specific browser versions
  • Not a complete WebRTC framework or library, focusing mainly on demonstrating API usage
  • May not cover all edge cases or complex scenarios encountered in production environments

Code Examples

  1. Basic getUserMedia usage:
async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

getMedia({
  audio: true,
  video: true
});
  1. Creating a simple peer connection:
const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};
const pc = new RTCPeerConnection(configuration);

pc.onicecandidate = event => {
  if (event.candidate) {
    // Send the candidate to the remote peer
  }
};

pc.ontrack = event => {
  // Attach the received media to a video element
  document.querySelector('#remoteVideo').srcObject = event.streams[0];
};
  1. Using a data channel:
const dataChannel = pc.createDataChannel("myDataChannel");

dataChannel.onopen = () => {
  console.log("Data channel is open");
};

dataChannel.onmessage = event => {
  console.log("Received message:", event.data);
};

// Sending a message
dataChannel.send("Hello, WebRTC!");

Getting Started

To get started with WebRTC Samples:

  1. Clone the repository:

    git clone https://github.com/webrtc/samples.git
    
  2. Navigate to the project directory:

    cd samples
    
  3. Start a local server (e.g., using Python):

    python -m http.server 8080
    
  4. Open a web browser and visit http://localhost:8080 to explore the samples.

  5. Choose a sample and open its HTML file to view the code and run the demo.

Competitor Comparisons

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!

Pros of WebRTC-Experiment

  • More comprehensive collection of demos and examples
  • Includes additional features like screen sharing and audio/video recording
  • Provides ready-to-use solutions for common WebRTC use cases

Cons of WebRTC-Experiment

  • Less frequently updated compared to samples
  • May not always reflect the latest WebRTC standards and best practices
  • Documentation can be less structured and harder to navigate

Code Comparison

WebRTC-Experiment (RTCPeerConnection):

var connection = new RTCPeerConnection(null);
connection.addStream(stream);
connection.createOffer(function(offer) {
    connection.setLocalDescription(offer);
    sendSignalingMessage(offer);
}, onSdpError);

samples (RTCPeerConnection):

const pc = new RTCPeerConnection();
stream.getTracks().forEach(track => pc.addTrack(track, stream));
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
signaling.send({type: 'offer', sdp: offer.sdp});

Both repositories provide valuable resources for WebRTC developers. samples focuses on up-to-date, standard-compliant examples, while WebRTC-Experiment offers a wider range of features and ready-made solutions. The choice between them depends on specific project requirements and the need for cutting-edge implementations versus comprehensive examples.

📡 Simple WebRTC video, voice, and data channels

Pros of simple-peer

  • Simpler API and easier to use for beginners
  • Abstracts away much of the WebRTC complexity
  • Smaller codebase, making it more maintainable

Cons of simple-peer

  • Less flexible for advanced use cases
  • Fewer examples and less comprehensive documentation
  • May not cover all WebRTC features and scenarios

Code Comparison

simple-peer:

const peer = new SimplePeer({ initiator: true })
peer.on('signal', data => {
  // send signal data to peer
})
peer.on('connect', () => {
  peer.send('hello')
})

samples:

const pc = new RTCPeerConnection(configuration)
pc.createOffer().then(offer => {
  return pc.setLocalDescription(offer)
}).then(() => {
  // send offer to peer
})

Summary

simple-peer is more beginner-friendly and abstracts away WebRTC complexity, making it easier to implement basic peer-to-peer connections. However, it may lack flexibility for advanced use cases.

samples provides more comprehensive examples and covers a wider range of WebRTC features, but has a steeper learning curve and requires more code to implement basic functionality.

Choose simple-peer for quick prototyping or simpler projects, and samples for more complex applications or when you need fine-grained control over WebRTC features.

12,311

Simple peer-to-peer with WebRTC.

Pros of PeerJS

  • Simplified API for WebRTC peer-to-peer connections
  • Abstracts away complex WebRTC setup and signaling
  • Easier to get started for beginners

Cons of PeerJS

  • Less flexibility and control over low-level WebRTC features
  • May not support all advanced WebRTC capabilities
  • Dependency on PeerJS server for signaling

Code Comparison

PeerJS:

const peer = new Peer();
const conn = peer.connect('peer-id');
conn.on('open', () => {
  conn.send('Hello!');
});

WebRTC Samples:

const pc = new RTCPeerConnection();
pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => {
    // Send offer to remote peer
  });

Summary

PeerJS simplifies WebRTC implementation with an easy-to-use API, making it ideal for quick prototypes and simpler applications. However, it sacrifices some flexibility and advanced features.

WebRTC Samples provides more comprehensive examples of raw WebRTC usage, offering greater control and access to advanced features. It's better suited for complex applications or when full WebRTC capabilities are needed.

Choose PeerJS for rapid development and ease of use, or WebRTC Samples for more control and advanced functionality.

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

  • Full-featured video conferencing solution with advanced capabilities
  • Active development and regular updates
  • Large community and extensive documentation

Cons of jitsi-meet

  • More complex setup and configuration
  • Steeper learning curve for beginners
  • Heavier resource usage due to comprehensive features

Code Comparison

jitsi-meet (React-based UI component):

import React from 'react';
import { Video } from 'features/base/media';

const LocalVideo = () => (
  <Video
    className="localVideo"
    id="localVideo_container"
    videoTrack={{ jitsiTrack: _localVideoTrack }}
  />
);

webrtc/samples (Vanilla JavaScript):

const localVideo = document.getElementById('localVideo');
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
  })
  .catch(error => console.error('Error accessing media devices:', error));

The jitsi-meet example shows a React component for local video, while the webrtc/samples code demonstrates basic WebRTC functionality using vanilla JavaScript. jitsi-meet provides a more abstracted and feature-rich approach, while webrtc/samples offers simpler, more direct WebRTC implementations.

node-webrtc is a Node.js Native Addon that provides bindings to WebRTC M87

Pros of node-webrtc

  • Enables WebRTC functionality in Node.js environments
  • Provides a native C++ implementation for better performance
  • Allows server-side WebRTC applications without a browser

Cons of node-webrtc

  • Steeper learning curve due to C++ integration
  • Limited to Node.js environments, less versatile than browser-based solutions
  • Requires additional setup and dependencies

Code Comparison

node-webrtc:

const wrtc = require('node-webrtc');
const pc = new wrtc.RTCPeerConnection();
pc.createOffer().then(offer => {
  pc.setLocalDescription(offer);
});

samples:

const pc = new RTCPeerConnection();
pc.createOffer().then(offer => {
  pc.setLocalDescription(offer);
});

Summary

node-webrtc brings WebRTC capabilities to Node.js, offering better performance through native C++ implementation. It's ideal for server-side WebRTC applications but has a steeper learning curve. samples provides browser-based WebRTC examples, making it more accessible and versatile for web developers. The code comparison shows that while the basic usage is similar, node-webrtc requires an additional import and slightly different syntax.

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

WebRTC Code Samples

This is a repository for the WebRTC JavaScript code samples. All of the samples can be tested from webrtc.github.io/samples.

To run the samples locally

npm install && npm start

and open your browser on the page indicated.

Contributing

We welcome contributions and bugfixes. Please see CONTRIBUTING.md for details.

Bugs

If you encounter a bug or problem with one of the samples, please submit a new issue so we know about it and can fix it.

Please avoid submitting issues on this repository for general problems you have with WebRTC. If you have found a bug in the WebRTC APIs, please see webrtc.org/bugs for how to submit bugs on the affected browsers. If you need support on how to implement your own WebRTC-based application, please see the discuss-webrtc Google Group.