iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

後疫情時代的 WebRTC 微學習系列 第 22

Day22 [實作] 一對一視訊通話(2): Signaling server

今天我們要實作 Signaling server 的部分:

https://ithelp.ithome.com.tw/upload/images/20211006/20130062BpShvgyeri.png

建立文件

# 進入要放專案的路徑
❯ cd ~/Desktop/WebRTC/sample

# 建立名為 1-on-1-webrtc 的資料夾
❯ mkdir 1-on-1-webrtc

# 進入 1-on-1-webrtc 資料夾內部
❯ cd 1-on-1-webrtc

# 建立 server.js 文件
❯ touch server.js

# 建立靜態文件資料夾
❯ mkdir pubilc

# 建立 node.js 專案
❯ npm init --yes

# 安裝必要的套件
❯ npm install express socket.io

# 在靜態文件資料夾內建立 index.html 並寫入 hello 用於測試
❯ echo "hello" > pubilc/index.html

使用 express 讀取靜態文件

在 server.js 中輸入以下程式碼

const express = require('express')
const app = express()
const http = require('http').createServer(app)

// 靜態資源
app.use('/', express.static(__dirname + '/public/'))

// TODO: Signaling

// 啟動 server 監聽 8080 port
http.listen(8080, () => {
  console.log(`Server running in 8080`)
})

啟動 server 測試靜態文件

開啟終端機

❯ cd ~/Desktop/WebRTC/sample/1-on-1-webrtc
❯ node server

https://ithelp.ithome.com.tw/upload/images/20211006/20130062E23MVjcw5O.png

加入信令(Signaling)

打開 server.js 在 TODO 的地方加入以下程式碼:

const io = require('socket.io')(http, {
  cors: true,
})

// 有人連線就會觸發
io.on('connection', (socket) => {

  // 加入房間
  socket.on('join', (room) => {
    socket.join(room)
    socket.to(room).emit('ready', '準備通話')
  })

  // 轉傳 Offer
  socket.on('offer', (room, desc) => {
    socket.to(room).emit('offer', desc)
  })

	// 轉傳 Answer
  socket.on('answer', (room, desc) => {
    socket.to(room).emit('answer', desc)
  })

  // 交換 ice candidate
  socket.on('ice_candidate', (room, data) => {
    socket.to(room).emit('ice_candidate', data)
  })

})

server.js 完整程式碼如下

const express = require('express')
const app = express()
const http = require('http').createServer(app)

// 靜態資源
app.use('/', express.static(__dirname + '/public/'))

const io = require('socket.io')(http, {
  cors: true,
})

// 有人連線就會觸發
io.on('connection', (socket) => {

  // 加入房間
  socket.on('join', (room) => {
    socket.join(room)
    socket.to(room).emit('ready', '準備通話')
  })

  // 轉傳 Offer
  socket.on('offer', (room, desc) => {
    socket.to(room).emit('offer', desc)
  })

	// 轉傳 Answer
  socket.on('answer', (room, desc) => {
    socket.to(room).emit('answer', desc)
  })

  // 交換 ice candidate
  socket.on('ice_candidate', (room, data) => {
    socket.to(room).emit('ice_candidate', data)
  })

})

http.listen(8080, () => {
  console.log(`Server running in 8080`)
})

啟動 server

node server.js

上一篇
Day21 [實作] 一對一視訊通話(1): 運作說明
下一篇
Day23 [實作] 一對一視訊通話(3): Client
系列文
後疫情時代的 WebRTC 微學習30

尚未有邦友留言

立即登入留言