[angular-demo] - 使用 play 方法播放

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

@@ -7,7 +7,7 @@
   cursor: pointer;
 }
 
-.media-player video {
-  width: 100%;
-  height: 100%;
-}
+.media-player .video-container {
+  position: relative;
+  height: 200px;
+}

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

@@ -7,9 +7,6 @@
   <div [hidden]="!stream.mediaStream" style="overflow: 'hidden'; text-overflow: 'ellipsis';">视频丢包率: {{stats.videoLost}}
     %
     &nbsp;&nbsp;&nbsp;&nbsp;网络延时: {{stats.rtt}} ms</div>
-  <div [hidden]="!stream.mediaStream">
-    <video webkit-playsinline autoplay playsinline [controls]="isIOS" #video>
-    </video>
-  </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

@@ -6,8 +6,6 @@ import {
   OnDestroy,
   Input,
   SimpleChanges,
-  ViewChild,
-  ElementRef
 } from '@angular/core';
 import classnames from 'unique-classnames';
 
@@ -23,10 +21,6 @@ interface Stats {
   biggestRTT: number;
 }
 
-function isIOS(): boolean {
-  return /.*iphone.*/i.test(navigator.userAgent);
-}
-
 @Component({
   selector: 'app-stream-player',
   templateUrl: './index.html',
@@ -46,21 +40,17 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
     videoLost: 0,
     biggestVideoLost: 0,
     rtt: 0,
-    biggestRTT: 0
+    biggestRTT: 0,
   };
 
   private volumeTimer: number;
   private stateTimer: number;
-  private isIOS: boolean;
-
-  @ViewChild('video', {static: true}) videoRef: ElementRef;
 
   private isComponentDestroyed: boolean;
 
   constructor() {
     this.volumeTimer = 0;
     this.stateTimer = 0;
-    this.isIOS = isIOS();
   }
 
   ngOnInit() {
@@ -73,19 +63,19 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
     const currentValue: Stream = stream.currentValue;
     const previousValue: Stream = stream.previousValue;
     if (stream.firstChange && currentValue.mediaStream) {
-      this.play(currentValue.mediaStream);
+      this.play();
       return;
     }
     if (!currentValue.mediaStream) {
       this.stop();
     } else if (currentValue.mediaStream !== previousValue.mediaStream) {
-      this.play(currentValue.mediaStream);
+      this.play();
     }
   }
 
   ngAfterViewInit() {
     if (this.stream.mediaStream) {
-      this.play(this.stream.mediaStream);
+      this.play();
     }
   }
 
@@ -94,15 +84,25 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
     this.isComponentDestroyed = true;
   }
 
-  play(mediaStream: MediaStream) {
-    this.videoRef.nativeElement.srcObject = mediaStream;
+  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}`);
+      }
+    });
     this.startGetVolume();
     this.startGetState();
   }
   stop() {
     this.stopGetVolume();
     this.stopGetState();
-    this.videoRef.nativeElement.srcObject = null;
   }
 
   startGetVolume() {

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

@@ -98,18 +98,11 @@ export class RoomComponent implements OnInit, AfterContentInit, AfterViewInit, O
     });
     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);
-        }
+      const isLocalStream = previous.type === 'publish';
+      const streams = isLocalStream ? this.localStreams : this.remoteStreams;
+      const idx = streams.findIndex(item => item.sid === previous.sid);
+      if (idx >= 0) {
+        streams.splice(idx, 1, current);
       }
     });