• Stars
    star
    663
  • Rank 67,991 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

DetectRTC is a tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc. https://www.webrtc-experiment.com/DetectRTC/

DetectRTC DetectRTC.js

DetectRTC | Is WebRTC Supported In Your Browser?

npm downloads Build Status: Linux

Live Demo: https://www.webrtc-experiment.com/DetectRTC/

if (DetectRTC.isWebRTCSupported === false) {
    alert('Please use Chrome or Firefox.');
}

if (DetectRTC.hasWebcam === false) {
    alert('Please install an external webcam device.');
}

if (DetectRTC.hasMicrophone === false) {
    alert('Please install an external microphone device.');
}

if (DetectRTC.hasSpeakers === false && (DetectRTC.browser.name === 'Chrome' || DetectRTC.browser.name === 'Edge')) {
    alert('Oops, your system can not play audios.');
}

What is this?

A tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc.

Free?

It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost.

Tests?

Releases?

How to install?

npm install detectrtc --production

# or via "bower"
bower install detectrtc

Proposed NEW API

DetectRTC.isSetSinkIdSupported                  // (implemented)
DetectRTC.isRTPSenderReplaceTracksSupported     // (implemented)
DetectRTC.isORTCSupported                       // (implemented)
DetectRTC.isRemoteStreamProcessingSupported     // (implemented)

DetectRTC.isWebsiteHasWebcamPermissions        // (implemented)
DetectRTC.isWebsiteHasMicrophonePermissions    // (implemented)

DetectRTC.audioInputDevices    // (implemented)
DetectRTC.audioOutputDevices   // (implemented)
DetectRTC.videoInputDevices    // (implemented)

// Below API are NOT implemented yet
DetectRTC.browser.googSupportedFlags.googDAEEchoCancellation
DetectRTC.browser.googSupportedFlags.echoCancellation
DetectRTC.isMediaHintsSupportsNewSyntax

LocalHost

node server.js

# or
npm start

# and open:
http://127.0.0.1:9001

# or
http://localhost:9001

NPM

var DetectRTC = require('detectrtc');

console.log(DetectRTC.browser);

DetectRTC.load(function() {
    console.log(DetectRTC);
});

Or try npm-test.js:

cd node_modules
cd detectrtc

# npm test
# or
node npm-test.js

How to link the script?

<script src="./node_modules/detectrtc/DetectRTC.js"></script>

<!-- or bower -->
<script src="./bower_components/detectrtc/DetectRTC.js"></script>

<!-- or RawGit (if CDN fails) -->
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>

<!-- Not Recommended -->
<script src="https://www.webrtc-experiment.com/DetectRTC.js"></script>

You can even link specific versions:

<script src="https://github.com/muaz-khan/DetectRTC/releases/download/1.4.1/DetectRTC.js"></script>

How to use it?

// for node.js users
var DetectRTC = require('detectrtc');

// non-nodejs users can skip above line
// below code will work for all users

DetectRTC.load(function() {
    DetectRTC.hasWebcam; // (has webcam device!)
    DetectRTC.hasMicrophone; // (has microphone device!)
    DetectRTC.hasSpeakers; // (has speakers!)
    DetectRTC.isScreenCapturingSupported; // Chrome, Firefox, Opera, Edge and Android
    DetectRTC.isSctpDataChannelsSupported;
    DetectRTC.isRtpDataChannelsSupported;
    DetectRTC.isAudioContextSupported;
    DetectRTC.isWebRTCSupported;
    DetectRTC.isDesktopCapturingSupported;
    DetectRTC.isMobileDevice;

    DetectRTC.isWebSocketsSupported;
    DetectRTC.isWebSocketsBlocked;
    DetectRTC.checkWebSocketsSupport(callback);

    DetectRTC.isWebsiteHasWebcamPermissions;        // getUserMedia allowed for HTTPs domain in Chrome?
    DetectRTC.isWebsiteHasMicrophonePermissions;    // getUserMedia allowed for HTTPs domain in Chrome?

    DetectRTC.audioInputDevices;    // microphones
    DetectRTC.audioOutputDevices;   // speakers
    DetectRTC.videoInputDevices;    // cameras

    DetectRTC.osName;
    DetectRTC.osVersion;

    DetectRTC.browser.name === 'Edge' || 'Chrome' || 'Firefox';
    DetectRTC.browser.version;
    DetectRTC.browser.isChrome;
    DetectRTC.browser.isFirefox;
    DetectRTC.browser.isOpera;
    DetectRTC.browser.isIE;
    DetectRTC.browser.isSafari;
    DetectRTC.browser.isEdge;

    DetectRTC.browser.isPrivateBrowsing; // incognito or private modes

    DetectRTC.isCanvasSupportsStreamCapturing;
    DetectRTC.isVideoSupportsStreamCapturing;

    DetectRTC.DetectLocalIPAddress(callback);
});

DetectRTC.version

DetectRTC is supporting version property since 1.4.1.

if(DetectRTC.version === '1.4.1') {
    alert('We are using DetectRTC version 1.4.1');
}

Why load method?

If you're not detecting audio/video input/output devices then you can skip this method.

DetectRTC.load simply makes sure that all devices are captured and valid result is set for relevant properties.

How to fix devices' labels?

You need to check for device.isCustomLabel boolean. If this boolean is true then assume that DetectRTC given a custom label to the device.

You must getUserMedia request whenever you find isCustomLabel===true. getUserMedia request will return valid device labels.

