WebRTC

https://webrtc.org/
Admin
WebRTC is a free, open-source project that provides browsers and mobile applications with real-time...
Tokens:12,982
Snippets:180
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Example Usage: Opening a Camera

Source: https://webrtc.org/getting-started/media-devices

This example demonstrates how to get connected video devices and then open the first available camera with a resolution of 1280x720. This requires the `getConnectedDevices` and `openCamera` functions to be defined.

```javascript
const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}
```

--------------------------------

### Install Firebase CLI

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Install the Firebase Command Line Interface globally using npm. You might need to use sudo if the command fails.

```sh
npm -g install firebase-tools
```

--------------------------------

### Verify Firebase CLI Installation

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Check if the Firebase CLI has been installed correctly by running the version command. Ensure the version is 6.7.1 or later.

```sh
firebase --version
```

--------------------------------

### Set up asynchronous signaling channel

Source: https://webrtc.org/getting-started/peer-connections

This snippet demonstrates how to set up an asynchronous communication channel for exchanging messages during the peer connection setup process. It shows how to create a channel, listen for incoming messages, and send messages to a remote client.

```javascript
// Set up an asynchronous communication channel that will be
// used during the peer connection setup
const signalingChannel = new SignalingChannel(remoteClientId);
signalingChannel.addEventListener('message', message => {
    // New message from remote client received
});

// Send an asynchronous message to the remote client
signalingChannel.send('Hello!');

```

--------------------------------

### Get MediaStream with Async/Await

Source: https://webrtc.org/getting-started/media-devices

Use `getUserMedia()` with async/await for a more synchronous-looking way to request access to the default camera and microphone. Handles potential errors like permission denial or no matching devices.

```javascript
const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}

```

--------------------------------

### Get MediaStream with Promises

Source: https://webrtc.org/getting-started/media-devices

Use `getUserMedia()` with Promises to request access to the default camera and microphone. This will trigger a permissions request.

```javascript
const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

```

--------------------------------

### Get Connected Video Input Devices (Promise)

Source: https://webrtc.org/getting-started/media-devices

Fetches a list of video input devices using Promises. Useful for initial device selection.

```javascript
function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
```

--------------------------------

### Get Connected Video Input Devices (Async/Await)

Source: https://webrtc.org/getting-started/media-devices

Fetches a list of video input devices using async/await. Suitable for modern JavaScript environments.

```javascript
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);
```

--------------------------------

### Run Local Firebase Server

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Start the local development server for Firebase Hosting. This command serves your web app from http://localhost:5000.

```sh
firebase serve --only hosting
```

--------------------------------

### Get Media Stream from Camera and Microphone

Source: https://webrtc.org/getting-started/overview

Use `navigator.mediaDevices.getUserMedia()` to capture `MediaStream` from video cameras and microphones. Ensure you have the necessary permissions.

```javascript
const constraints = {
  audio: true,
  video: true
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    const video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = function() {
      video.play();
    };
  })
  .catch(function(err) {
    console.error(err.name + ": " + err.message);
  });
```

--------------------------------

### Add Local Tracks to RTCPeerConnection

Source: https://webrtc.org/getting-started/remote-streams

Add media tracks from a local stream to an RTCPeerConnection. This setup can be done before the connection is established.

```javascript
const localStream = await getUserMedia({video: true, audio: true});
const peerConnection = new RTCPeerConnection(iceConfig);
localStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, localStream);
});

```

--------------------------------

### Get Camera with Exact Resolution

Source: https://webrtc.org/getting-started/media-capture-and-constraints

Requests a camera stream with the exact resolution of 1024x768. Only streams matching this exact resolution will be returned.

```json
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}
```

--------------------------------

### Get Camera with Ideal Resolution

Source: https://webrtc.org/getting-started/media-capture-and-constraints

Requests a camera stream with a resolution as close as possible to 640x480. The browser will attempt to find the best match.

```json
{
    "video": {
        "width": 640,
        "height": 480
    }
}
```

--------------------------------

### Get Display Media Stream for Screen Recording

