更新版本到 1.4.20

ChangeLog
1. 规范 Publish 的错误码
2. 优化断线重连，并新增流的重连事件 'stream-reconnected' 事件来通知流的变化
3. 新增 startMix 的两种 Layout - customFlow 和 customMain
4. 其他内部优化

AutoPlay.md

@@ -0,0 +1,85 @@
+# 关于浏览器的自动播放问题的说明及处理
+
+---
+
+## 问题说明
+
+出于用户体验考虑，为了防止网页在用户非自愿的情况下主动播放声音，浏览器对 audio 或 video 标签的自动播放（autoplay）功能做了限制：需要在用户交互操作之前不允许有声音的媒体播放。
+
+
+## 具体表现
+
+不同浏览器告警或报错信息不同，基本可以归纳为两类：
+
+1. 调用 audio 或 video 的 play 方法时，会报类似于 `DOMException: play() failed because the user didn’t interact with the document first.` 的错误信息。
+
+2. 开启 audio 或 video 的 autoplay 时，即标签上填有 'autoplay' 属性，如 <audio autoplay/>，浏览器控制台会有类似于 `The AudioContext was not allowed to start` 的告警信息。此时，如果页面中使用的是 video 标签，一般会处于 `白屏` 状态。
+
+
+## 解决方法
+
+1. 提前检测浏览器是否能自动播放
+
+在用 URTC 创建 client 前，可使用 [can-autoplay](https://www.npmjs.com/package/can-autoplay) 第三方库进行检测，若不支持，可引导用户点击页面上的某个位置（譬如模态框上的确定按钮）来触发用户与页面的交互（即解锁 `the user didn’t interact with the document first`），然后再用 URTC 创建 client 并 joinRoom。示例代码：
+
+```js
+canAutoplay.video().then(res => {
+  const { result } = res;
+  if (!result) {
+    // 弹出模态框提示用户点击
+  }
+});
+```
+
+2. 调用 audio 或 video 的 play 方法播放失败时，绕开 autoplay 的限制
+
+此时可与第一种方法类似，引导用户点击该 audio 或 video 标签（也可以是页面上的某个位置，譬如模态框上的确定按钮），但需要在该  `click`  事件的监听函数里再次调用 play 方法。示例代码：
+
+```js
+// 此处 videoElem 为页面中的 video 标签的 DOM 对象
+videoElem.play()
+  .catch(function () {
+    alert('自动播放失败，请点击 video 进行播放');
+    videoElem.onclick = function() {
+      videoElem.play()
+        .then(function() {
+          console.log('播放成功');
+        })
+        .catch(function(err) {
+          console.log('播放失败', err);
+        });
+    }
+  });
+```
+
+3. 直接绕开 autoplay 的限制
+
+由于浏览器限制的是声音的自动播放，在以静音状态进行播放时，是不受 autoplay 的限制的，此时可加上 muted 属性，并在页面中添加静音的图标，由用户来决定是否点击图标来播放声音。示例代码：
+
+```html
+<video id="player" autoplay muted/>
+<span id="unmuteBtn" class="unmute-btn"></span> <!-- 这里是静音图标 -->
+```
+
+```js
+let player = document.querySelector('#player');
+let unmuteBtn = document.querySelector('#unmuteBtn');
+unmuteBtn.onclick = function() {
+  if (player.muted) {
+    player.muted = false;
+    unmuteBtn.className = 'mute-btn';
+  } else {
+    player.muted = true;
+    unmuteBtn.className = 'unmute-btn';
+  }
+}
+```
+
+FAQ
+
+Q: 为什么有时可以播放，有时不行？
+A: 1. 因为页面不是 100% 被 Autoplay 限制，随着用户使用这个页面的次数增加，部分浏览器会把这个页面加入自己的 Autoplay 白名单列表中。2. 在推+拉流时，若客户端先推流（读取麦克风设备），再拉流，可以绕开 autoplay 的限制。
+
+Q: 为什么别的产品可以自动播放，URTC 却不可以？
+A: 排查问题时可先确定客户端是不是先推流再拉流（参考上面的问题）。如果是仅拉流，由于这是浏览器级别的限制，所有同类产品都会受到这个 autoplay 限制的影响，解决办法无外乎上面几种。
+部分产品里由于封装了 DOM 操作的方法，譬如播放时是由用户主动传入 video 标签的 id，在 sdk 内部调用 video 的 play 方法，并在失败时，在页面里插入 DOM 元素并提示用户进行交互，故被人容易理解为其支持自动播放。URTC 为了避免直接操作 DOM，并没有封装此类方法，以保证用户处理此类问题时的灵活性。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "urtc-sdk",
-  "version": "1.4.19",
+  "version": "1.4.20",
   "description": "UCloud RTC javascript SDK",
   "main": "lib/index.js",
   "repository": {

types/index.d.ts

@@ -9,7 +9,7 @@ export declare type DeviceType = 'audio'|'video';
 export declare type EventType = 'user-added' | 'user-removed' |
   'stream-added' | 'stream-removed' | 'stream-published' | 'stream-subscribed' |
   'mute-video' | 'unmute-video' | 'mute-audio' | 'unmute-audio' | 'screenshare-stopped' |
-  'connection-state-change' | 'kick-off' | 'network-quality';
+  'connection-state-change' | 'kick-off' | 'network-quality' | 'stream-reconnected';
 
 export declare type ConnectionState = 'OPEN' | 'CONNECTING' | 'CLOSING' | 'RECONNECTING' | 'CLOSED';
 
@@ -183,7 +183,7 @@ export interface ReplaceTrackOptions {
 }
 
 export declare type MixType = 'relay' | 'record' | 'relay-and-record' | 'update-config'
-export declare type MixLayoutType = 'flow' | 'main' | 'custom'
+export declare type MixLayoutType = 'flow' | 'main' | 'custom' | 'customMain' | 'customFlow'
 export declare type MixAudioCodec = 'aac'
 export declare type MixVideoCodec = 'h264' | 'h265'
 export declare type H264Quality = 'B' | 'CB' | 'M' | 'E' | 'H'