• Translate

6/01/2017

Tutorial How to Detect Webcam, Microphone, Speaker, OS, Screen Resolution and Browser with Javascript

Tutorial Web Design |

Advertisement

How to detect system components such as webcam, microphone, speakers, operating system, screen resolution and browser used by user with Javascript. Modern web-based applications that develop today are highly interactive, where users can chat directly with real time interactive audio and video.

WebRTC is an open framework for web purposes that allows realtime communication via a browser. This includes basic building blocks for high quality communications on the website, such as network components, audio and video used in voice and video chat applications.

Tutorial How to Detect Webcam, Microphone, Speaker, OS, Screen Resolution and Browser with Javascript

This component when implemented in the browser, can be accessed through the Javascript API, which allows developers to implement their own RTC web app more easily.

So before creating such interactive communication apps we need to identify the components of the user's computer system, whether it supports WebRTC or not.

Below is a script that can be used to get all the data needed to implement realtime communication features such as video chat, audio, board interaction and more.

 

Step 1

As a first step include the following javascript script in the [head] [/ head] section of your website's HTML code.
<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"> </script>

 

Step 2

Use the following functions / methods to get the required data.
var browserFeaturesTable = document.querySelector('#browser-features');

var screenWidth00 = innerWidth;

function appendTR(firstValue, secondValue) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td style="padding:5px;width:' + (parseInt(screenWidth00 / 2) -  180) + 'px!important; overflow:hidden;" class="borderbottom"><span class="boldblack">' + firstValue + '</span></td><td style="padding:5px;" class="borderleftbottom">' + secondValue + '</td>';
    browserFeaturesTable.appendChild(tr);
    return tr;
}

function printVal(value,type) {

    if(type==1){
        return value == true ? '<span class="red">Yes</span>' : value == false ? '<span class="green">No</span>' : value;
    }else{
        return value == true ? '<span class="green">Yes</span>' : value == false ? '<span class="red">No</span>' : value;   
    }
   
}

function getInfoDiv(id) {
    return '<div class="info-div" id="' + id + '"></div>';
}

var output = '';

function onDetectRTCLoaded() {
    browserFeaturesTable.innerHTML = '';

    appendTR('Browser Supports WebRTC (Either 1.0 or 1.1)?', printVal(DetectRTC.isWebRTCSupported,'0'));

    appendTR('Operating System', printVal(DetectRTC.osName,'0') + ' version: ' + printVal(DetectRTC.osVersion,'0'));

    if(DetectRTC.browser.name=='Chrome'){
        var fullVersion = DetectRTC.browser.fullVersion;
        var pieces = fullVersion.split(".");
        if(pieces[0]<=52){
            DetectRTC.browser.fullVersion = '<span style="color:red;">'+fullVersion+' (Chrome version: 53.x is recommended)</span>';
        }else{
            DetectRTC.browser.fullVersion = '<span style="color:green;">'+fullVersion+'</span>';
        }
    }
   
    appendTR('Browser', printVal(DetectRTC.browser.name,'0') + ' version: ' + printVal(DetectRTC.browser.fullVersion,'0') + '<br>Private browsing? ' + printVal(DetectRTC.browser.isPrivateBrowsing,'1'));

    appendTR('Display resolutions', printVal(DetectRTC.displayResolution,'0'));

    output = printVal(DetectRTC.hasSpeakers,'0');
    if(DetectRTC.audioOutputDevices.length) {
        output += '<br>Found speaker devices: ' + DetectRTC.audioOutputDevices.length;

        var labels = [];
        DetectRTC.audioOutputDevices.forEach(function(device) {
           labels.push(device.label);
        });

        output += '<br><div style="margin-left:15px;">' + labels.join('<br>') + '</div>';
    }
    appendTR('System has Speakers?', output);

    output = printVal(DetectRTC.hasMicrophone,'0');
    if(DetectRTC.audioInputDevices.length) {
        output += '<br>Found microphone devices: ' + DetectRTC.audioInputDevices.length;

        var labels = [];
        DetectRTC.audioInputDevices.forEach(function(device) {
           labels.push(device.label);
        });

        output += '<br><div style="margin-left:15px;">' + labels.join('<br>') + '</div>';
    }
    appendTR('System has Microphone?', output);
   
    output = printVal(DetectRTC.hasWebcam,'0');
    if(DetectRTC.videoInputDevices.length) {
        output += '<br>Found webcam devices: ' + DetectRTC.videoInputDevices.length;

        var labels = [];
        DetectRTC.videoInputDevices.forEach(function(device) {
           labels.push(device.label);
        });

        output += '<br><div style="margin-left:15px;">' + labels.join('<br>') + '</div>';
    }
    appendTR('System has Webcam?', output);

    appendTR('Website has webcam permissions?', printVal(DetectRTC.isWebsiteHasWebcamPermissions,'0'));
    appendTR('Website has microphone permissions?', printVal(DetectRTC.isWebsiteHasMicrophonePermissions,'0'));
    appendTR('Is it a mobile device?', printVal(DetectRTC.isMobileDevice), 'isMobileDevice');
    
}
function reloadDetectRTC() {
    DetectRTC.load(onDetectRTCLoaded);
}
DetectRTC.load(function() {
    reloadDetectRTC();

    if(DetectRTC.MediaDevices[0] && DetectRTC.MediaDevices[0].label === 'Please invoke getUserMedia once.') {
        navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(reloadDetectRTC).catch(reloadDetectRTC);
        return;
    }
});


DEMO & DOWNLOAD

You can download the script and see the demo HERE.
Hopefully the above script can be useful for you and you can use to support.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

1 comment Add Comment

Thanks for sharing your honest experience. When I first took a look at my head shots,
I wasn’t too thrilled with mine but you’ve given me a new perspective!

Virtual Edge

Reply

Comments not appropriate topic will sign SPAM.