(1)WebRTC综述

最新推荐文章于 2024-04-03 09:58:39 发布

进击的M先生

最新推荐文章于 2024-04-03 09:58:39 发布

阅读量272

点赞数

分类专栏： WebRTC 文章标签： webrtc javascript

本文链接：https://blog.csdn.net/qq_42570908/article/details/124026320

版权

WebRTC 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. WebRTC简介

WebRTC: 一个音视频、即时通信开源库
图一：WebRTC整体框架

在这里插入图片描述

第一部分为绿色区域，为webrtc库所提供的核心功能
第二部分为紫色区域，是浏览器提供的javascript的API层---也就是说浏览器对webrtc的核心层的C++ API做了一层封装，封装成为了javascript接口
第三部分为箭头区域，是很多的上层应用
【注】调用顺序就是从上到下！！！

图二：WebRTC核心功能模块

在这里插入图片描述

音频引擎、视频引擎、传输模块

2. 核心API

【1】RTCPeerConnection: 流式传输两个客户端之间的音频与视频.  | 实时性敏感的音视频数据 SRTP
【2】RTCDataChannel: 在两个客户端之间传输数据流.            | 任意数据 STCP 大量排队延迟
-------------
【3】getUserMedia(): 获取用户设备的音频和视频.
【4】MediaRecorder: 录制音频和视频.

3. WebRTC相关协议

3.1 ICE

交互式连接设施Interactive Connectivity Establishment (ICE) 是一个允许你的浏览器和对端浏览器建立连接的协议框架。在实际的网络当中，有很多原因能导致简单的从A端到B端直连不能如愿完成。这需要绕过阻止建立连接的防火墙，给你的设备分配一个唯一可见的地址（通常情况下我们的大部分设备没有一个固定的公网地址），如果路由器不允许主机直连，还得通过一台服务器转发数据。ICE通过使用以下几种技术完成上述工作。
【注】：对端浏览器之间，有时候无法直接建立连接

3.1.1 STUN：NAT的会话穿越功能Session Traversal Utilities for NAT

是一个允许位于NAT后的客户端找出自己的公网地址，判断出路由器阻止直连的限制方法的协议。客户端通过给公网的STUN服务器发送请求获得自己的公网地址信息，以及是否能够被（穿过路由器）访问。
在这里插入图片描述
【注】存在公网、私网的情况

3.1.2 TURN：NAT的中继穿越方式Traversal Using Relays around NAT

通过TURN服务器中继所有数据的方式来绕过“对称型NAT”。你需要在TURN服务器上创建一个连接，然后告诉所有对端设备发包到服务器上，TURN服务器再把包转发给你。很显然这种方式是开销很大的，所以只有在没得选择的情况下采用。
在这里插入图片描述

3.2 SDP：会话描述协议Session Description Protoco

是一个描述多媒体连接内容的协议，例如分辨率，格式，编码，加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上，这些描述内容的元数据并不是媒体流本身。
从技术上讲，SDP并不是一个真正的协议，而是一种数据格式，用于描述在设备之间共享媒体的连接。

3.3 信令(signaling)

WebRTC 通过 RTCPeerConnection 在浏览器之间进行流数据传输, 但还需要一种机制, 来协调通信以及发送控制指令, 这个过程就叫做信令控制. WebRTC 没有规定具体使用的协议或方法。
在本教程中, 我们使用 Socket.IO 来传递消息, 当然也可以使用其他实现。

4. 案例一：RTCDataChannel传输非音视频数据据

【注】理解p2p建立连接的逻辑（触发函数、SDP发送）+ 数据传输的触发函数

-------
index.html
-------
<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <h1>Realtime communication with WebRTC</h1>
  <textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
  <textarea id="dataChannelReceive" disabled></textarea>
  <div id="buttons">
    <button id="startButton">Start</button>
    <button id="sendButton">Send</button>
    <button id="closeButton">Stop</button>
  </div>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

-------
main.js
-------
'use strict';

var localConnection;
var remoteConnection;
var sendChannel;
var receiveChannel;
var pcConstraint;
var dataConstraint;

var dataChannelSend = document.querySelector('textarea#dataChannelSend');
var dataChannelReceive = document.querySelector('textarea#dataChannelReceive');
var startButton = document.querySelector('button#startButton');
var sendButton = document.querySelector('button#sendButton');
var closeButton = document.querySelector('button#closeButton');

startButton.onclick = createConnection;
sendButton.onclick = sendData;
closeButton.onclick = closeDataChannels;

function enableStartButton() {
  startButton.disabled = false;
}

