webrtc 入门第五章 一对一视频通话实现

一、介绍

​ 在前面的章节我们学习了如何操作本地的设备摄像头，麦克风等，学会了如何进行本地的流媒体操作如录制，下载，同步等。在第三第四章节学习了webrtc的一对一连接的原理和实操并且实现了简单的数据传输。

​ 但是之前的实践在两个不同的设备之间还不能实现真正意义上的通话，当两端不在一台设备上是还不能通信。要实现远程的两个设备间的数据传输还需要借助信令服务器和STUN服务器。

二、实践

1、通话流程

​ 一对一的视频通话连接流程和第三章的连接流程一样，学者可以详细阅读第三章的内容和实际操示例。整个通话的流程相对来说还是比较复杂，需要借助信令服务器和STUN服务器。整个系统设计如下

1.正常的用户体系，包括用户登录，注册，查看用户列表，请求通话，通话详情页面，用户挂断，用户退出等基础功能

2.用户A：作为会话的发起方，创建提议offer

3.用户B：会话应答方接到A发来的提议后创建应答answer

4.信令服务器:websocket服务连接用户A和用户B,转发双方的SDP及Candidate信息，以及用户上下线，请求通话，挂断，拒绝通话等消息。

5.STUN服务器：用于接收用户A 、B的ICE请求，从而获取各自的Candidate信息，再通过信令服务器转发至双方，另外STUN服务器也有转发媒体数据的功能

6.服务连接，双方获取本地媒体流及交换媒体流。

2、技术框架

​

在本次实现该功能的技术路线中可以看到客户端为web PC-A和PC-B 服务器需要两个具体如下

1.PC web端：web端使用的是vue+h5实现了用户注册登录，进入聊天列表，发起视频请求等功能

2.信令服务：本次使用github.com/gorilla/websocket 包实现了websocket功能，主要用来用户登录，离线，消息通知，和转发Offer、Answer，Candidate等数据。

3.web服务：使用golang的gin包实现了https服务,主要提供了页面渲染，群聊，mysql存贮用户数据等

4.STUN服务器：本次使用turnserver 服务实现STUN及TURN媒体数据中转，可以用现有服务，也可以自行安装

安装教程 https://blog.csdn.net/qq_32435729/article/details/78729093

4、信令设计

信令就是两个客户端之间信息交换的数据，如会话，开始通话，结束通话，用户上线，offer,answer等数据的交换，需要提供统一的数据格式，根据不同的消息类型客户端和服务端处理不同的数据业务。

// 接收定义消息结构
type ReceiveMessage struct {
   // 请求的方法
   Method string `json:"method"`
   // 消息类型(1,text,0:系统消息)
   Type int8 `json:"type"`
   // 消息体
   Message string `json:"message"`
   // 消息来源用户Id
   FromId string `json:"fromId"`
   // 当前连接
   Client *websocket.Conn `json:"client"`
   // 数据参数
   Data map[string]interface{} `json:"data"`
}

// 发送消息结构
type SendMessage struct {
	// 请求的方法
	Method string `json:"method"`
	// 消息类型(1,text,0:系统消息))
	Type uint8 `json:"type"`
	// 消息体
	Message string `json:"message"`
	// Code 0 正确，1 错误
	Code int16 `json:"code"`
	// 数据参数
	Data interface{} `json:"data"`
}

本次设计的主要信令方法 method 有如下几种

类型	说明
Message/Offer	议题SDP
Message/Answer	应答SDP
Message/Candidate	交换ICECandidate网络信息
User/Connect	用户连接
Message/SendToAll	发消息

let data={
    "Method": "Message/Candidate",
    "Type": 0,
    "Message": that.user.name + "发给" + userId + "candidate信息",
    "fromId": that.user.id,
    "toId": userId,
    "data": {
        "candidate": {
            "sdpMlineIndex": event.candidate.sdpMLineIndex,
            "sdpMid": event.candidate.sdpMid,
            "candidate": event.candidate.candidate
        }
    }
}
send(data)

不同的业务发送不同的数据类型，到服务器，服务器根据toId将消息转发给对应的用户id,在用户收到消息后，需要根据不同的返回业务码来处理业务，业务处理主要在websocket的onmessage回调方法中

