iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
新手入門,如有錯誤,歡迎指正~~~

系列文章同步更新於部落格

目標

本章將使用socket來完成 WebRTC 中基本的Signaling交換,包含offer,answer,icecandidate

使用情境:

  • Client A / B 會進入相同房間(如聊天室)
  • Client A / B 會發起視訊聊天的請求
  • Client A / B 會交換彼此SDP offer/answer
  • Client A / B 會交換彼此ICE
  • Client A / B 某一方離開房間

實作

附上完整程式碼 - github

依照需求擬定了以下幾個Events。

const onConnection = (socket) => {
  // Listening for joining a room (joinRoom event)
  socket.on("joinRoom", /** 加入房間 */);
  socket.on("disconnect", /** 離線 */);

  // for peer to peer communicate
  socket.on("offer", /** SDP offer */);
  socket.on("answer", /** SDP answer */);
  socket.on("icecandidate", /** ICE */);
};

接下來將邏輯的部份拆分封裝到同一包檔案中( event.js )。

  1. 資料緩存及其結構

    // ./event.js
    
    // 緩存使用者資訊
    // 資料結構:使用者.房間名稱(目前先寫死一間)
    const users = {
      general: {},
    };
    
  2. joinRoom 加入房間

    // ./event.js
    
    const joinRoom = (socket) => ({ username, room }) => {
      socket.join(room, () => {
          // push user for the suitable room
          users[room][socket.client.id] = { username: username, id: socket.client.id }
          // Notify all the users in the same room
          socket.broadcast.in(room).emit('newUser', users[room]);
      });
    }
    
  3. leaveRoom 離線

    // ./event.js
    
    const leaveRoom = (socket) => ({ room, username }) => {
      socket.leave(room, () => {
          delete  users[room][socket.client.id]
          // Notify all the users in the same room
          socket.broadcast.in(room).emit('userLeave', users[room]);
      })
    }
    
  4. SDP Offer

    // ./event.js
    
    const offer = (socket) => ({room, offer}) => {
      console.log('switch offer')
      // Notify all the users in the same room
      socket.broadcast.in(room).emit('offer', offer);
    }
    
  5. SDP Answer

    // ./event.js
    
    const answer = (socket) => ({room, answer}) => {
      console.log('switch answer')
      // Notify all the users in the same room
      socket.broadcast.in(room).emit('answer', answer);
    }
    
  6. ICE

    // ./event.js
    
    const icecandidate = (socket) => ({room, candidate}) => {
      console.log('switch icecandidate')
      // Notify all the users in the same room
      socket.broadcast.in(room).emit('icecandidate', candidate);
    }
    
  7. 最後

完成所有邏輯處理後,改寫一下原本的函式。

const onConnection = (socket) => {
  // Listening for joining a room (joinRoom event)
  socket.on("joinRoom", events.joinRoom(socket));
  socket.on("disconnect", () =>
    events.leaveRoom(socket)({ room: "general" })
  );

  // for peer to peer communicate
  socket.on("offer", (offer) => events.offer(socket)({room: "general", offer}));
  socket.on("answer", (answer) => events.answer(socket)({room: "general", answer}));
  socket.on("icecandidate", (candidate) => events.icecandidate(socket)({room: "general", candidate}));
};

總結

實作Signaling Server 基本需要的幾個功能

  • 驗證/保存使用者身份(這邊是實作簡單的加入同間房間而已)
  • SDP offer/answer
  • ICE

接下來會將之前靜態單頁的概念實作,改為用Signaling server作為中介層,讓實作起來的感覺更接近實務應用~

參考


上一篇
[實作篇]WebRTC Signaling Server - Express x Socket.io
下一篇
[實作篇]WebRTC - Video Chat
系列文
菜雞前端邁入網頁即時通訊(WebRTC)之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言