流媒体协议之WebRTC实现p2p视频通话(二)

本文详细介绍了WebRTC的定义、组成,以及如何通过RTCPeerConnection建立P2P连接。通过信令服务器交换SDP,利用STUN/TURN进行NAT穿透,实现端到端的视频通话。同时提到了WebRTC在NAT环境下的工作原理和STUN服务的搭建。
摘要由CSDN通过智能技术生成

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680

简介

目的 帮助自己了解webrtc 实现端对端通信


19956127-fbbb7cdabb71ed8f.png
  # 使用流程
  git clone https://gitee.com/wjj0720/webrtc.git
  cd ./webRTC
  npm i
  npm run dev

  # 访问 127.0.0.1:3003/test-1.html 演示h5媒体流捕获
  # 访问 127.0.0.1:3003/local.html 演示rtc 本地传输
  # 访问 127.0.0.1:3003/p2p.html 演示局域网端对端视屏 

WebRTC定义

WebRTC(Web Real-Time Communication) 网页即时通信 ,是一个支持网页浏览器进行实时语音、视频对话的API。
于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。
闲话:目前主流实时流媒体 实现方式
RTP :(Real-time Transport Protocol) 建立在 UDP 协议上的一种协议加控制

HLS(HTTP Live Streamin)苹果公司实现的基于HTTP的流媒体传输协议

RTMP(Real Time Messaging Protocol) Adobe公司基于TCP

WebRTC google 基于RTP协议

WebRTC组成

19956127-e4216373cb40f517.png
  • getUserMedia负责获取用户本地的多媒体数据
  • RTCPeerConnection负责建立P2P连接以及传输多媒体数据。
  • RTCDataChannel提供的一个信令通道实现双向通信

h5 获取媒体流

目标:打开摄像头将媒体流显示到页面

MediaDevices 文档

navigator.mediaDevices.getUserMedia({
    video: true, // 摄像头
    audio: true // 麦克风
  }).then(steam => {
    // video标签的srcObject
    video.srcObject = stream
  }).catch(e => {
    console.log(e)
  })

RTCPeerConnection

RTCPeerConnection api提供了 WebRTC端创建、链接、保持、监控闭连接的方法的实现
RTCPeerConnection MDN

  1. webRTC流程


    19956127-2ffa89fa000920e0.png

    以 A<=>B 创建p2p连接为例

A端:
1.创建RTCPeerConnection实例:peerA
2.将自己本地媒体流(音、视频)加入实例,peerA.addStream
3.监听来自远端传输过来的媒体流 peerA.onaddstream
4.创建[SDP offer]目的是启动到远程(此时的远端也叫候选人)))对等点的新WebRTC连接 peerA.createOffer
5.通过[信令服务器]将offer传递给呼叫方
6.收到answer后去[stun]服务拿到自己的IP,通过信令服务将其发送给呼叫放

B端:
1.收到信令服务的通知 创建RTCPeerConnection peerB,
2.也需要将自己本地媒体流加入通信 peerB.addstream
3.监听来自远端传输过来的媒体流 peerA.onaddstream
4.同样创建[SDP offer] peerA.createAnswer
5.通过[信令服务器]将Answer传递给呼叫方
6.收到对方IP 同样去[stun]服务拿到自己的IP 传递给对方

至此完成p2p连接 触发双发onaddstream事件。
1.信令服务
信令服务器:
webRTC中负责呼叫建立、监控(Supervision)、拆除(Teardown)的系统
为什么需要:
webRTC是p2p连接,那么连接之前如何获得对方信息,有如何将自己的信息发送给对方,这就需要信令服务。
2.SDP

什么是SDP
SDP 完全是一种会话描述格式 ― 它不属于传输协议
它只使用不同的适当的传输协议,包括会话通知协议(SAP)、会话初始协议(SIP)、实时流协议(RTSP)、MIME 扩展协议的电子邮件以及超文本传输协议(HTTP)
SDP协议是基于文本的协议,可扩展性比较强,这样就使其具有广泛的应用范围。

WebRTC中SDP
SDP不支持会话内容或媒体编码的协商。webrtc中sdp用于媒体信息(编码解码信息)的描述,媒体协商这一块要用RTP来实现。
3.STUN
1.什么是STUN
STUN(Session Traversal Utilities for NAT,NAT会话穿越应用程序)是一种网络协议,它允许位于NAT(或多重NAT)后的客户端找出自己的公网地

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值