BAGIKAN

Cara mendeteksi komponen sistem seperti webcam, microphone, speaker, sistem operasi, resolusi layar dan browser yang digunakan user dengan Javascript.

Aplikasi berbasis web modern yang berkembang saat ini sangat interaktif, dimana pengguna bisa melakukan obrolan secara langsung dengan audio dan video interaktif yang real time.

Image Credit: qnimate.com

WebRTC adalah framework terbuka untuk keperluan web yang memungkinkan komunikasi secara realtime melalui browser. Ini termasuk blok bangunan dasar untuk komunikasi berkualitas tinggi di website, seperti komponen jaringan, audio dan video yang digunakan dalam aplikasi obrolan suara dan video.

Komponen ini ketika diimplementasikan di browser, bisa diakses melalui API Javascript, yang memungkinkan para developer untuk menerapkan aplikasi web RTC mereka sendiri dengan lebih mudah.

Jadi sebelum membuat aplikasi komunikasi interaktif tersebut kita perlu untuk mengidentifikasi komponen sistem komputer pengguna, apakah sudah mendukung WebRTC atau belum.

Dibawah ini script yang bisa digunakan untuk mendapatkan semua data yang dibutuhkan untuk mengimplementasikan fitur komunikasi secara realtime seperti obrolan video, audio, interaksi papan tulis dan lainnya.

Langkah 1

Sebagai langkah pertama sertakan script javascript berikut ini di bagian [head][/head] pada kodingan HTML website Anda.

<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"> </script>

Langkah 2

Gunakan fungsi / method berikut ini untuk mendapatkan data yang dibutuhkan.

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

Anda bisa mendownload script tersebut dan melihat demo nya DISINI.

Sekian

Semoga script diatas bisa berguna bagi Anda dan bisa Anda gunakan untuk menunjang

Original Shared Article

Tinggalkan Balasan