WEBRTC SCREEN-SHARING GETDISPLAYMEDIA REAL-TIME COLLABORATION WEB-API JAVASCRIPT FRONTEND USER-EXPERIENCE MEDIA-STREAMING PEER-TO-PEER

Membangun Fitur Screen Sharing di Web dengan WebRTC: Panduan Praktis getDisplayMedia dan Data Channel

⏱️ 15 menit baca
👨‍💻

Membangun Fitur Screen Sharing di Web dengan WebRTC: Panduan Praktis getDisplayMedia dan Data Channel

1. Pendahuluan

Pernahkah Anda mengikuti meeting online, sesi support teknis, atau presentasi virtual? Salah satu fitur yang paling sering digunakan dan sangat krusial adalah screen sharing. Kemampuan untuk berbagi tampilan layar Anda secara langsung dengan orang lain telah merevolusi cara kita berkolaborasi, belajar, dan memecahkan masalah.

Sebagai developer web, Anda mungkin bertanya-tanya, “Bagaimana sih cara membangun fitur sehebat itu di browser?” Jawabannya terletak pada kekuatan WebRTC (Web Real-Time Communication) dan API-nya yang canggih, terutama getDisplayMedia().

Artikel ini akan memandu Anda langkah demi langkah untuk memahami dan mengimplementasikan fitur screen sharing di aplikasi web Anda. Kita akan membahas cara mengambil stream layar, mengirimkannya melalui WebRTC, menampilkannya di sisi penerima, dan bahkan menambahkan interaktivitas menggunakan Data Channel. Bersiaplah untuk membawa aplikasi Anda ke level kolaborasi yang lebih tinggi! 🚀

2. Dasar-dasar WebRTC untuk Screen Sharing

Sebelum menyelam ke kode, mari kita segarkan sedikit pemahaman tentang WebRTC. WebRTC adalah standar web yang memungkinkan komunikasi real-time, peer-to-peer (P2P) antara browser atau perangkat, tanpa memerlukan plugin tambahan. Ini adalah fondasi untuk aplikasi video call, audio call, dan tentu saja, screen sharing.

Komponen utama WebRTC yang akan kita gunakan adalah:

📌 Analogi: Bayangkan WebRTC seperti walkie-talkie canggih. Signaling server adalah operator radio yang membantu Anda menemukan frekuensi yang tepat dengan teman Anda. Setelah frekuensi ditemukan, Anda bisa bicara langsung (P2P) tanpa perantara.

3. getDisplayMedia(): Jantung Screen Sharing

Untuk memulai screen sharing, kita perlu “menangkap” tampilan layar pengguna. Di sinilah navigator.mediaDevices.getDisplayMedia() berperan. API ini adalah versi khusus dari getUserMedia() yang dirancang untuk menangkap konten layar.

async function startScreenShare() {
    try {
        const screenStream = await navigator.mediaDevices.getDisplayMedia({
            video: true, // Kita hanya perlu video dari layar
            audio: true  // Bisa juga menyertakan audio dari sistem (opsional)
        });

        // Tampilkan stream di elemen video lokal (opsional, untuk preview)
        const localScreenVideo = document.getElementById('localScreenVideo');
        if (localScreenVideo) {
            localScreenVideo.srcObject = screenStream;
        }

        console.log('Screen stream didapatkan:', screenStream);
        return screenStream;

    } catch (error) {
        console.error('Gagal mendapatkan screen stream:', error);
        alert('Gagal memulai screen sharing. Pastikan Anda memberikan izin.');
        return null;
    }
}

Ketika getDisplayMedia() dipanggil, browser akan menampilkan prompt kepada pengguna, meminta izin untuk berbagi layar. Pengguna dapat memilih untuk berbagi:

Ini memberikan kontrol penuh kepada pengguna atas apa yang mereka bagikan, yang sangat penting untuk privasi dan keamanan.

⚠️ Penting: getDisplayMedia() hanya dapat dipanggil dari konteks yang aman (HTTPS) dan memerlukan interaksi pengguna (misalnya, klik tombol). Browser tidak akan mengizinkan aplikasi web untuk merekam layar secara diam-diam.

4. Mengirim Stream Layar ke Peer

Setelah kita mendapatkan screenStream, langkah selanjutnya adalah mengirimkannya ke peer lain melalui RTCPeerConnection.

// Asumsi: peerConnection sudah diinisialisasi dan siap
// Asumsi: signaling server sudah membantu pertukaran SDP dan ICE candidates

let peerConnection; // Ini akan diinisialisasi di bagian signaling
let localScreenStream;

