Digital Candil Kuya - Hallo Sobat Candil kembali lagi di artikel kali ini saya akan bagikan sebuah tutorial pemrogramman dasar dari HTML5 - Web RTC (Bahasa Indonesia) yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog Candil Kuya, Silahkan d simak dan di perhatikan baik-baik.
Web RTC diperkenalkan oleh World Wide Web Consortium (W3C). Itu mendukung aplikasi browser-tobrowser untuk panggilan suara, obrolan video, dan berbagi file P2P.
Jika Anda ingin mencoba? web RTC tersedia untuk Chrome, Opera, dan Firefox. Tempat yang baik untuk memulai adalah aplikasi obrolan video sederhana di sini . Web RTC mengimplementasikan tiga API seperti yang ditunjukkan di bawah ini :
- MediaStream dapatkan akses ke kamera dan mikrofon pengguna.
- RTCPeerConnection mendapatkan akses ke fasilitas panggilan audio atau video.
- RTCDataChannel mendapatkan akses ke komunikasi peer-to-peer.
MediaStream
MediaStream mewakili aliran media yang disinkronkan, Sebagai contoh, Klik pemutar Video HTML5 di bagian demo HTML5 atau klik di sini .
Contoh di atas berisi stream.getAudioTracks() dan stream.VideoTracks(). Jika tidak ada trek audio, ia mengembalikan larik kosong dan akan memeriksa aliran video, jika webcam terhubung, stream.getVideoTracks() mengembalikan larik satu MediaStreamTrack yang mewakili aliran dari webcam. Contoh sederhananya adalah aplikasi chat, aplikasi chat mendapatkan streaming dari web camera, kamera belakang, microphone.
Contoh kode MediaStream
function gotStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
// Create an AudioNode from the stream
var mediaStreamSource = audioContext.createMediaStreamSource(stream);
// Connect it to destination to hear yourself
// or any other node for processing!
mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);
Cuplikan Layar
Ini juga dimungkinkan di browser Chrome dengan mediaStreamSource dan membutuhkan HTTPS. Fitur ini belum tersedia di opera. Contoh demo tersedia di sini
Kontrol Sesi, Informasi Jaringan & Media
Web RTC membutuhkan komunikasi peer-to-peer antar browser. Mekanisme ini membutuhkan signaling, network information, session control dan media information. Pengembang web dapat memilih mekanisme yang berbeda untuk berkomunikasi antara browser seperti SIP atau XMPP atau komunikasi dua arah lainnya. Contoh contoh XHR ada di sini .
Contoh kode createSignalingChannel()
var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function start(isCaller) {
pc = new RTCPeerConnection(configuration);
// send any ice candidates to the other peer
pc.onicecandidate = function (evt) {
signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
};
// once remote stream arrives, show it in the remote video element
pc.onaddstream = function (evt) {
remoteView.src = URL.createObjectURL(evt.stream);
};
// get the local stream, show it in the local video element and send it
navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
selfView.src = URL.createObjectURL(stream);
pc.addStream(stream);
if (isCaller)
pc.createOffer(gotDescription);
else
pc.createAnswer(pc.remoteDescription, gotDescription);
function gotDescription(desc) {
pc.setLocalDescription(desc);
signalingChannel.send(JSON.stringify({ "sdp": desc }));
}
});
}
signalingChannel.onmessage = function (evt) {
if (!pc)
start(false);
var signal = JSON.parse(evt.data);
if (signal.sdp)
pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
else
pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};
Semoga Artikel Tutorial HTML5 - CORS (Bahasa Indonesia) bisa dijadikan refferensi pembelajaran untuk anda yang masih awam terjun ke dalam dunia web programming, Semoga Bermanfaat and Hapy Ngoding
