iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Software Development

新手也能打造網路電話系統-WebRTC入門與活用系列 第 16

Day 16 - 應用篇 - 建構WebRTC網路電話(Client端)

上一篇介紹了WebRTC網路電話系統的整體架構,本篇我們要打造系統的Client端。

Client端有以下的功能:

  • 通話前顯示自己的影像。
  • 通話後顯示對方的影像。
  • 可進行音視訊通話。

專案開發

程式設計

Step1 撰寫creator.js程式碼

開啟creator.js檔案,並撰寫以下程式碼。

let localStream; //用於儲存本地端媒體流
let peerConnection; //用於儲存peerConnection物件

//設定Socket連線的配置,配置內容為連線至本地端的port:3001,並關閉自動連線
const socket = io(
    'localhost:3001', { 'autoConnect': false }
);

async function getMedia() {
    const constraints = {};
    constraints.audio = true;
    constraints.video = true;

    //向使用者取得媒體設備的權限
    localStream = await navigator.mediaDevices
        .getUserMedia(constraints)
        .catch(msg => {
            console.log(msg);
            return;
        });

    const video_large = document.getElementById('largeVideo');
    video_large.autoplay = true;
    video_large.muted = true;
    video_large.srcObject = localStream;
}

async function initWebRTC() {
    //Step1:設定PeerConnection的配置並初始化
    const configuration = {
        iceServers: [{
            urls: 'stun:stun1.l.google.com:19302'
        }],
        iceCandidatePoolSize: 10,
    };

    peerConnection = new RTCPeerConnection(configuration);

    //Step2:取得本地端媒體流的音視訊軌道,並設定於PeerConnection
    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });

    //Step3:設定ICE候選人監聽事件,當取得自己的候選人後傳遞至Server
    peerConnection.addEventListener('icecandidate', event => {
        if (!event.candidate) {
            console.log('Got final candidate!');
            return;
        }

        socket.emit('creator candidate', event.candidate.toJSON());
    });

    //Step4:建立與設定Offer SDP後,將其傳遞至Server
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    socket.emit('offer', offer);
}

async function connectToSocket() {
    await getMedia(); //取得本地端媒體流

    //設定Socket的監聽事件
    socket.on('connect', () => { //成功連線至Socket Server後,進入此監聽事件
        socket.emit('create'); //發送create事件,以建立通話
    });

    socket.on('call established', () => { //當通話已被建立時,進入此監聽事件
        alert('通話已被建立');
    });

    socket.on('start', () => { //當對方加入通話後,進入此監聽事件
        initWebRTC(); //初始化WebRTC
    });

    socket.on('finish', () => { //當對方離開通話後,進入此監聽事件
        localStream = null;
        peerConnection = null;
        alert('對方已結束通話');
    });

    socket.connect(); //連線至Socket Server
}

connectToSocket();

Step2 撰寫joiner.js程式碼

程式碼大致上與creator.js相同,不同的點在於initWebRTC方法內少了建立與設定Answer SDP的步驟。


上一篇
Day 15 - 應用篇 - 建構WebRTC網路電話(架構總覽)
下一篇
Day 17 - 應用篇 - 建構WebRTC網路電話(Server端)
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言