async function setupPeerConnectionAndShareScreen() {
    localScreenStream = await startScreenShare();
    if (!localScreenStream) {
        return; // Gagal mendapatkan stream
    }

    // 1. Inisialisasi RTCPeerConnection (jika belum)
    peerConnection = new RTCPeerConnection({
        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] // STUN server publik
    });

    // 2. Tambahkan handler untuk ICE candidates (untuk pertukaran melalui signaling server)
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            // Kirim event.candidate ke peer lain melalui signaling server
            console.log('ICE Candidate lokal:', event.candidate);
            // signalingServer.send('ice-candidate', event.candidate);
        }
    };

    // 3. Tambahkan handler untuk menerima stream dari peer lain
    peerConnection.ontrack = event => {
        const remoteScreenVideo = document.getElementById('remoteScreenVideo');
        if (remoteScreenVideo && event.streams[0]) {
            remoteScreenVideo.srcObject = event.streams[0];
            console.log('Remote screen stream diterima.');
        }
    };

    // 4. Tambahkan semua track dari screenStream ke peerConnection
    localScreenStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localScreenStream);
    });

    // 5. Buat Offer SDP dan kirimkan ke peer lain melalui signaling server
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    console.log('Offer SDP lokal:', offer);
    // signalingServer.send('offer', offer);

    // ... (Logika untuk menerima Answer SDP dari peer dan setRemoteDescription)
    // ... (Logika untuk menerima ICE candidates dari peer dan addIceCandidate)
}

// Contoh fungsi untuk menghentikan screen sharing
function stopScreenShare() {
    if (localScreenStream) {
        localScreenStream.getTracks().forEach(track => track.stop()); // Hentikan semua track
        localScreenStream = null;
    }
    if (peerConnection) {
        // Hapus track dari peerConnection jika perlu
        // peerConnection.getSenders().forEach(sender => {
        //     if (sender.track && sender.track.kind === 'video') { // Asumsi video stream layar
        //         peerConnection.removeTrack(sender);
        //     // Atau, lebih baik: renegotiate SDP
        //     }
        // });
        // Untuk kesederhanaan, kita bisa tutup peerConnection dan buat baru
        // atau melakukan SDP renegotiation yang lebih kompleks.
    }
    console.log('Screen sharing dihentikan.');
}

💡 Tips: Untuk implementasi signaling server, Anda bisa menggunakan WebSockets untuk pertukaran pesan offer, answer, dan ice-candidate.

5. Menerima dan Menampilkan Stream Layar

Di sisi peer (penerima), prosesnya adalah kebalikan dari pengirim. Penerima akan menunggu offer dan ice-candidate dari pengirim, lalu membuat answer dan mengirimkannya kembali. Ketika RTCPeerConnection menerima stream media, event ontrack akan terpicu.

// Asumsi: peerConnection sudah diinisialisasi dengan handler onicecandidate
// Asumsi: signaling server menerima offer dan mengirim answer

// Di sisi penerima, setelah menerima offer dari signaling server:
async function handleOffer(offer) {
    if (!peerConnection) {
        // Inisialisasi peerConnection jika belum
        peerConnection = new RTCPeerConnection({
            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
        });
        peerConnection.onicecandidate = event => {
            if (event.candidate) {
                console.log('ICE Candidate penerima:', event.candidate);
                // signalingServer.send('ice-candidate', event.candidate);
            }
        };
        peerConnection.ontrack = event => {
            const remoteScreenVideo = document.getElementById('remoteScreenVideo');
            if (remoteScreenVideo && event.streams[0]) {
                remoteScreenVideo.srcObject = event.streams[0];
                console.log('Remote screen stream diterima dan ditampilkan.');
            }
        };
    }

    await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    console.log('Answer SDP lokal:', answer);
    // signalingServer.send('answer', answer); // Kirim answer ke pengirim
}

// Di sisi penerima, setelah menerima ICE candidate dari signaling server:
function handleIceCandidate(candidate) {
    if (peerConnection && candidate) {
        peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
            .catch(e => console.error('Error menambahkan ICE candidate:', e));
    }
}

HTML untuk menampilkan video cukup sederhana:

<video id="localScreenVideo" autoplay muted style="width: 300px; border: 1px solid blue;"></video>
<video id="remoteScreenVideo" autoplay style="width: 600px; border: 1px solid green;"></video>
<button onclick="setupPeerConnectionAndShareScreen()">Mulai Screen Sharing</button>
<button onclick="stopScreenShare()">Stop Screen Sharing</button>

✅ Dengan kode di atas, Anda sudah memiliki fungsionalitas dasar screen sharing!

6. Kontrol Interaktif dengan Data Channel (Opsional tapi Powerful)

Screen sharing dasar sudah bagus, tetapi bagaimana jika kita ingin menambahkan interaktivitas? Misalnya, tombol “Pause” atau “Resume” yang mengontrol stream di sisi pengirim, atau bahkan indikator pointer mouse? Di sinilah WebRTC Data Channels sangat berguna.

