简单快速上手的 webRTC，完整前端和后端，服务器是node,服务器逻辑简单

最新推荐文章于 2025-05-29 10:32:13 发布

原创最新推荐文章于 2025-05-29 10:32:13 发布 · 4k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#wenRTC #前后端都用的webRTC #简单快速搭建webRTC 、 #javascript

webRTC 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了WebRTC的实现过程，从信令服务器搭建到前端代码解析，涵盖了offer与answer的交互、ICE候选人的处理等核心步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我也是第一次写webRTC，之前一直没有写过，也是一边百度一边写最终还是写出来了，我来简单说一下了，webRTC其实人家已经写的很完整的，我们要做的仅仅就是将两个机器的信令交互一下

先看一下效果图吧，因为是在本地所以两个浏览器显示的都是一个摄像头内容

大家可以将文件放到两台电脑上在同一个局域网里面启动node就可以使用了

完整的代码可以到github上下载：https://github.com/wenccro/webRTC

webRTC API不懂可以查询：https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Starting_a_call

首先，说一下我这个demo的协议规则

我到规定是，主动呼叫需要发送 offer, 接受端在收到offer 时需要回复一个answer，定义的这样个规则也符合人之常情，当别叫你名字的时候你不得答应人家一下

let obj = {
      "type": "", // 有 offer,answer
      "sdp": 
    }

然后说一下信令服务器

我这里使用的是 HttpRequest，然后定时器循环去请求。最好还是用webSocket ，因为你可以直接在呼叫后直接发送给被呼叫着

而不是使用轮询的方式去查询

下面这个就是我的node服务器跑的流程图，

全局声明get和post地址

  // 请更换成你node本地跑起来 所在的 ip地址     
 let getUrl = "http://（node服务器地址:3001）/data/local"
 let postUrl = "http://（node服务器地址:3001）/data/remo"

好了我们就开始来一点一点的揭开 webRTC的面纱吧

先上信令服务器上的内容也就是 node 代码

var express = require('express')
const bodyParser = require('body-parser')
var app = express()
const Router = require('router')
const router = Router()

router.__dataStore = {}

// 自定义跨域中间件
var allowCors = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', req.headers.origin)
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  res.header('Access-Control-Allow-Credentials', 'true')
  next()
}
app.use(allowCors) // 使用跨域中间件

app.get('/data/:id', function (req, res) {
  console.log('get')
  const deviceId = req.params.id
  console.log(deviceId)
  if (!router.__dataStore[deviceId] || router.__dataStore[deviceId].length === 0) {
    console.log('无数据')
    res.statusCode = 200
    res.end('11')
  } else {
    console.log(router.__dataStore)
    const data = router.__dataStore[deviceId].shift()
    console.log('我发给了谁' + deviceId)
    console.log(data)
    res.statusCode = 200
    res.end(JSON.stringify(data))
  }
})
app.use(bodyParser.urlencoded({
  extended: true
}))
app.use(bodyParser.json({ type: 'application/*+json' }))
// var urlencodedParser = bodyParser.urlencoded({ extended: true })
app.post('/data/:id', (req, res) => {
  console.log('post请求成功')
  const deviceId = req.params.id
  console.log(deviceId)
  if (!router.__dataStore[deviceId]) {
    router.__dataStore[deviceId] = []
  }
  console.log('我准备push了')
  console.log(req.body)
  router.__dataStore[deviceId].push(req.body)
  res.statusCode = 200
  res.end('11')
})

app.listen(3001, () => {
  console.log(3001)
})

node 服务器就做了2件事 ，就是一个get请求 查询有没有他的 sdp内容，第二个是post请求，将自己的spd 存入对方的脚下

就是信令服务器代码了就两个一个get 一个post ，你可以用node以外的任何后端语言来实现它的逻辑。

但最推荐得还算实用webSocket

接下来我们来看前端代码

我的前端有两个页面和两个js 页面和js都是差不多的

唯一不同的仅仅只是 get和post请求的 url地址不同

