WebRTC 简单学习

不才 等级 953 1 0

WebRTC

花了两天时间简单了解了一下WEB RTC,并由此写入三个DEMO。

  1. p2p 点对点
  2. o2m 一对多
  3. live 直播

目前主要都是按p2p进行的简单扩展。

WebRTC 简单了解

目前资料不算少,不过确实也不多,而且理论偏多,新手入门其实还是有点压力的。

这边推荐几个资料和视频。

MDN 文档 记得出问题看看文档先

WebRTC samples 没有思路的时候记得看看

哔哩哔哩 - 一只斌 这个b站up,大概算是由浅入深讲了这个东西,但是有些基础概念被带过了(应该主要是我基础较薄弱),其中圣诞特辑中的流程其实还是比较清晰的。

知乎 - 为什么webrtc那么贵? 注意看评论区

知乎 - 可以用WebRTC来做视频直播吗? 注意看评论区

WebRTC 的一些概念

WebRTC基础情况下只需要一个 ‘信令服务’ 作为业务需求,并不需要直接管理流。

p2p

点对点通信(pc与pc直接通信),不通过服务器

信令服务

用于建立通信和业务交互的服务端

SDP

存放媒体信息、会话的描述。如编码解码信息

NAT / STUN / TURN / ice

strn

用于p2p连接。(下面仅个人理解

由于没有公网ip的两个主机没有办法直接进行直接通信,所以需要一个“中转的服务器”,但是由于中转服务器过于依赖服务器带宽,所以采用NAT穿刺,这样双方通信就不需要依赖服务器。

ice
整合了STUN和TURN的框架

实际具体不需要管,ice 服务器可以使用公开的

实践

webrtc建立还是很简单的,只需要交换双方sdpice-candidate,即可建立通信。

具体流程

p2p 1对1 视频

呼叫方创建 offer sdp 接收方根据 offer sdp 创建 answer sdp

一、 sdp 交换

  1. 呼叫方 建立WebRTC
  2. 接收方 等待 信令服务器 转发 类型为offersdp
  3. 呼叫方 监听onnegotiationneeded并创建 offer sdp 并调用 setLocalDescription 设置为本地描述
  4. 呼叫方 向 信令服务器 发送 offer sdp 并监听 answer sdp
  5. 接收方 得到 offer sdp 并调用 setRemoteDescription 设置为远程描述
  6. 接收方 创建 answer sdp 并设置本地描述(setLocalDescription) 同时向 信令服务器 发送 answer sdp
  7. 呼叫方 收到 answer sdp 并设远程描述(setRemoteDescription

二、 ice-candidate 交换

  1. 监听 onicecandidate 得到 candidate 后进行发送
  2. 监听 信令服务器 ice-candidate 得到后调用 addIceCandidate

获取媒体 流

function getUserMedia(constrains) {
  let promise = null;
  if (navigator.mediaDevices.getUserMedia) {
    //最新标准API
    promise = navigator.mediaDevices.getUserMedia(constrains)
  } else if (navigator.webkitGetUserMedia) {
    //webkit内核浏览器
    promise = navigator.webkitGetUserMedia(constrains)
  } else if (navigator.mozGetUserMedia) {
    //Firefox浏览器
    promise = navagator.mozGetUserMedia(constrains)
  } else if (navigator.getUserMedia) {
    //旧版API
    promise = navigator.getUserMedia(constrains);
  }
  return promise;
}
// 得到流
const stream = await getUserMedia({
  video: true,
  audio: true,
});
// 展示
$('video').srcObject = stream;

信令服务器

demo使用 node + socket-io 做信令服务器

目前逻辑很简单,只为数据定向转发

目前主要对sdpice candidate进行一个定向转发

const SocketIo = require('socket.io');
const consola = require('consola'); // log 工具

const users = new Map(); // 用户存储

/**
 * 
 * @param {http.Server} server 
 */
const signaling = (server) => {
  // 创建socketio服务
  const io = new SocketIo.Server(server);

  const p2p = io.of('/p2p');
  // 连接
  p2p.on('connect', (socket) => {
    consola.info('[%s] connect', socket.id);

    // **********
    // 用户操作

    // sdp 转发
    socket.on('sdp', (data) => {
      console.log('sdp data.to[%s] type[%s]', data.to, data.type);
      const user = users.get(data.to)
      if (user) {
        user.emit('sdp', data);
      }
    });
    // ice-candidate 转发
    socket.on('ice-candidate', (data) => {
      console.log('ice-candidate data.to', data.to);
      const user = users.get(data.to)
      if (user) {
        user.emit('ice-candidate', data);
      }
    });

    // 用户操作
    // **********

    // ----------
    // 用户操作
    socket.once('disconnect', () => {
      consola.info('[%s] disconnect', socket.id);
      users.delete(socket.id);
      p2p.emit('leave', {
        user: socket.id
      });
    });
    socket.emit('users', {
      users: Array.from(users.keys())
    });
    p2p.emit('join', {
      user: socket.id
    });
    users.set(socket.id, socket);
    // 用户操作
    // ----------
  });

};

module.exports = signaling;

建立WebRTC

这里在代码中区分了发送和接收具体可参考业务

呼叫方

// ************
// 呼叫方
// ************

// 1. 建立rct连接
const pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: ["stun:stun.counterpath.net:3478"] // 可以直接百度找一些开放的stun服务器
    }
  ]
});
// 2. 绑定流
const stream = await getUserMedia({
  video: true,
  audio: true,
});
// 添加媒体轨道 如果 video 和 audio 都为true 则 getTracks 可以获得两个轨道
stream.getTracks().forEach(track => pc[toUser].addTrack(track, stream));