onmessage: function () {
    let that = this

    console.log(that.users)

    that.ws.onmessage = function (event) {
        let msg = JSON.parse(event.data)
        console.log("收到消息-----")
        console.log(msg)
        if (msg.code == 10000) {
            that.users = msg.data
        }
        if (msg.code == 10005) {
            that.addMessage('from ' + msg.data.username + ": ", msg.data.message);
            return;
        }
        if (msg.code == 10006) {
            // 有用户登录
            console.log(that.users)
            if (that.users == null) {
                that.users = []
                that.users.push(msg.data)
                return;
            }
            let isIn = 0

            for (let i = 0; i < that.users.length; i++) {
                if (that.users[i].id == msg.data.id) {
                    isIn = 1
                }
            }
            if (isIn == 0) {
                that.users.push(msg.data)
            }
        }
        if (msg.code == 10008) {
            let userId = msg.data.fromId
            let newUser = []
            for (let i = 0; i < that.users.length; i++) {
                if (that.users[i].id != userId) {
                    newUser.push(that.users[i])
                }
            }
            that.users = newUser
        }
        if (msg.code == 10009) {
            that.onCandidate(msg)
            return;
        }
        if (msg.code == 10010) {
            that.onOffer(msg)
            return;
        }
        if (msg.code == 10011) {
            that.onAnswer(msg)
            return;
        }


        that.addMessage('系统消息', msg.message);
    }

5、服务后台

main.go 是整个函数的入口函数使用goang 的gin框架实现了http服务，包括路由websocket路由等

package main

import ( 
   "ginweb/controllers/wss"
   "ginweb/dao"
   "ginweb/route"
   "ginweb/runtime"
   "github.com/gin-gonic/gin"
)

func init() {
   go wss.HandleMessages()
}

func main() {

   config.InitConfig()
   runtime.InitLog()
   dao.Install()
   defer dao.Uninstall()

   r := route.RegisterRouters()  // 注册路由

   r.GET("/wss", wss.OnWssMessage) // websockt路由
   r.LoadHTMLGlob("www/**/**/*") // 加载静态文件
   r.StaticFS("/static", http.Dir("./static"))
   r.Run(":" + config.Data.Port)
}

route.go路由文件加载路由

package route

import (
   "ginweb/controllers/blog"
   "ginweb/controllers/elasticSearch"
   "ginweb/controllers/game/gobang"
   "ginweb/controllers/webrtc"
   "github.com/gin-gonic/gin"
)

// @Title 注册路由
// @return  route  *gin.Engine

func RegisterRouters() *gin.Engine {
   r := gin.Default()
   webrtcGroup := r.Group("/webrtc")
   {
      webrtcGroup.GET("/login", webrtc.LoginPage)
      webrtcGroup.POST("/login", webrtc.Login)
      webrtcGroup.POST("/register", webrtc.Register)
      webrtcGroup.GET("/admin", webrtc.ShowHead)
      webrtcGroup.Use(webrtc.LoginAuth(r)) // 验证登录
      // webrtc 基本操作
      webrtcGroup.GET("/in", webrtc.Home)
      webrtcGroup.GET("/wss", webrtc.OnWsMessage)
   }
   return r
}

wss.go文件 实现了websockt用户连接及断开服务的数据绑定等

func OnWsMessage(req *gin.Context) {
   var loginMsg webrtc.LoginMessage
   r := req.Request
   w := req.Writer
   c, err := upgrader.Upgrade(w, r, nil)
   if err != nil {
      zaplogger.Error(err)
      c.Close()
      return
   }

   err = c.ReadJSON(&loginMsg)
   if err != nil {
      zaplogger.Error(err)
      c.Close()
      return
   }

   // 关闭连接需要修改
   defer logout(loginMsg, c)

   if loginMsg.FromId <= 0 {
      return
   }

   // 2.接收到用户连接,执行登录
   code, res := login(loginMsg, c)
   if code > 0 {
      zaplogger.Error("connect error:"+res, code, loginMsg)
      return
   }

   // 系统监听用户消息
   for {
      // 1.处理当前用户获取系统消息
      var userMsg webrtc.ReceiveMessage
      err = c.ReadJSON(&userMsg)
      if err != nil {
         zaplogger.Error("收到消息 json解析err:", err)
         break
      }
      if userMsg.Method == "User/Connect" {
         continue
      }

      // TODO message 去掉 client 和指针
      zaplogger.Info("收到消息：->", userMsg)
      code, res := GetRouter(userMsg)
      zaplogger.Info("处理结果：->", code, res)
   }

}

message.go 文件主要包括转发会话消息等

// @Title SendToAll
// @Description 批量消息发送给所有在线用户
// @Param   message    用户消息
// @return   code  int16  返回码
// @return   message  string   消息

func (m *Message) Candidate(message webrtc.ReceiveMessage) (code int16, res string) {
   var returnData map[string]interface{}
   returnData = make(map[string]interface{})
   returnData["fromId"] = message.FromId
   returnData["data"] = message.Data
   m.SendToIds([]int32{message.ToId}, webrtc.MessageCandidate, message.Message, message.Method, returnData, 1)
   return
}

// @Title SendToAll
// @Description 批量消息发送给所有在线用户
// @Param   message    用户消息
// @return   code  int16  返回码
// @return   message  string   消息

func (m *Message) Offer(message webrtc.ReceiveMessage) (code int16, res string) {
   var returnData map[string]interface{}
   returnData = make(map[string]interface{})
   returnData["fromId"] = message.FromId
   returnData["data"] = message.Data
   m.SendToIds([]int32{message.ToId}, webrtc.MessageCreateOffer, message.Message, message.Method, returnData, 1)
   return
}

func (m *Message) Answer(message webrtc.ReceiveMessage) (code int16, res string) {
   var returnData map[string]interface{}
   returnData = make(map[string]interface{})
   returnData["fromId"] = message.FromId
   returnData["data"] = message.Data
   m.SendToIds([]int32{message.ToId}, webrtc.MessageAnswer, message.Message, message.Method, returnData, 1)
   return
}

在上述的代码中只是体现了部分重要的代码模块，有笔者需要的话可以查看我的dome

https://e.coding.net/caoxiukang123456/ginweb/ginweb.git 本文中部分实现只作为学习可参考。

​ 一对一pc

​ 手机与pc一对一

6、服务部署

1、本次前端采用layui+h5+vue.js 实现页面的组件展示，因此需要在项目中导入layui.js和vue.js

2、后台web服务采用golang的gin框架实现http服务及页面功能，在服务器需要安装golang 1.16.3版本

wget https://studygolang.com/dl/golang/go1.16.1.linux-amd64.tar.gz 
tar -C /usr/local -xzf go1.16.1.linux-amd64.tar.gz 
vim /etc/profile 
export GOROOT=/usr/local/go #设置为go安装的路径 
export GOPATH=/home/gocode #默认安装包的路径 
export PATH=$PATH:$GOROOT/bin:$GOPATH/bin
source /etc/profile  // 生效
go env -w GOPROXY=https://goproxy.cn,direct

3、golang 1.14版本后使用go.mod进行包管理创建项目很简单，进入到项目的根目录下执行

go mod init ginweb
go mod tidy
go run main.go  

4、安装stun服务器具体见其他教程：https://blog.csdn.net/qq_32435729/article/details/78729093 本教程讲的安装思路明确，测试方法也清晰

5、webrtc需要通过域名+https访问因此服务器需要打开80，443，以及stun服务器的 3478 端口。另外https服务需要提供证书。本次部署我是采用宝塔面板安装简单，http和websocket服务只需要做端口转发即可

三、总结

通过前面几章节的学习后我们学会了，操作本地媒体流，媒体操作渲染，数据通道，数据发送等基本功能，并且实现了信令服务，STUN服务器等单独功能，前期准备工作做好后就可以将所有功能整合起来，实现webrtc一对一视频通话功能。在实际处理过程中需要注意以下问题。

1、在用户发送会话提议offer和Answer的时候逻辑代码在一个页面书比较复杂而且挺绕，需要提前熟悉webrtc的连接流程，指导原理后书写就很简单。

2、系统中的用户体系在聊天界面中可以实现消息会话以及实现发起聊天，挂断等操作。

3、stun服务器目前网上有很多免费的但是好多都不可用，如果自己不想搭建的话 可以使用免费的，但是使用前需要测试可用性 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ 该网址可以测试

4、自行搭建的STUN服务器一般都自带turn服务。搭建完成后依然需要自行测测试

5、关于STUN服务器的原理以及webrtc端到端的连接原理会在下一章整理。