Data Channel memungkinkan pengiriman data arbitrer (teks, JSON, binary) secara real-time antara peer. Ini terpisah dari stream audio/video dan dapat digunakan untuk mengirim sinyal kontrol atau metadata.

Mengimplementasikan Data Channel

Di sisi pengirim:

let screenControlChannel;

async function setupDataChannelForScreenShare() {
    // Asumsi peerConnection sudah diinisialisasi
    screenControlChannel = peerConnection.createDataChannel("screen-control");

    screenControlChannel.onopen = () => {
        console.log('Data Channel screen-control terbuka.');
        // Kirim sinyal siap ke penerima
        screenControlChannel.send(JSON.stringify({ type: 'ready' }));
    };

    screenControlChannel.onmessage = event => {
        const message = JSON.parse(event.data);
        console.log('Pesan kontrol diterima:', message);
        if (message.type === 'pause') {
            pauseScreenStream();
        } else if (message.type === 'resume') {
            resumeScreenStream();
        }
        // Tambahkan logika lain seperti pointer, anotasi, dll.
    };

    screenControlChannel.onclose = () => console.log('Data Channel screen-control tertutup.');
    screenControlChannel.onerror = error => console.error('Data Channel error:', error);
}

// Fungsi untuk mengontrol stream layar lokal
function pauseScreenStream() {
    if (localScreenStream) {
        localScreenStream.getTracks().forEach(track => {
            track.enabled = false; // Menonaktifkan track video/audio
        });
        console.log('Screen stream dipause.');
    }
}

function resumeScreenStream() {
    if (localScreenStream) {
        localScreenStream.getTracks().forEach(track => {
            track.enabled = true; // Mengaktifkan kembali track
        });
        console.log('Screen stream dilanjutkan.');
    }
}

Di sisi penerima: Penerima tidak perlu membuat Data Channel, melainkan mendengarkan event ondatachannel pada RTCPeerConnection mereka.

// Di sisi penerima, setelah peerConnection diinisialisasi:
peerConnection.ondatachannel = event => {
    const dataChannel = event.channel;
    if (dataChannel.label === "screen-control") {
        console.log('Data Channel screen-control diterima.');
        dataChannel.onopen = () => console.log('Data Channel screen-control terbuka (penerima).');
        dataChannel.onmessage = event => {
            const message = JSON.parse(event.data);
            console.log('Pesan kontrol diterima dari pengirim:', message);
            // Misalnya, jika pengirim mengirim posisi pointer mouse
            // updatePointerOnScreen(message.x, message.y);
        };
        dataChannel.onclose = () => console.log('Data Channel screen-control tertutup (penerima).');
        dataChannel.onerror = error => console.error('Data Channel error (penerima):', error);

        // Simpan referensi dataChannel ini jika Anda ingin mengirim pesan kembali
        // remoteScreenControlChannel = dataChannel;
    }
};

// Contoh tombol kontrol di sisi penerima
function sendPauseSignal() {
    if (screenControlChannel && screenControlChannel.readyState === 'open') {
        screenControlChannel.send(JSON.stringify({ type: 'pause' }));
        console.log('Sinyal PAUSE dikirim.');
    } else {
        console.warn('Data Channel belum siap atau tidak ada.');
    }
}

function sendResumeSignal() {
    if (screenControlChannel && screenControlChannel.readyState === 'open') {
        screenControlChannel.send(JSON.stringify({ type: 'resume' }));
        console.log('Sinyal RESUME dikirim.');
    } else {
        console.warn('Data Channel belum siap atau tidak ada.');
    }
}

🎯 Dengan Data Channel, Anda bisa menambahkan fitur seperti:

7. Tantangan dan Solusi

Meskipun WebRTC sangat powerful, ada beberapa tantangan yang mungkin Anda hadapi:

Kesimpulan

Selamat! Anda telah memahami dasar-dasar dan langkah-langkah praktis untuk membangun fitur screen sharing di aplikasi web menggunakan WebRTC dan getDisplayMedia(). Dari mengambil stream layar, mengirimkannya melalui RTCPeerConnection, menampilkannya di sisi penerima, hingga menambahkan kontrol interaktif dengan Data Channel, Anda kini memiliki pondasi yang kuat.

Screen sharing adalah fitur yang sangat berharga untuk aplikasi kolaborasi, edukasi, atau support. Dengan WebRTC, Anda bisa memberdayakan pengguna Anda dengan pengalaman real-time yang kaya langsung di browser. Teruslah bereksperimen, dan jangan ragu untuk menyelam lebih dalam ke dunia WebRTC yang luas!

🔗 Baca Juga