WebRTCPedia! the Encyclopedia! ® Muaz Khan

HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

MediaStream.stop is obsolete or removed; how to fix it?

var MediaStream = window.MediaStream;

if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
    MediaStream = webkitMediaStream;
}

if (typeof MediaStream !== 'undefined' && !('stop' in MediaStream.prototype)) {
    MediaStream.prototype.stop = function() {
        this.getAudioTracks().forEach(function(track) {
            track.stop();
        });

        this.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    };
}

Now, feel free to use stream.stop:

stream.addEventListener('ended', function() {
    alert('Stream is stopped.');
}, false);

stream.stop();
via: http://stackoverflow.com/a/11646945/552182

How to check if website already has privileges to access camera/microphone?

// link: https://cdn.webrtc-experiment.com/DetectRTC/checkDevicesSupport.js

// check for microphone/camera support!
checkDeviceSupport(function() {
    document.write('hasWebCam: ', hasWebcam, '<br>');
    document.write('hasMicrophone: ', hasMicrophone, '<br>');
    document.write('isWebsiteHasWebcamPermissions: ', isWebsiteHasWebcamPermissions, '<br>');
    document.write('isWebsiteHasMicrophonePermissions: ', isWebsiteHasMicrophonePermissions, '<br>');
});
via: http://stackoverflow.com/a/30047627/552182

How to manage audio/video bitrates?

// Link this Library:
// https://cdn.webrtc-experiment.com/BandwidthHandler.js

// here is how to use it
var bandwidth = {
    screen: 300, // 300kbits minimum
    audio: 50, // 50kbits  minimum
    video: 256 // 256kbits (both min-max)
};
var isScreenSharing = false;

sdp = BandwidthHandler.setApplicationSpecificBandwidth(sdp, bandwidth, isScreenSharing);
sdp = BandwidthHandler.setVideoBitrates(sdp, {
    min: bandwidth.video,
    max: bandwidth.video
});
sdp = BandwidthHandler.setOpusAttributes(sdp);

How to set audio sdp parameters?

sdp = BandwidthHandler.setOpusAttributes(sdp, {
    'stereo': 0, // to disable stereo (to force mono audio)
    'sprop-stereo': 1,
    'maxaveragebitrate': 500 * 1024 * 8, // 500 kbits
    'maxplaybackrate': 500 * 1024 * 8, // 500 kbits
    'cbr': 0, // disable cbr
    'useinbandfec': 1, // use inband fec
    'usedtx': 1, // use dtx
    'maxptime': 3
});
via: http://stackoverflow.com/a/16868123/552182

How to fix Chrome camera/microphone failures?

# open this page
chrome://settings/content#media-stream-mic
via: http://stackoverflow.com/a/14617402/552182

How to detect local or remote stream?

// chrome 48+
var isRemoteAudioStream = false;
stream.getAudioTracks().forEach(function(track) {
    if (track.remote === true) {
        isRemoteAudioStream = true;
    }
});

var isRemoteVideoStream = false;
stream.getVideoTracks().forEach(function(track) {
    if (track.remote === true) {
        isRemoteVideoStream = true;
    }
});

alert('Remote audio stream? ' + isRemoteAudioStream);
alert('Remote video stream? ' + isRemoteVideoStream);

How to capture audio+screen in a single getUserMedia request?

// firefox 38+
var screen = {
    mediaSource: 'monitor' // monitor or window
};

var constraints = {
    video: screen,
    audio: true
};

navigator.mozGetUserMedia(constraints, successCallback, failureCallback);

How to display HTMLVideoElement poster?

htmlVideoElement.src = null;
htmlVideoElement.pause();

// above two lines are mandatory
htmlVideoElement.poster = '/muted.png';

Before sending data over RTC-data-channels

// define below snippet as soon as you invoked "peer.createDataChannel" method

// first step: take a reference to original "send" method
channel.internalSend = channel.send;

// define your own "send" wrapper
channel.send = function(data) {
    // check for "readyState==open"
    if(channel.readyState !== 'open') {
        // make sure that peer is NOT closed
        if(peer.iceConnectionState.search(/disconnected|closed|failed/gi) !== -1) {
            return;
        }

        // retry after 1-second
        setTimeout(function() {
            channels.send(data);
        }, 1000);

        return;
    }

    // send data using real data-channel object
    channel.internalSend(data);
};

Modify streams without "remaking" getUserMedia request

// supported only in firefox 43+

var originalStream = window.yourOrigianlStream;

// change from 360p to 720p
function changeVideoStreamTo720p() {
    var videoConstraints = {
        width: { min: 1280 },
        height: { min: 720 }
    };

    originalStream.getVideoTracks().forEach(function(track) {
        track.applyConstraints(videoConstraints);
    });
}

function showFrontCamera() {
    var videoConstraints = {
        facingMode: { exact: 'user' }
    };

    originalStream.getVideoTracks().forEach(function(track) {
        track.applyConstraints(videoConstraints);
    });
}

