Use OBS Virtual Camera with WebRTC in Browser

This article provides a step-by-step guide on how to configure and use the OBS Studio Virtual Camera as a video input source for local, browser-based WebRTC applications. You will learn how to activate the virtual camera in OBS, access it within a browser environment, and programmatically select it using the WebRTC API.

Step 1: Activate the OBS Virtual Camera

Before your browser can detect the camera, you must start the virtual feed from OBS Studio.

  1. Open OBS Studio.
  2. Set up your sources and scenes as desired.
  3. In the Controls dock (typically located in the bottom-right corner), click the Start Virtual Camera button.

Once clicked, OBS will create a virtual webcam device on your operating system that mirrors your active OBS program output.

Step 2: Ensure a Secure Context (Localhost)

Browsers restrict access to media devices like cameras and microphones to secure contexts. For a local WebRTC application, you must run your application via: * http://localhost * http://127.0.0.1 * An https:// protocol

If you attempt to open a local HTML file directly from your file system (e.g., file:///C:/index.html), the browser will block access to the virtual camera.

Step 3: Query and Select the OBS Camera in JavaScript

In your WebRTC application, you can use the navigator.mediaDevices API to detect the OBS Virtual Camera and set it as the video source.

1. Request initial permissions

To retrieve the actual names (labels) of the connected devices, you must first request permission from the user:

async function requestPermission() {
    await navigator.mediaDevices.getUserMedia({ video: true });
}

2. Locate the OBS Virtual Camera ID

Enumerate the system’s media devices and search for the device labeled “OBS Virtual Camera” (the exact name may vary slightly depending on your operating system):

async function getObsVirtualCameraId() {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === 'videoinput');
    
    // Search for "OBS" in the device label
    const obsCamera = videoDevices.find(device => 
        device.label.toLowerCase().includes('obs virtual camera') || 
        device.label.toLowerCase().includes('obs camera')
    );

    return obsCamera ? obsCamera.deviceId : null;
}

3. Stream the OBS Feed to WebRTC

Once you have the deviceId, pass it as a constraint to getUserMedia to get the media stream for your WebRTC connection:

async function startWebRTCStream() {
    try {
        await requestPermission(); // Ensure labels are accessible
        const obsDeviceId = await getObsVirtualCameraId();

        const constraints = {
            video: obsDeviceId ? { deviceId: { exact: obsDeviceId } } : true,
            audio: false // OBS Virtual Camera does not output audio
        };

        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        
        // Bind the stream to a local HTML video element
        const videoElement = document.getElementById('localVideo');
        videoElement.srcObject = stream;

        // Use this stream to add tracks to your RTCPeerConnection
        // peerConnection.addTrack(stream.getVideoTracks()[0], stream);
    } catch (error) {
        console.error('Error accessing OBS Virtual Camera:', error);
    }
}

Troubleshooting