iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

今天我們要實作 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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
latisha
iT邦新手 5 級 ‧ 2022-02-11 17:56:53

您好,我想請問一下...
我照您的方式操作後,在命令提示字元裡打出node server.js,他很正常的告訴我Server running in 8080,但是當我在瀏覽器輸入127.0.0.1:8080後,出現的卻是Cannot GET /的字樣,究竟是哪裡出了錯呢?

謝謝您。

(二更)
抱歉,解決了,不好意思打擾了...

smilenccc iT邦新手 5 級 ‧ 2022-04-12 16:30:32 檢舉

我猜是你的server沒有東西給browser get

latisha iT邦新手 5 級 ‧ 2022-04-23 20:10:38 檢舉

其實結果是我手誤打錯字XD

我要留言

立即登入留言