[demo] - angular 调整播放部分的代码

examples/angular/src/App.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, Component } from '@angular/core';
 
 import { RoomComponent } from './pages/room';
-import { StreamPlayerComponent } from './components/stream-player';
+import { StreamInfoComponent } from './components/stream-info';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +21,7 @@ class AppComponent {}
 
 @NgModule({
   declarations: [
-    StreamPlayerComponent,
+    StreamInfoComponent,
     RoomComponent,
     AppComponent
   ],

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

@@ -1,4 +1,4 @@
-<div [class]="classes" (click)="handleClick()">
+<div [class]="classes">
   <div style="overflow: 'hidden'; text-overflow: 'ellipsis';">用户ID: {{stream.uid}}</div>
   <div style="overflow: 'hidden'; text-overflow: 'ellipsis';">流ID: {{stream.sid}}</div>
   <div [hidden]="!stream.mediaStream" style="overflow: 'hidden'; text-overflow: 'ellipsis';">
@@ -7,6 +7,5 @@
   <div [hidden]="!stream.mediaStream" style="overflow: 'hidden'; text-overflow: 'ellipsis';">视频丢包率: {{stats.videoLost}}
     %
     &nbsp;&nbsp;&nbsp;&nbsp;网络延时: {{stats.rtt}} ms</div>
-  <div class="video-container" [id]="stream.sid" [hidden]="!stream.mediaStream"></div>
   <p [hidden]="stream.mediaStream">unsubscribe</p>
 </div>

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

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import classnames from 'unique-classnames';
 
-import sdk, { Client } from 'urtc-sdk';
+import { Client } from 'urtc-sdk';
 import { Stream, AudioStats, VideoStats, NetworkStats } from 'urtc-sdk/types';
 
 interface Stats {
@@ -22,15 +22,13 @@ interface Stats {
 }
 
 @Component({
-  selector: 'app-stream-player',
+  selector: 'stream-info',
   templateUrl: './index.html',
-  styleUrls: ['./index.css']
 })
-export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+export class StreamInfoComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   @Input() className: string;
   @Input() stream: Stream;
   @Input() client: Client;
-  @Input() onClick: (stream: Stream) => void;
 
   private classes: string;
   private volume = 0;
@@ -54,28 +52,29 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
   }
 
   ngOnInit() {
-    this.classes = classnames('media-player', this.className);
+    this.classes = classnames('stream-info', this.className);
     this.isComponentDestroyed = false;
   }
 
   ngOnChanges(changes: SimpleChanges) {
     const { stream } = changes;
+
     const currentValue: Stream = stream.currentValue;
     const previousValue: Stream = stream.previousValue;
     if (stream.firstChange && currentValue.mediaStream) {
-      this.play();
+      this.start();
       return;
     }
     if (!currentValue.mediaStream) {
       this.stop();
     } else if (currentValue.mediaStream !== previousValue.mediaStream) {
-      this.play();
+      this.start();
     }
   }
 
   ngAfterViewInit() {
-    if (this.stream.mediaStream) {
-      this.play();
+    if (this.stream && this.stream.mediaStream) {
+      this.start();
     }
   }
 
@@ -84,19 +83,7 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
     this.isComponentDestroyed = true;
   }
 
-  play() {
-    const { client, stream } = this;
-    const mirror: boolean = stream.type === 'publish';
-    client.play({
-      streamId: stream.sid,
-      container: stream.sid,
-      mirror
-    }, (err) => {
-      if (err) {
-        console.log(`播放失败 ${err}`);
-        alert(`播放失败 ${err}`);
-      }
-    });
+  start() {
     this.startGetVolume();
     this.startGetState();
   }
@@ -164,11 +151,4 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
   stopGetState() {
     window.clearInterval(this.stateTimer);
   }
-  handleClick() {
-    console.log('click ', this);
-    const { stream, onClick } = this;
-    if (onClick) {
-      onClick(stream);
-    }
-  }
 }

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

@@ -1,13 +0,0 @@
-.media-player {
-  display: inline-block;
-  margin: 2px;
-  width: 300px;
-  text-align: left;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.media-player .video-container {
-  position: relative;
-  height: 200px;
-}

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

@@ -25,4 +25,18 @@
 .room button:hover,
 .room button:active {
   outline: none;
+}
+
+.stream-container {
+  display: inline-block;
+  margin: 2px;
+  width: 300px;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.stream-container .video-container {
+  position: relative;
+  height: 200px;
 }

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

@@ -2,17 +2,17 @@
   <label>房间号：{{roomId}}（{{roomStatus}}）</label>
   <p>当前选中的流：{{selectedStreamStatus}}</p>
   <h3>本地（发布）流</h3>
-  <app-stream-player *ngFor="let stream of localStreams"
-    className="local-stream"
-    [stream]="stream"
-    [client]="client"
-    [onClick]="onSelectStream"></app-stream-player>
+  <div class="stream-container" *ngFor="let stream of localStreams; trackBy: trackBySId"
+    (click)="onSelectStream(stream)">
+    <stream-info [stream]="stream" [client]="client"></stream-info>
+    <div class="video-container" [id]="stream.sid"></div>
+  </div>
   <h3>远端（订阅）流</h3>
-  <app-stream-player *ngFor="let stream of remoteStreams"
-    className="remote-stream"
-    [stream]="stream"
-    [client]="client"
-    [onClick]="onSelectStream"></app-stream-player>
+  <div class="stream-container" *ngFor="let stream of remoteStreams; trackBy: trackBySId"
+    (click)="onSelectStream(stream)">
+    <stream-info [stream]="stream" [client]="client"></stream-info>
+    <div class="video-container" [id]="stream.sid"></div>
+  </div>
   <h3>操作</h3>
   <button (click)="handleJoinRoom()">加入房间</button>
   <button (click)="handlePublish()">发布</button>

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

@@ -67,6 +67,12 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
       console.info('stream-published: ', localStream);
       const { localStreams } = this;
       localStreams.push(localStream);
+      setTimeout(() => {
+        this.client.play({
+          streamId: localStream.sid,
+          container: localStream.sid
+        });
+      }, 0);
     });
     this.client.on('stream-added', (remoteStream) => {
       console.info('stream-added: ', remoteStream);
@@ -84,6 +90,12 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
       if (idx >= 0) {
         remoteStreams.splice(idx, 1, remoteStream);
       }
+      setTimeout(() => {
+        this.client.play({
+          streamId: remoteStream.sid,
+          container: remoteStream.sid
+        });
+      }, 0);
     });
     this.client.on('stream-removed', (remoteStream) => {
       console.info('stream-removed: ', remoteStream);
@@ -104,6 +116,12 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
       if (idx >= 0) {
         streams.splice(idx, 1, current);
       }
+      setTimeout(() => {
+        this.client.play({
+          streamId: current.sid,
+          container: current.sid
+        });
+      }, 0);
     });
 
     window.addEventListener('beforeunload', this.leaveRoom);
@@ -210,4 +228,7 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
     console.log('select stream: ', stream);
     this.selectedStream = stream;
   }
+  trackBySId(index, stream) {
+    return stream.sid;
+  }
 }