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

本文介绍了WebRTC一对一视频通话的实现,包括通话流程、技术框架、信令设计、服务后台部署。通过信令服务器和STUN服务器,实现两端设备的连接。技术框架涉及vue+h5前端、gorilla/websocket信令服务、golang gin后端服务以及STUN服务器的使用。部署过程中,需要注意HTTPS、端口开放和证书配置。
摘要由CSDN通过智能技术生成

1、介绍

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

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

2、实践

2.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.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媒体数据中转,可以用现有服务,也可以自行安装

安装教程 centos7 搭建turn stun 服务器

2.3信令设计

信令就是两个客户端之间信息交换的数据,如会话,开始通话,结束通话,用户上线,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:系
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值