这里我就以 local.html 和local.js来讲述它的原理，完整的代码我已经上传带github上了在文章开头就写了你可以直接下载

下面我们就在看一下前端代码

html

第一了视频显示的位置和绑定事件

<!DOCTYPE html>
<html>
  <head>
    <title>Realtime communication with WebRTC</title>
    <style>
      body {
        font-family: sans-serif;
      }

      video {
        max-width: 100%;
        width: 320px;
      }
    </style>
  </head>

  <body>
    <h1>Realtime communication with WebRTC</h1>

    <video id="localVideo" autoplay playsinline></video>
    <video id="remoteVideo" autoplay playsinline></video>

    <div>
      <button id="startButton">A端开始</button>
      <button id="callButton">A端调用</button>
      <button id="hangupButton">挂断A端定时器</button>
    </div>
    <script src="./jquery.js"></script>
    <script src="./local.js"></script>
  </body>
</html>

点击了开始按钮

我们先来看第一个按钮点击后做了什么，就是循环去发送get请求由于我node不太熟，所以每次get node服务器它在没有数据的时候会给我返回一个11的标志位这里面有一个关键的方法就是chackData()，这个方法就是每次拿到数据后，做自己的规则检查也就是收到offer回复 answer

 // 点击开始按钮
  $('#startButton').click(function () {
    startQuery()
  })
// 这个方法循环去请求去
  function startQuery () {
    timer = setInterval(function () {
      $.ajax({
        type: "GET",
        url: getUrl,
        success: function (res) {
          if (res === '11' || res === ' ') {

          } else {
            let msg = JSON.parse(res)
            chackData(msg)
          }
        },
        error: function (res) {}
      })
    }, 1000)
  }

现在我们就是看一下这个 chackData具体做了什么，看完代码你会发现原来它对这个信息做了一个分支.

解释：msg.MessageType: 1 表示收到对方发送的 offer, 2 表示收到对方发送的 answer ,3 表示收到对方的ice

// 检测函数
  function chackData (msg) {
    switch (msg.MessageType) {
      case '1':
        handleVideoOfferMsg(msg);
        break;
      case '2':
        handleVideoAnswerMsg(msg);
        break;
      case '3':
        handleNewICECandidateMsg(msg);
        break;
    }
  }

接着我们来看 第一件事，就是收到 offer后它到底做了些什么？

  // 收到别的 offer 需要调用post发送 内容
  async function handleVideoOfferMsg (msg) {
    console.log('收到offer')
    if (!localPeerConnection) {
      createPeerConnection();
    }
    let obj = {
      "type": "offer",
      "sdp": msg.Data
    }
    var desc = new RTCSessionDescription(obj);
    localPeerConnection.setRemoteDescription(desc)
    if (!webcamStream) {
      try { // 播放本地视频
        webcamStream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
        localVideo.srcObject = webcamStream
      } catch (err) {
        handleGetUserMediaError(err);
        return;
      }
      try {
        webcamStream.getTracks().forEach(
          transceiver = track => localPeerConnection.addTransceiver(track, { streams: [webcamStream] })
        );
      } catch (err) {
        handleGetUserMediaError(err);
      }
    }
    await localPeerConnection.setLocalDescription(await localPeerConnection.createAnswer());
    // 调用 post 请求 回复 
    let objs = sendDataByType('Answer')
    startPost(objs)
  }

收到 offer以后 一检查 localPeerConnection（new RTCPeerConnection 对等连接对象有没有）

没有就执行 createPeerConnection()方法，后面会讲。接着往下看

let obj = { "type": "offer", "sdp": msg.Data }

var desc = new RTCSessionDescription(obj);

localPeerConnection.setRemoteDescription(desc)

这个是收到对方的sdp 并将其设置为本地远端绘画描述。

接着 二判断，webcamStream 这个就是本地视频流，本地视频流如果没有打开就开启本地视频流

localPeerConnection.addTransceiver 这个是将本地流发送给对方的。

三就是使用post将自己的sdp发送给对方