// 3. 监听
pc.onnegotiationneeded = ()=>{
  pc
    .createOffer() // 创建 offer sdp
    .then((offer) => {
      // 设置为本地描述
      return pc.setLocalDescription(offer);
    })
    .then(() => {
      // 定向转发 sdp
      socket.emit('sdp', {
        type: 'sender',
        value: pc.localDescription
      });
    });
}
pc.onicecandidate = (ev)=>{
  // 转发 ice-candidate
  socket.emit('ice-candidate', {
    type: 'sender',
    value: ev.candidate,
  });
}
pc.ontrack = (ev)=>{
  // 这里可以的得到对方的流
  let stream = ev.streams[0];
}

// 监听 ice 和 sdp
socket.on('ice-candidate', (data)=>{
  if(data.type === 'receive'){
    const candidate = new RTCIceCandidate(data.value);
    pc.addIceCandidate(candidate)
  }
});
socket.on('sdp', (data)=>{
  if(data.type === 'receive'){
    const sdp = new RTCSessionDescription(data.value);
    pc.setRemoteDescription(sdp);
  }
});

接收方

// ************
// 接收方
// ************

//  建立rct连接 
const pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: ["stun:stun.counterpath.net:3478"] // 可以直接百度找一些开放的stun服务器
    }
  ]
});

socket.on('sdp', async (data)=>{
  if(data.type === 'sender'){
    const sdp = new RTCSessionDescription(data.value);
    pc.setRemoteDescription(sdp);
    //  绑定流
    const stream = await getUserMedia({
      video: true,
      audio: true,
    });
    // 添加媒体轨道 如果 video 和 audio 都为true 则 getTracks 可以获得两个轨道
    stream.getTracks().forEach(track => pc[toUser].addTrack(track, stream));

    // 监听
    pc.onnegotiationneeded = ()=>{
      pc
        .createAnswer() // 创建 offer sdp
        .then((answer) => {
          // 设置为本地描述
          return pc.setLocalDescription(answer);
        })
        .then(() => {
          // 定向转发 sdp
          socket.emit('sdp', {
            type: 'receive',
            value: pc.localDescription
          });
        });
    }
    pc.onicecandidate = (ev)=>{
      // 转发 ice-candidate
      socket.emit('ice-candidate', {
        type: 'receive',
        value: ev.candidate,
      });
    }
    pc.ontrack = (ev)=>{
      // 这里可以的得到对方的流
      let stream = ev.streams[0];
    }

  }
});

// 监听 ice 和 sdp
socket.on('ice-candidate', (data)=>{
  if(data.type === 'sender'){
    const candidate = new RTCIceCandidate(data.value);
    pc.addIceCandidate(candidate)
  }
});
收藏
评论区

相关推荐