function showRearCamera() {
    var videoConstraints = {
        facingMode: { exact: 'environment' }
    };

    originalStream.getVideoTracks().forEach(function(track) {
        track.applyConstraints(videoConstraints);
    });
}

Capture Rear or Front Camera

// supported only in firefox 43+

#1 capture rear camera
var videoConstraints = {
    facingMode: { exact: 'environment' }
};
navigator.mozGetUserMedia({ video: videoConstraints }, onSuccessCallback, onFailureCallback);

#1 capture front camera
var videoConstraints = {
    facingMode: { exact: 'user' }
};
navigator.mozGetUserMedia({ video: videoConstraints }, onSuccessCallback, onFailureCallback);

Select Secondary (2nd) Camera

function select2ndCamera() {
    // link: https://cdn.webrtc-experiment.com/DetectRTC/checkDeviceSupport.js

    // LIVE Demo for this function
    // https://jsfiddle.net/cf90az9q/

    checkDeviceSupport(function() {
        var videoDevices = [];
        MediaDevices.forEach(function(device) {
            if(device.kind === 'videoinput') {
                videoDevices.push(device);
            }
        });

        var secondDevice = videoDevices[1];
        if(!secondDevice) return alert('Secondary webcam is NOT available.');

        var videoConstraints = {
            deviceId: secondDevice.deviceId
        };

        if(!!navigator.webkitGetUserMedia) {
            videoConstraints = {
                mandatory: {},
                optional: [{
                    sourceId: secondDevice.deviceId
                }]
            }
        }

        navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
        navigator.getUserMedia({ video: videoConstraints }, function(stream) {
            // 
        }, function(error) {
            alert(JSON.stringify(error));
        });
    });
}
  1. Maximum peer connections limit is 256.
  2. Opus codec minimum bandwidth is 6kbit/s
  3. Opus codec maximum bandwidth is 510kbits/s
  4. Vp8 codec minimum bandwidth is 100kbits/s
  5. Vp8 codec maximum bandwidth is 2000+ kbits/s
    1. 720p at 30 FPS causes 1.0-to-2.0 Mbps bandwidth usage
    2. 360p at 30 FPS causes 0.5-to-1.0 Mbps bandwidth usage
    3. 180p at 30 FPS causes 0.1-to-0.5 Mbps bandwidth usage
  6. Maximum bandwidth used by each RTP port is 1MB.
  7. Only one media source i.e. "APM" is permitted.
  8. WebRTC currently uses UDP for RTP transmission.
  9. Maximum video bitrate on chrome is about 2Mb/s (i.e. 2000kbits/s).
  10. Minimum video bitrate on chrome is .05Mb/s (i.e. 50kbits/s).
  11. Starting video bitrate on chrome is .3Mb/s (i.e. 300kbits/s).
  12. Each RTP port is using 1 MB bandwidth. It means that 4 MB bandwidth is acquired by each peer.
  13. Maximum external video condecs can be used on chrome is 8.
  14. Maximum simulcast streams limit is 4.
  15. In peer-to-server connection; you can catch DTLS/SRTP (i.e. RTP/RTCP) pacekts as binary-stream.
  16. "peer.removeStream" Removes a stream from the PeerConnection. If the stream parameter is absent, removes the stream that was most recently added to the PeerConnection.
  17. Opus uses both mono and stereo codecs. Mono bitrate for opus on chrome is 32000 and stereo bitrate is 64000.
  18. According to draft "draft-spittka-payload-rtp-opus-03", "Opus bitrate should be in the range between 6000 and 510000", that's why opus min bitrate on chrome is 6000 and max bitrate is 510000.
  19. SCTP pacekt max size is 1280.
  20. Data max bandwidth is 30720 bps.
  21. You can set following resolutions (min/max width/height):
    1. 1920:1080
    2. 1280:720
    3. 960:720
    4. 640:360
    5. 640:480
    6. 320:240
    7. 320:180
    Maybe:
    1. 1280:800
    2. 1280:720
    3. 960:600
    4. 960:540
    5. 640:400
    6. 640:360
    7. 640:480
    8. 480:300
    9. 480:270
    10. 480:360
    11. 320:200
    12. 320:180
    13. 320:240
    14. 240:150
    15. 240:135
    16. 240:180
    17. 160:100
    18. 160:90
    19. 160:120
  22. Following buffer-sizes are allowed (used in RecordRTC):
    1. 256
    2. 512
    3. 1024
    4. 2048
    5. 4096
    6. 8192
    7. 16384
  23. SampleRate must be in the range 22050 to 96000 (used in RecordRTC).
  24. Possible media m-lines:
    1. m=audio
    2. m=video
    3. m=application
    4. m=data
    5. m=control
    6. m=radius
    7. m=tacacs
    8. m=diameter
    9. m=NAS_L2TP
    10. m=NAS_LOGIN
    11. m=NAS_NONE
    12. m=image

Suggestions

  1. If you're newcomer, newbie or beginner; you're suggested to try RTCMultiConnection.js or DataChannel.js libraries.

Latest Updates

Feedback

Enter your email too; if you want "direct" reply!