Source: https://webrtc.org/getting-started/overview

Use `navigator.mediaDevices.getDisplayMedia()` to capture screen content for recording or streaming. This API requires user consent to share the screen.

```javascript
const displayMediaConstraints = {
  video: true
};

navigator.mediaDevices.getDisplayMedia(displayMediaConstraints)
  .then(function(mediaStream) {
    const screenVideo = document.querySelector('#screenVideo');
    screenVideo.srcObject = mediaStream;
    screenVideo.onloadedmetadata = function() {
      screenVideo.play();
    };
  })
  .catch(function(err) {
    console.error(err.name + ": " + err.message);
  });
```

--------------------------------

### Get Camera with Resolution Range

Source: https://webrtc.org/getting-started/media-capture-and-constraints

Requests a camera stream with a resolution within the specified range (640x480 to 1024x768). The browser selects the best fit within this range.

```json
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}
```

--------------------------------

### Handle Incoming Offer and Send Answer

Source: https://webrtc.org/getting-started/peer-connections

Receives an SDP offer, sets it as the remote description, creates an SDP answer, sets it as the local description, and sends it back to the calling peer.

```javascript
const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
    if (message.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.send({'answer': answer});
    }
});

```

--------------------------------

### Create a New Branch and Commit Changes

Source: https://webrtc.org/support/contributing

Before uploading your first patch, create a new branch for your work, make changes, commit them, and then upload the changes for review.

```bash
git checkout -b my-work-branch
# Make changes, build locally, run tests locally
git commit -am "Changed x, and it is working"
git cl upload
```

--------------------------------

### Chrome Launch Arguments for Testing

Source: https://webrtc.org/getting-started/testing

Useful arguments for launching Chrome during automated WebRTC testing. These include options for file access, fake media streams, and headless mode.

```bash
--allow-file-access-from-files
--disable-translate
--use-fake-ui-for-media-stream
--use-file-for-fake-audio-capture=<filename>
--use-file-for-fake-video-capture=<filename>
--headless
--mute-audio
```

--------------------------------

### Create Peer Connection and Send Offer

Source: https://webrtc.org/getting-started/peer-connections

Initiates a WebRTC call by creating an RTCPeerConnection, setting up a listener for incoming answers, creating an SDP offer, setting it as the local description, and sending it over the signaling channel.

```javascript
async function makeCall() {
    const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
    const peerConnection = new RTCPeerConnection(configuration);
    signalingChannel.addEventListener('message', async message => {
        if (message.answer) {
            const remoteDesc = new RTCSessionDescription(message.answer);
            await peerConnection.setRemoteDescription(remoteDesc);
        }
    });
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingChannel.send({'offer': offer});
}

```

--------------------------------

### HTML for Local Video Playback

Source: https://webrtc.org/getting-started/media-devices

This is the basic HTML structure required for local video playback using `getUserMedia`. The `autoplay` and `playsinline` attributes are recommended for seamless playback, and `controls="false"` is suitable for live streams.

```html
<html>
<head><title>Local video playback</title></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>
```

--------------------------------

### Create a Data Channel

Source: https://webrtc.org/getting-started/data-channels

Create a new data channel on an existing RTCPeerConnection. This is the first step in establishing a data channel connection.

```javascript
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

```

--------------------------------

### Open Camera with Specific Constraints

Source: https://webrtc.org/getting-started/media-devices

This function opens a video camera with specified constraints, including device ID, minimum width, and minimum height. It also enables echo cancellation for audio. Ensure you have a camera device available and pass its ID.

```javascript
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}
```

--------------------------------

### Listen for Media Device Changes and Update UI

Source: https://webrtc.org/getting-started/media-devices

Fetches media devices, updates a select element, and listens for device changes to refresh the list. Requires a 'select' element with id 'availableCameras'.

```javascript
// Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
avigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});
```

--------------------------------

### Navigate to FirebaseRTC Directory

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Change the current directory to the cloned FirebaseRTC project. This is the base directory for all subsequent commands.

```bash
cd FirebaseRTC

```

--------------------------------

