0%

概述

Insertable Stream 可插入流是新的 WebRTC API,,可用来操作通过 RTCPeerConnection 传送的 MediaStreamTracks 中的每一个字节。它让上层应用能对 WebRTC 底层媒体进行访问,让以往 WebRTC 应用中许多不可能做的情况都成为可能了, 比如替换视频聊天时的背景,实时进行音视频处理(降噪,美颜,打水印,加特效等)。

最新的规范在这里 https://w3c.github.io/webrtc-encoded-transform/


webRTC 音视频处理流程

发送流程
  1. 从媒体设备/其他采集源中获得一帧一帧的数据
  2. 对原始数据进行编码
  3. <- 在这里插入自定义逻辑
  4. SRTP 加密
  5. 发送
接收流程
  1. 接收网络 RTP 包
  2. SRTP 解密
  3. RTP 组包
  4. <- 在这里插入自定义逻辑
  5. 解码数据
  6. 渲染数据
阅读全文 »

上一节讲了 webRTC 的原理,今天我们就来实践一下。

我们知道,webRTC 是点对点的连接,它不需要服务器的参与,但是需要一个信令服务器来传递信令,这样才能使双方建立起连接。

这里我们用 node.js 来充当信令服务器,通过 websocket(socket.io)来传递信令。

新建目录 demo,在 demo 下新建 index.js 文件(信令服务器)和 文件夹 public(存放静态文件)。在 public 下新建 index.html 和 main.js 文件。

阅读全文 »

什么是 WebRTC?

WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的 API,经过多年来的发展与改进,日臻成熟,作为浏览器网页端的通信技术,WebRTC 与 H5 巧妙结合,使得网页端的音视频通信变的简单易行,最为重要的是:网页端通信是完全免费的。

阅读全文 »

通过 socket.io 来操作 websocket API。

安装
1
pip install python-socketio

创建服务

创建服务的方式
1. 通过 WSGI 托管服务
1
2
3
4
5
6
7
import socketio

# 创建一个 socket.io 服务
sio = socketio.Server()

# 将 socket.io 服务托管到 wsgi 服务上
app = socketio.WSGIApp(sio)
阅读全文 »

这里用到 socket.io。

安装
1
npm install socket.io-client

初始化

你可以使用 http(https) 或 ws(wss) 来进行初始化。

1
2
3
4
5
6
import {io} from 'socket.io-client'

const socket = io('http://localhost:8000', {
reconnectionDelay: 2000,
autoConnect: true
});
阅读全文 »

什么是 websocket

WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输,它是一种基于 TCP 的独立实现。

以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较高。另外一种轮询就是采用 long poll 的方式,这就跟打电话差不多,没收到消息就一直不挂电话,也就是说,客户端发起连接后,如果没消息,就一直不返回 Response 给客户端,连接阶段一直是阻塞的。

阅读全文 »

JWT 介绍

JWT 即 JSON Web Token,是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准。

JWT 由三部分构成:

1 头部(Header):用于描述关于该 JWT 的最基本的信息,例如其类型以及签名所用的算法等。

2 载荷(Payload):payload 有五个字段

  1. iss:该 JWT 的签发者
  2. sub:该 JWT 所面向的用户
  3. aud:接收该 JWT 的一方
  4. exp:过期时间
  5. iat:签发时间

3 签名(Signature):header 与 payload 通过 header 中声明的加密方式,使用密钥 secret 进行加密,生成签名(也就是 token 值)。

阅读全文 »

当我们刷新页面时,vue 实例会被重新加载, vuex 仓库里的数据也会被初始化,这会导致数据的丢失。

解决方法:

我们可以在页面将要刷新之前将 state 中的数据保存到 sessionStorage 中,待页面刷新之后再将数据取出,重新赋值给 state,然后清空 sessionStorage。

在根组件 App.vue 中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setup() {
const store = useStore();

const data = sessionStorage.getItem("store");
if (data) {
store.replaceState(
Object.assign(
store.state,
JSON.parse(data)
)
);
sessionStorage.removeItem("store");
}

window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(store.state));
});
}

其中,

1
Object.assign(target, sources)

方法可以将 sources 对象中的属性和值分配到 target 对象中。

数组的成员有时还是数组,Array.prototype.flat() 用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

1
2
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代码中,原数组的成员里面有一个数组,flat() 方法将子数组的成员取出来,添加在原来的位置。

flat() 默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将 flat() 方法的参数写成一个整数,表示想要拉平的层数,默认为1。

1
2
3
4
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中,flat() 的参数为2,表示要拉平两层的嵌套数组。

阅读全文 »