WebRTC 简单学习
WebRTC花了两天时间简单了解了一下WEB RTC,并由此写入三个DEMO。1. p2p 点对点2. o2m 一对多3. live 直播目前主要都是按p2p进行的简单扩展。 WebRTC 简单了解目前资料不算少,不过确实也不多,而且理论偏多,新手入门其实还是有点压力的。 这边推荐几个资料和视频。 记得出问题看看文档先 没有思路的时候记得看看 这个
HTML5实现一对一视频聊天
相关技术栈 ----- 对于移动端来说,大多是视频聊天功能都是采用的Native端的代码来实现,这种方式性能好,兼容性强但是开发成本也会高一些,那么本文就来介绍一下采用纯H5的方式来实现视频聊天功能。 1. WebRTC 2. Socket.io 3. Node.js 项目截图: 体验地址:[https://app.nihaoshij
2018:WebRTC开发五大趋势
![](https://oscimg.oschina.net/oscnet/12da69b9-207c-4eff-9f3f-211ef637ed46.jpg) > 也许对于大部分WebRTC的开发者而言,2018年将是忙碌的一年。主流浏览器和苹果官方支持,标准和API定型,WebRTC生态具备了快速发展的条件。WebRTC技术服务商“WebRTC.
2018:WebRTC开发五大趋势
![](https://oscimg.oschina.net/oscnet/12da69b9-207c-4eff-9f3f-211ef637ed46.jpg) > 也许对于大部分WebRTC的开发者而言,2018年将是忙碌的一年。主流浏览器和苹果官方支持,标准和API定型,WebRTC生态具备了快速发展的条件。WebRTC技术服务商“WebRTC.
A Study of WebRTC Security
A Study of WebRTC Security ========================== [http://webrtc-security.github.io/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwebrtc-security.github.io%2F) A
Android Studio xcode单步调试 WebRTC Android & iOS
mac环境 如何在 Android Studio 里单步调试 WebRTC Android 的 native 代码。 WebRTC 代码下载 * depot tools 是 chromium 代码库管理工具,包括代码管理、依赖管理、工作流程管理等; * Android/Linux、Windows、iOS/macOS WebRTC 本身的代码是同
Google Hangouts支持使用Firefox WebRTC
![](https://oscimg.oschina.net/oscnet/d3c18af9-0053-4032-aa1b-691bdb1c0319.png) > 自去年4月Firefox 53删除NPAPI以来,该插件一直无法被正常访问。而就在去年年末,Google Hangouts(环聊)重新支持使用Firefox WebRTC。本文深度剖析了
Google开源实时通信项目WebRTC
最近,Google正式开源了WebRTC实时通信项目,希望浏览器厂商能够将该技术内建在浏览器中,从而使Web应用开发人员能够通过HTML标签和JavaScript API就实现Web音频、视频通信功能。 WebRTC(Web Real Time Communication)并不是Google原来自己的技术。在2010年,Google以大约6820万美元收购
HTML WebRTC只摄像头和麦克风的调用
[http://blog.csdn.net/chenyafei617/article/details/38085409](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.csdn.net%2Fchenyafei617%2Farticle%2Fdetails%2F38085409)
HTML5新特性之WebRTC(音视频数据交互)
1、概述 ==== WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频、音频和数据。 WebRTC共分三个API。 * MediaStream(又称getUserMedia) * RTCPeerConnection * RTCDataChannel getU
Kurento On WebRTC
WebRTC是一种通过由万维网联盟(W3C)起草的为浏览器和移动应用提供实时通信(RTC)功能的技术简。 在本指南中,我们将向您介绍重要的部分,以及它们如何适用于Kurento。 Kurento WebRTC旨在成为WebRTC通信的一方。 另一个对等体可以是具有WebRTC能力的浏览器 - 使用RTCPeerConnection API,本地WebRTC
Kurento 之 WebRTC 统计
### 介绍 WebRTC流(音频,视频或数据)可能丢失,并且经历不同数量的网络延迟。 为了评估WebRTC应用程序的性能,可能需要能够监视底层网络和媒体管道的WebRTC功能。 为此,Kurento为服务器端(Kurento Media Server,KMS)提供了WebRTC统计数据收集。 此功能的实现遵循[W3C WebRTC的统计API](htt
Netflix 工程师的生活 —— 40毫秒的案例
![](https://oscimg.oschina.net/oscnet/7cd3a8b0-ca4a-4917-a93b-0b6b01091f5f.png) 正文字数:3049  阅读时长:4分钟 > 并非真正使用了 WebRTC,但此处存在使用 WebRTC 技术性质的相似之处。 作者 / John Blair, Netflix Part
Safari上使用WebRTC指南
> 尽管Apple在2017年的WWDC上宣布加入WebRTC支持,但仍然没有看到Apple在支持WebRTC上更深入的举动,尤其是其不只支持VP8更加强了这种担忧。 文 / Chad Phillips 译 / 元宝 原文:https://webrtchacks.com/guide-to-safari-webrtc/ 自Apple首次
turnserver安装
项目中用到了webrtc,他的p2p通过ICE实现,其中需要stun/turn服务器接入。我用的google开源的,很好用,原来叫做turnserver,后来改名为corturn,git有下载连接。 其实安装,部署配置都很简单,有很多分享。重点是怎么启动。 turnserver -a -f -v --mobility -m 100 --max-bps=1