### Handle Data Channel Open and Close Events

Source: https://webrtc.org/getting-started/data-channels

Wait for the 'open' event before sending data and listen for the 'close' event to know when the channel is no longer available. This ensures reliable communication.

```javascript
const messageBox = document.querySelector('#messageBox');
const sendButton = document.querySelector('#sendButton');
const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

// Enable textarea and button when opened
dataChannel.addEventListener('open', event => {
    messageBox.disabled = false;
    messageBox.focus();
    sendButton.disabled = false;
});

// Disable input when closed
dataChannel.addEventListener('close', event => {
    messageBox.disabled = false;
    sendButton.disabled = false;
});

```

--------------------------------

### Associate App with Firebase Project

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Connect your local application to your Firebase project by adding a project alias. Use 'default' as the alias for this codelab.

```sh
firebase use --add
```

--------------------------------

### Create a New Room with Offer

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Creates a new room in Cloud Firestore, generates a room ID, and sets the caller's offer as the local description.

```javascript
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`

```

--------------------------------

### Check Git Credentials

Source: https://webrtc.org/support/contributing

Verify your Git credentials before submitting code. This command helps ensure your configuration is correct for interacting with the code review server.

```bash
git cl creds-check
```

--------------------------------

### Enumerate and Filter Media Devices

Source: https://webrtc.org/getting-started/media-devices

This function retrieves a list of all connected media devices and filters them by type (e.g., 'videoinput', 'audioinput'). Use this to identify available devices before requesting media.

```javascript
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}
```

--------------------------------

### Clone FirebaseRTC GitHub Repository

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Clone the starter code for the FirebaseRTC codelab from GitHub. This command downloads the project files to your local machine.

```bash
git clone https://github.com/webrtc/FirebaseRTC

```

--------------------------------

### Play Video from Camera

Source: https://webrtc.org/getting-started/media-devices

This JavaScript function captures video and audio from the camera and plays it in a local video element. Ensure a video element with the ID 'localVideo' exists in your HTML.

```javascript
async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}
```

--------------------------------

### Update and Re-upload Changes

Source: https://webrtc.org/support/contributing

After receiving feedback on a code review, make the necessary changes, commit them, and re-upload the patch for further review.

```bash
git commit -am "Fixed X and Y"
git cl upload
```

--------------------------------

### Collect and Exchange ICE Candidates

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Collects ICE candidates from the WebRTC API and adds them to the database, while also listening for remote ICE candidates and adding them to the RTCPeerConnection. It's important to filter for new additions to avoid duplicate candidates.

```javascript
async function collectIceCandidates(roomRef, peerConnection,
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event => {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}
```

--------------------------------

### Handle Local and Remote ICE Candidates in WebRTC

Source: https://webrtc.org/getting-started/peer-connections

Listen for local ICE candidates and send them to the signaling server. Also, listen for remote ICE candidates from the signaling server and add them to the local RTCPeerConnection.

```javascript
// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});

```

--------------------------------

### Configure RTCPeerConnection with TURN Server

Source: https://webrtc.org/getting-started/turn-server

Use this configuration when your WebRTC application needs to relay traffic through a TURN server. Ensure the username and credential are provided for secure server access.

```javascript
const iceConfiguration = {
    iceServers: [
        {
            urls: 'turn:my-turn-server.mycompany.com:19403',
            username: 'optional-username',
            credential: 'auth-token'
        }
    ]
}

const peerConnection = new RTCPeerConnection(iceConfiguration);
```

--------------------------------

### Create Answer and Update Room

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Creates an RTCSessionDescription for the answer and updates the room in the database. This is triggered when a callee receives an offer.

```javascript
const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);
```

--------------------------------

### Authorize Firebase CLI

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Log in to your Firebase account using the Firebase CLI to authorize it for project management.

```sh
firebase login
```

--------------------------------

### Receive a Data Channel

Source: https://webrtc.org/getting-started/data-channels

Listen for the 'datachannel' event on the RTCPeerConnection to receive data channels from the remote peer. The channel is available in the event's 'channel' property.

```javascript
const peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('datachannel', event => {
    const dataChannel = event.channel;
});