if (DetectRTC.MediaDevices[0] && DetectRTC.MediaDevices[0].isCustomLabel) {
    // it seems that we did not make getUserMedia request yet
    navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true
    }).then(function(stream) {
        var video;
        try {
            video = document.createElement('video');
            video.muted = true;
            video.src = URL.createObjectURL(stream);
            video.style.display = 'none';
            (document.body || document.documentElement).appendChild(vide);
        } catch (e) {}

        DetectRTC.load(function() {
            DetectRTC.videoInputDevices.forEach(function(device, idx) {
                // ------------------------------
                // now you get valid label here
                console.log(device.label);
                // ------------------------------
            });

            // release camera
            stream.getTracks().forEach(function(track) {
                track.stop();
            });

            if (video && video.parentNode) {
                video.parentNode.removeChild(video);
            }
        });
    });
} else {
    DetectRTC.videoInputDevices.forEach(function(device, idx) {
        console.log(device.label);
    });
}

How to select specific camera?

Demo: https://jsfiddle.net/cf90az9q/

<script src="https://www.webrtc-experiment.com/DetectRTC/CheckDeviceSupport.js"></script>
<script>
function selectSecondaryCamera() {
    checkDeviceSupport(function() {
        var secondDevice = videoInputDevices[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));
        });
    });
}
</script>

For further tricks & usages:

Rules to Contribute

mkdir DetectRTC
cd DetectRTC
git clone git://github.com/muaz-khan/DetectRTC.git ./

# install grunt for code style verifications
npm install grunt-cli

# install all dependencies
npm install --save-dev

# verify your changes
# npm test  # or "grunt"
grunt

# Success? Make a pull request!

Github

Tests powered by

Check tests here: https://travis-ci.org/muaz-khan/DetectRTC

License

DetectRTC.js is released under MIT licence . Copyright (c) Muaz Khan.

More Repositories

1

WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
JavaScript
11,736
star
2

RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
JavaScript
6,540
star
3

RTCMultiConnection

RTCMultiConnection is a WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)
JavaScript
2,555
star
4

Chrome-Extensions

WebRTC chrome extensions for screen sharing, screen recording, file sharing, youtube+audio sharing, etc.
JavaScript
1,077
star
5

WebRTC-Scalable-Broadcast

This module simply initializes socket.io and configures it in a way that single broadcast can be relayed over unlimited users without any bandwidth/CPU usage issues. Everything happens peer-to-peer!
JavaScript
533
star
6

Ffmpeg.js

Ffmpeg.js demos, both for browsers and node.js
JavaScript
487
star
7

MultiStreamsMixer

MultiStreamsMixer is a JavaScript library that allows you pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.
JavaScript
431
star
8

Canvas-Designer

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.
JavaScript
371
star
9

RTCMultiConnection-Server

RTCMultiConnection socket.io server (npm install rtcmulticonnection-server)
JavaScript
274
star
10

getStats

getStats is a tiny JavaScript library using WebRTC getStats API to return peer connection stats i.e. bandwidth usage, packets lost, local/remote ip addresses and ports, type of connection etc.
JavaScript
257
star
11

Translator

Translator.js is a JavaScript library built top on Google Speech-Recognition & Translation API to transcript and translate voice and text. It supports many locales and brings globalization in WebRTC! https://www.webrtc-experiment.com/Translator/
HTML
132
star
12

FileBufferReader

FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.
JavaScript
67
star
13

getScreenId

getScreenId | Capture Screen on Any Domain! This script is a hack used to support single chrome extension usage on any HTTPs domain.
HTML
63
star
14

MultiRTC

A skype-like RTCMultiConnection demo application.
JavaScript
62
star
15

DataChannel

DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more.
JavaScript
58
star
16

Conversation.js

Conversation.js is inspired by skype; and it provides simple events-like API to manage conversations, enable/disable media devices; add/download files; and do anything supported by Skype. It allows you open data conversation between two or more users using their user-ids.
JavaScript
49
star
17

Firefox-Extensions

(discontinued) Firefox extension API are used to enable screen capturing flag for your own domains!
JavaScript
45
star
18

WebSync-Signaling

WebSync is used as signaling gateway with/for WebRTC-Experiments e.g. RTCMultiConnection.js, DataChannel.js, Plugin-free screen sharing, and video conferencing.
JavaScript
42
star
19

ConcatenateBlobs

Simply pass array of blobs. This javascript library will concatenate all blobs in single Blob object.
HTML
39
star
20

WebRTC-ASPNET-MVC

A simple WebRTC one-to-one demo written in September, 2012! It supports public rooms as well as password-protected private rooms! MS-SQL database is used as signaling gateway!
JavaScript
37
star
21

XHR-Signaling

XHR/XMLHttpRequest based WebRTC signaling implementation.
C#
36
star
22

Reliable-Signaler

A reliable socketlio/node.js based signaling implementation for DataChannel.js, RTCMultiConnection.js and WebRTC Experiments.
JavaScript
32
star
23

RTCMultiConnection-SignalR

SignalR project for RTCMultiConnection
JavaScript
21
star
24

Everything

Everything from Muaz Khan β€” HTML5, CSS3, JavaScript, WebRTC, WebGL, Canvas2D, SVG, etc.
JavaScript
19
star
25

Curvature

Curvature is a tool lets you design bezier curves using Canvas 2d APIs!
JavaScript
17
star