舞动的灵魂

概述

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，表示要拉平两层的嵌套数组。

点击选取文件夹

我们知道，选取文件可以通过以下方式：

1

<input type="file" multiple/>

其实，想要选取文件夹只需要加上 webkitdirectory 属性：

1

<input id="inputFile" type="file" multiple webkitdirectory/>

现在可以选中文件夹了，那么怎么获取文件夹里的文件呢？方法和获取文件一样，只不过变成了包含多个文件的列表。代码如下：