接下来是补充收到offer 这个handleVideoOfferMsg方法中引用的其方法

第一个是createPeerConnection（）创建对等连接

创建了对象并写了回调事件

async function createPeerConnection () {
    localPeerConnection = new RTCPeerConnection();
    localPeerConnection.onicecandidate = handleICECandidateEvent;
    localPeerConnection.ontrack = handleTrackEvent;
    localPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
  }

这3个回调的方法我就不不再这里叙述了你直接gethub下载下来就可以看到了。回调是什么，做了什么也很清楚

收到offer 这个handleVideoOfferMsg方法中引用的其方法

第二个是发送post个服务器

let objs = sendDataByType('Answer')

startPost(objs)

// 返回需要发送的数据
  function sendDataByType (type) {
    let obj = {
      Data: localPeerConnection.localDescription.sdp,
      IceDataSeparator: ' '
    }
    switch (type) {
      case "Offer":
        obj.MessageType = '1';
        break;
      case "Answer":
        obj.MessageType = '2';
        break;
    }
    return obj
  }
 // post请求方法
  function startPost (obj) {
    $.ajax({
      type: "post",
      url: postUrl,
      data: obj,
      dataType: 'json',
      success: function (res) {},
      error: function (res) { }
    })
  }

第二件事就是收到answer后做了些什么？

收到answer和收到offer都做了（解释在上面） RTCSessionDescription，和 setRemoteDescription

  // 收到answer
  async function handleVideoAnswerMsg (msg) {
    console.log('收到answer')
    let obj = {
      "type": "answer",
      "sdp": msg.Data
    }
    var desc = new RTCSessionDescription(obj);
    await localPeerConnection.setRemoteDescription(desc).catch();
  }

第三件事收到 ice,就是收到ICE候选人做了

new RTCIceCandidate()和localPeerConnection.addIceCandidate

  async function handleNewICECandidateMsg (msg) {
    let arr = msg.Data.split(msg.IceDataSeparator)
    let obj = {
      "candidate": arr[0],
      "sdpMid": arr[1],
      "sdpMLineIndex": arr[2]
    }
    var candidate = new RTCIceCandidate(obj);
    try {
      await localPeerConnection.addIceCandidate(candidate)
    } catch (err) {}
  }

至此以上部分就是点击开始后接收 offer 或者 answer 或者 ice 的所有事件了。

接下来是 点击了调用按钮

点击开始是等待被呼叫，点击调用就是主动去呼叫，

我这里做了两件事第一件事就是重新打开get请求也就是为了防止在没有点击开始就点击调用了报错问题

  $('#callButton').click(function () {
    startQuery()
    startAction()
  })

startQuery()这个方法上面已经说过了现在我们来重点看看 startAction()方法

做了两件事，第一件事就是打开本地视频流第二件事就是发布自己的本地视频流

ceatePeerConnection() 在上面已经说过了这里就不说了

  async function startAction () {
    createPeerConnection()
    try { // 播放本地视频
      webcamStream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
      localVideo.srcObject = webcamStream
    } catch (err) {
      handleGetUserMediaError(err);
      return;
    }
    try {
      webcamStream.getTracks().forEach(
        transceiver = track => localPeerConnection.addTransceiver(track, { streams: [webcamStream] })
      );
    } catch (err) {
      handleGetUserMediaError(err);
    }
  }

最后就是点击关闭按钮

这里没有写完只是简单的写了一下结束定时器 get数据。你还应该写情况视频流关闭摄像头等事件

 $("#hangupButton").click(function () {
    clearInterval(timer)
  })

至此整个wenRTC就可以实现简单的通话了，总结一下就是首先必须有一个信令服务器作用就是交换彼此的SDP，其次就是在正确的时间做正确的事，也就是在收到offer 后给人家回复 answer 在收到别人的 answer后设置成远端流并，方便对方打开摄像头。收到ice就及时的交换ice候选人信息。我开头所发的参考API的那个地址里面有更加详细的描述，你也可以参考它的和我的来写

加油小宝贝