Select Camera and Microphone Devices

Muaz Khan edited this page Feb 15, 2017 · 2 revisions

This wiki page explains how to select camera and microphone devices.

Version 3

var videoConstraints = {
    mandatory: {},
    optional: [{
        sourceId: 'video-device-id'
    }]
};

if (DetectRTC.browser.name === 'Firefox') {
    videoConstraints = {
        deviceId: 'video-device-id'
    };
}

var audioConstraints = {
    mandatory: {},
    optional: [{
        sourceId: 'audio-device-id'
    }]
};

if (DetectRTC.browser.name === 'Firefox') {
    audioConstraints = {
        deviceId: 'audio-device-id'
    };
}

connection.mediaConstraints = {
    video: videoConstraints,
    audio: audioConstraints
};

Version 2

connection._mediaSources.video = 'video-device-id';
connection._mediaSources.audio = 'audio-device-id';

Capture List of All Camera Devices

var skipDuplicateDevices = {};
DetectRTC.videoInputDevices.forEach(function(device) {
    if (skipDuplicateDevices[device.id]) return;
    skipDuplicateDevices[device.id] = true;

    var deviceName = device.label;
    var deviceSourceId = device.id;

    var videoConstraints = {
        mandatory: {},
        optional: [{
            sourceId: deviceSourceId
        }]
    };

    if (DetectRTC.browser.name === 'Firefox') {
        videoConstraints = {
            deviceId: deviceSourceId
        };
    }

    connection.mediaConstraints.video = videoConstraints;
});

DetectRTC.videoInputDevices.forEach(function(device) {
    if (skipDuplicateDevices[device.id]) return;
    skipDuplicateDevices[device.id] = true;

    var deviceName = device.label;
    var deviceSourceId = device.id;

    var audioConstraints = {
        mandatory: {},
        optional: [{
            sourceId: deviceSourceId
        }]
    };

    if (DetectRTC.browser.name === 'Firefox') {
        audioConstraints = {
            deviceId: deviceSourceId
        };
    }

    connection.mediaConstraints.audio = audioConstraints;
});

Points

  1. You can get list of all video input devices (cameras, etc) using DetectRTC.videoInputDevices array.
  2. You can get list of all audio input devices (microphones, etc) using DetectRTC.audioInputDevices array.
  3. You MUST allow your users to select valid microphone and camera devices.
  4. Using v3, you MUST set connection.mediaConstraints as stated on above section.
  5. You v2, you must set connection._mediaSources instead. Which accepts two objects:
connection._mediaSources = {
   audio: 'audio-device-id',
   video: 'video-device-id'
};

Before calling addStream

You MUST set connection.mediaConstraints or connection._mediaSources before adding new streams. E.g.

// using v2
connection._mediaSources.video = 'new-camera-id';
connection.addStream({ video: true });

// using v3
connection.mediaConstraints.video.optional = [{
   sourceId: 'new-camera-id'
}];
connection.addStream({ video: true });

Important Points

  1. Never pass two sourceId optional parameters. That's why always override connection.mediaConstraints.video.optional array.
// using v3 ---- do NOT "push", instead override/reset "optional" array
connection.mediaConstraints.video.optional = [{
   sourceId: 'new-camera-id'
}];
connection.addStream({ video: true });

Capture All Devices using One Array

You can use DetectRTC.MediaDevices that returns list of:

  1. All audio input devices (microphones)
  2. All audio output devices (speakers)
  3. All video input devices (cameras)

Change Resolutions

var videoConstraints = {
    mandatory: {
        minWidth: 1920,
        minHeight: 1080,
        minAspectRatio: 1.77,
        minFrameRate: 32
    },
    optional: [{
        sourceId: 'camera-source-id'
    }]
};

var audioConstraints = {
    mandatory: {},
    optional: []
};

if (DetectRTC.browser.name === 'Firefox') {
    videoConstraints = {
        with: 1920,
        height: 1080,
        frameRate: 32,
        deviceId: 'camera-source-id'
    };
    audioConstraints= true;
}

connection.mediaConstraints = {
    video: videoConstraints,
    audio: audioConstraints
};
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.