WebRTC 简单学习

不才
• 阅读 1629

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)
  }
});
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这