[demo angular] - 添加对自动重连的处理

examples/angular/package.json

@@ -23,6 +23,7 @@
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "unique-classnames": "^1.0.6",
+    "urtc-sdk": "latest",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {

examples/angular/src/components/stream-player/index.ts

@@ -11,10 +11,8 @@ import {
 } from '@angular/core';
 import classnames from 'unique-classnames';
 
-// 注：实际使用时，请使用 import sdk, { Client } from 'urtc-sdk';
-import sdk, { Client } from '@sdk';
-// 注：实际使用时，请使用 import { Stream, AudioStats, VideoStats, NetworkStats } from 'urtc-sdk/types';
-import { Stream, AudioStats, VideoStats, NetworkStats } from '@sdk/types';
+import sdk, { Client } from 'urtc-sdk';
+import { Stream, AudioStats, VideoStats, NetworkStats } from 'urtc-sdk/types';
 
 interface Stats {
   audioLost: number;

examples/angular/src/pages/room/index.ts

@@ -6,10 +6,8 @@ import {
   OnDestroy,
 } from '@angular/core';
 
-// 注：实际使用时，请使用 import sdk, { Client } from 'urtc-sdk';
-import sdk, { Client } from '@sdk';
-// 注：实际使用时，请使用 import { Stream } from 'urtc-sdk/types';
-import { Stream } from '@sdk/types';
+import sdk, { Client } from 'urtc-sdk';
+import { Stream } from 'urtc-sdk/types';
 
 // 注：实际使用时，请自行在 config 目录下创建 index.ts 配置文件
 import config from '../../config';
@@ -95,6 +93,25 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
         remoteStreams.splice(idx, 1);
       }
     });
+    this.client.on('connection-state-change', ({ previous, current }) => {
+      console.log(`连接状态 ${previous} -> ${current}`);
+    });
+    this.client.on('stream-reconnected', ({ previous, current }) => {
+      console.log(`流已断开重连`);
+      if (previous.type === 'publish') {
+        const { localStreams } = this;
+        const idx = localStreams.findIndex(item => item.sid === previous.sid);
+        if (idx >= 0) {
+          localStreams.splice(idx, 1, current);
+        }
+      } else {
+        const { remoteStreams } = this;
+        const idx = remoteStreams.findIndex(item => item.sid === previous.sid);
+        if (idx >= 0) {
+          remoteStreams.splice(idx, 1, current);
+        }
+      }
+    });
 
     window.addEventListener('beforeunload', this.leaveRoom);
   }
@@ -128,12 +145,12 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
   }
   handlePublish() {
     this.client.publish(err => {
-      console.error('发布失败：', err);
+      console.error(`发布失败：错误码 - ${err.name}，错误信息 - ${err.message}`);
     });
   }
   handlePublishScreen() {
     this.client.publish({ audio: false, video: false, screen: true }, (err) => {
-      console.error('发布失败：', err);
+      console.error(`发布失败：错误码 - ${err.name}，错误信息 - ${err.message}`);
     });
   }
   handleUnpublish() {