```

--------------------------------

### Display Media Constraints

Source: https://webrtc.org/getting-started/media-capture-and-constraints

Specifies constraints for screen capturing, such as whether to include the cursor and the type of display surface to capture. Not all browsers may support these specific constraints.

```json
{
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}
```

--------------------------------

### Listen for RTCPeerConnection Connection State

Source: https://webrtc.org/getting-started/peer-connections

Add an event listener to your RTCPeerConnection to detect when the connection state changes to 'connected'. This is useful for knowing when communication can begin.

```javascript
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});
```

--------------------------------

### SdpSemantics Enum and RTCConfiguration

Source: https://webrtc.org/getting-started/unified-plan-transition-guide

Defines the SdpSemantics enum and extends RTCConfiguration to include the sdpSemantics attribute. Use this to configure RTCPeerConnection for Unified Plan.

```javascript
enum SdpSemantics {
  "plan-b",
  "unified-plan"
};


partial dictionary RTCConfiguration {
   SdpSemantics sdpSemantics;
}
```

--------------------------------

### Receive and Display Remote Tracks

Source: https://webrtc.org/getting-started/remote-streams

Listen for the 'track' event on the RTCPeerConnection to receive remote media streams. Assign the stream to the srcObject of a video element to display it.

```javascript
const remoteVideo = document.querySelector('#remoteVideo');

peerConnection.addEventListener('track', async (event) => {
    const [remoteStream] = event.streams;
    remoteVideo.srcObject = remoteStream;
});

```

--------------------------------

### Firefox Preferences for WebRTC Testing

Source: https://webrtc.org/getting-started/testing

Configuration preferences for Firefox when running automated WebRTC tests. These settings disable caching, enable fake media streams, and disable update checks.

```json
{
    "prefs": {
        "browser.cache.disk.enable": false,
        "browser.cache.disk.capacity": 0,
        "browser.cache.disk.smart_size.enabled": false,
        "browser.cache.disk.smart_size.first_run": false,
        "browser.sessionstore.resume_from_crash": false,
        "browser.startup.page": 0,
        "media.navigator.streams.fake": true,
        "media.navigator.permission.disabled": true,
        "device.storage.enabled": false,
        "media.gstreamer.enabled": false,
        "browser.startup.homepage": "about:blank",
        "browser.startup.firstrunSkipsHomepage": false,
        "extensions.update.enabled": false,
        "app.update.enabled": false,
        "network.http.use-cache": false,
        "browser.shell.checkDefaultBrowser": false
    }
}
```

--------------------------------

### Listen for Callee's Answer

Source: https://webrtc.org/getting-started/firebase-rtc-codelab

Listens for changes in the Firestore room document and sets the callee's answer as the remote description on the caller's RTCPeerConnection.

```javascript
roomRef.onSnapshot(async snapshot => {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});

```

--------------------------------

### Send a Message on a Data Channel

Source: https://webrtc.org/getting-started/data-channels

Use the 'send()' method on an RTCDataChannel to transmit data. The data can be a string, Blob, ArrayBuffer, or ArrayBufferView.

```javascript
const messageBox = document.querySelector('#messageBox');
const sendButton = document.querySelector('#sendButton');

// Send a simple text message when we click the button
sendButton.addEventListener('click', event => {
    const message = messageBox.textContent;
    dataChannel.send(message);
})

```

--------------------------------

### Receive Messages on a Data Channel

Source: https://webrtc.org/getting-started/data-channels

Listen for the 'message' event on an RTCDataChannel to receive data sent by the remote peer. The received data is available in the event's 'data' property.

```javascript
const incomingMessages = document.querySelector('#incomingMessages');

const peerConnection = new RTCPeerConnection(configuration);
const dataChannel = peerConnection.createDataChannel();

// Append new messages to the box of incoming messages
dataChannel.addEventListener('message', event => {
    const message = event.data;
    incomingMessages.textContent += message + '\n';
});

```
Tokens:
Raw