js-媒体流录制
有时候我们需要用 js 来录音或者录视频,就需要用到 mediaRecorder。
具体介绍请看:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder。
MediaRecorder 介绍
方法
- start():开始
- stop():结束
- pause():暂停
- resume():恢复录制
有时候我们需要用 js 来录音或者录视频,就需要用到 mediaRecorder。
具体介绍请看:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder。
Insertable Stream 可插入流是新的 WebRTC API,,可用来操作通过 RTCPeerConnection 传送的 MediaStreamTracks 中的每一个字节。它让上层应用能对 WebRTC 底层媒体进行访问,让以往 WebRTC 应用中许多不可能做的情况都成为可能了, 比如替换视频聊天时的背景,实时进行音视频处理(降噪,美颜,打水印,加特效等)。
最新的规范在这里 https://w3c.github.io/webrtc-encoded-transform/。
上一节讲了 webRTC 的原理,今天我们就来实践一下。
我们知道,webRTC 是点对点的连接,它不需要服务器的参与,但是需要一个信令服务器来传递信令,这样才能使双方建立起连接。
这里我们用 node.js 来充当信令服务器,通过 websocket(socket.io)来传递信令。
新建目录 demo,在 demo 下新建 index.js 文件(信令服务器)和 文件夹 public(存放静态文件)。在 public 下新建 index.html 和 main.js 文件。
JWT 即 JSON Web Token,是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准。
JWT 由三部分构成:
1 头部(Header):用于描述关于该 JWT 的最基本的信息,例如其类型以及签名所用的算法等。
2 载荷(Payload):payload 有五个字段
3 签名(Signature):header 与 payload 通过 header 中声明的加密方式,使用密钥 secret 进行加密,生成签名(也就是 token 值)。
当我们刷新页面时,vue 实例会被重新加载, vuex 仓库里的数据也会被初始化,这会导致数据的丢失。
我们可以在页面将要刷新之前将 state 中的数据保存到 sessionStorage 中,待页面刷新之后再将数据取出,重新赋值给 state,然后清空 sessionStorage。
在根组件 App.vue 中添加如下代码:
1 | setup() { |
其中,
1 | Object.assign(target, sources) |
方法可以将 sources 对象中的属性和值分配到 target 对象中。
数组的成员有时还是数组,Array.prototype.flat()
用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。
1 | [1, 2, [3, 4]].flat() |
上面代码中,原数组的成员里面有一个数组,flat() 方法将子数组的成员取出来,添加在原来的位置。
flat() 默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将 flat() 方法的参数写成一个整数,表示想要拉平的层数,默认为1。
1 | [1, 2, [3, [4, 5]]].flat() |
上面代码中,flat() 的参数为2,表示要拉平两层的嵌套数组。