function disableSendButton() {
  sendButton.disabled = true;
}
//（1）开始按钮
function createConnection() {
  dataChannelSend.placeholder = '';
  var servers = null;
  pcConstraint = null;
  dataConstraint = null;
  trace('Using SCTP based data channels');
  // For SCTP, reliable and ordered delivery is true by default.
  // Add localConnection to global scope to make it visible
  // from the browser console.
  window.localConnection = localConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created local peer connection object localConnection');

  sendChannel = localConnection.createDataChannel('sendDataChannel',
      dataConstraint);
  trace('Created send data channel');

  localConnection.onicecandidate = iceCallback1;
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  // Add remoteConnection to global scope to make it visible
  // from the browser console.
  window.remoteConnection = remoteConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created remote peer connection object remoteConnection');

  remoteConnection.onicecandidate = iceCallback2;
  remoteConnection.ondatachannel = receiveChannelCallback;

  localConnection.createOffer().then(
    gotDescription1,
    onCreateSessionDescriptionError
  );
  startButton.disabled = true;
  closeButton.disabled = false;
}

function onCreateSessionDescriptionError(error) {
  trace('Failed to create session description: ' + error.toString());
}
//(2)发送按钮
function sendData() {
  var data = dataChannelSend.value;
  sendChannel.send(data);
  trace('Sent Data: ' + data);
}
//(3)介绍按钮
function closeDataChannels() {
  trace('Closing data channels');
  sendChannel.close();
  trace('Closed data channel with label: ' + sendChannel.label);
  receiveChannel.close();
  trace('Closed data channel with label: ' + receiveChannel.label);
  localConnection.close();
  remoteConnection.close();
  localConnection = null;
  remoteConnection = null;
  trace('Closed peer connections');
  startButton.disabled = false;
  sendButton.disabled = true;
  closeButton.disabled = true;
  dataChannelSend.value = '';
  dataChannelReceive.value = '';
  dataChannelSend.disabled = true;
  disableSendButton();
  enableStartButton();
}

function gotDescription1(desc) {
  localConnection.setLocalDescription(desc);
  trace('Offer from localConnection \n' + desc.sdp);
  remoteConnection.setRemoteDescription(desc);
  remoteConnection.createAnswer().then(
    gotDescription2,
    onCreateSessionDescriptionError
  );
}

function gotDescription2(desc) {
  remoteConnection.setLocalDescription(desc);
  trace('Answer from remoteConnection \n' + desc.sdp);
  localConnection.setRemoteDescription(desc);
}

function iceCallback1(event) {
  trace('local ice callback');
  if (event.candidate) {
    remoteConnection.addIceCandidate(
      event.candidate
    ).then(
      onAddIceCandidateSuccess,
      onAddIceCandidateError
    );
    trace('Local ICE candidate: \n' + event.candidate.candidate);
  }
}

function iceCallback2(event) {
  trace('remote ice callback');
  if (event.candidate) {
    localConnection.addIceCandidate(
      event.candidate
    ).then(
      onAddIceCandidateSuccess,
      onAddIceCandidateError
    );
    trace('Remote ICE candidate: \n ' + event.candidate.candidate);
  }
}

function onAddIceCandidateSuccess() {
  trace('AddIceCandidate success.');
}

function onAddIceCandidateError(error) {
  trace('Failed to add Ice Candidate: ' + error.toString());
}

function receiveChannelCallback(event) {
  trace('Receive Channel Callback');
  receiveChannel = event.channel;
  receiveChannel.onmessage = onReceiveMessageCallback;
  receiveChannel.onopen = onReceiveChannelStateChange;
  receiveChannel.onclose = onReceiveChannelStateChange;
}

function onReceiveMessageCallback(event) {
  trace('Received Message');
  dataChannelReceive.value = event.data;
}

function onSendChannelStateChange() {
  var readyState = sendChannel.readyState;
  trace('Send channel state is: ' + readyState);
  if (readyState === 'open') {
    dataChannelSend.disabled = false;
    dataChannelSend.focus();
    sendButton.disabled = false;
    closeButton.disabled = false;
  } else {
    dataChannelSend.disabled = true;
    sendButton.disabled = true;
    closeButton.disabled = true;
  }
}

function onReceiveChannelStateChange() {
  var readyState = receiveChannel.readyState;
  trace('Receive channel state is: ' + readyState);
}

function trace(text) {
  if (text[text.length - 1] === '\n') {
    text = text.substring(0, text.length - 1);
  }
  if (window.performance) {
    var now = (window.performance.now() / 1000).toFixed(3);
    console.log(now + ': ' + text);
  } else {
    console.log(text);
  }
}

-------
main.css
-------
body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}

进击的M先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(1)WebRTC综述

1. WebRTC简介WebRTC: 一个音视频、即时通信开源库图一：WebRTC整体框架第一部分为绿色区域，为webrtc库所提供的核心功能第二部分为紫色区域，是浏览器提供的javascript的API层---也就是说浏览器对webrtc的核心层的C++ API做了一层封装，封装成为了javascript接口第三部分为箭头区域，是很多的上层应用【注】调用顺序就是从上到下！！！图二：WebRTC核心功能模块音频引擎、视频引擎、传输模块2. 核心API【1】RTCPeerConn.
复制链接

扫一扫