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

examples/vue/src/components/MediaPlayer.vue

@@ -1,17 +1,9 @@
 <template>
-  <div v-bind:class="classes" v-on: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 v-show="stream.mediaStream" style="overflow: 'hidden'; text-overflow: 'ellipsis';">音量: {{volume}} % &nbsp;&nbsp;&nbsp;&nbsp;音频丢包率: {{stats.audioLost}} %</div>
     <div v-show="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" v-show="stream.mediaStream">
-      <div class="play-mask" v-show="showPlayMask">
-        <div class="mask-content">
-          <div class="hint">由于当前浏览器不支持视频自动播放，请点击下面的按钮来播放</div>
-          <button @click.stop="handlePlay">播放</button>
-        </div>
-      </div>
-    </div>
     <p v-show="!stream.mediaStream">unsubscribe</p>
   </div>
 </template>
@@ -20,12 +12,12 @@
 import classnames from 'unique-classnames';
 
 export default {
-  name: 'MediaPlayer',
+  name: 'StreamInfo',
   data: function () {
-    const classes = classnames('media-player', this.className);
+    const classes = classnames('stream-info', this.className);
 
     return {
-      classes: classes,
+      classes,
       volume: 0,
       stats: {
         audioLost: 0,
@@ -34,8 +26,7 @@ export default {
         biggestVideoLost: 0,
         rtt: 0,
         biggestRTT: 0
-      },
-      showPlayMask: false
+      }
     };
   },
   props: {
@@ -67,7 +58,7 @@ export default {
   mounted: function () {
     this.isComponentDestroyed = false;
     if (this.stream.mediaStream) {
-      this.play();
+      this.start();
     }
   },
   beforeDestroy: function () {
@@ -80,25 +71,14 @@ export default {
     'stream.mediaStream': function (val, oldVal) {
       console.log('media stream changed: ', val, oldVal);
       if (val) {
-        this.play();
+        this.start();
       } else {
         this.stop();
       }
     }
   },
   methods: {
-    play: function () {
-      const { client, stream } = this;
-      const mirror = stream.type === 'publish';
-      client.play({
-        streamId: stream.sid,
-        container: stream.sid,
-        mirror: mirror
-      }, (err) => {
-        if (err) {
-          this.showPlayMask = true;
-        }
-      });
+    start: function () {
       this.startGetVolume();
       this.startGetState();
     },
@@ -164,21 +144,6 @@ export default {
     },
     stopGetState: function () {
       clearInterval(this.stateTimer);
-    },
-    handleClick: function () {
-      const { stream, onClick } = this;
-      onClick && onClick(stream);
-    },
-    handlePlay: function () {
-      const { client, stream } = this;
-      client.resume(stream.sid, (err) => {
-        if (err) {
-          console.log(`播放失败 ${err}`);
-          alert(`播放失败 ${err}`);
-        } else {
-          this.showPlayMask = false;
-        }
-      });
     }
   }
 };
@@ -186,53 +151,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.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;
-}
-
-.media-player .muted-mask,
-.media-player .play-mask {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 9;
-  opacity: 0.6;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.muted-mask .mask-content,
-.play-mask .mask-content {
-  max-width: 200px;
-}
-
-.mask-content .hint {
-  margin-bottom: 12px;
-  white-space: break-spaces;
-  font-size: 14px;
-}
-
-.mask-content button {
-  min-height: 50px;
-}
-
-.media-player video {
-  width: 100%;
-  height: 100%;
-}
 </style>

examples/vue/src/pages/Room.vue

@@ -3,9 +3,15 @@
     <label>房间号：{{roomId}}（{{roomStatus}}）</label>
     <p>当前选中的流：{{selectedStreamStatus}}</p>
     <h3>本地（发布）流</h3>
-    <MediaPlayer v-for="stream in localStreams" :key="stream.sid" className="local-stream" v-bind:client="client" v-bind:stream="stream" v-bind:onClick="handleSelectStream"/>
+    <div class="stream-container" v-for="stream in localStreams" :key="stream.sid" v-on:click="handleSelectStream(stream)">
+      <stream-info v-bind:client="client" v-bind:stream="stream"></stream-info>
+      <div class="video-container" :id="stream.sid"></div>
+    </div>
     <h3>远端（订阅）流</h3>
-    <MediaPlayer v-for="stream in remoteStreams" :key="stream.sid" className="remote-stream" v-bind:client="client" v-bind:stream="stream" v-bind:onClick="handleSelectStream"/>
+    <div class="stream-container" v-for="stream in remoteStreams" :key="stream.sid" v-on:click="handleSelectStream(stream)">
+      <stream-info v-bind:client="client" v-bind:stream="stream"></stream-info>
+      <div class="video-container" :id="stream.sid"></div>
+    </div>
     <h3>操作</h3>
     <button v-on:click="handleJoinRoom">加入房间</button>
     <button v-on:click="handlePublish">发布</button>
@@ -19,9 +25,9 @@
 
 <script>
 import sdk, { Client } from 'urtc-sdk';
+import StreamInfo from '../components/StreamInfo';
 
 import config from '../config';
-import MediaPlayer from '../components/MediaPlayer.vue';
 
 const { AppId, AppKey } = config;
 
@@ -34,7 +40,7 @@ console.log('UCloudRTC sdk version: ', sdk.version);
 export default {
   name: 'Room',
   components: {
-    MediaPlayer
+    StreamInfo
   },
   data: function () {
     return {
@@ -74,6 +80,12 @@ export default {
       console.info('stream-published: ', localStream);
       const { localStreams } = this;
       localStreams.push(localStream);
+      this.$nextTick(() => {
+        this.client.play({
+          streamId: localStream.sid,
+          container: localStream.sid
+        });
+      });
     });
     this.client.on('stream-added', (remoteStream) => {
       console.info('stream-added: ', remoteStream);
@@ -91,6 +103,12 @@ export default {
       if (idx >= 0) {
         remoteStreams.splice(idx, 1, remoteStream);
       }
+      this.$nextTick(() => {
+        this.client.play({
+          streamId: remoteStream.sid,
+          container: remoteStream.sid
+        });
+      });
     });
     this.client.on('stream-removed', (remoteStream) => {
       console.info('stream-removed: ', remoteStream);
@@ -112,6 +130,12 @@ export default {
         // 更新流的信息
         streams.splice(idx, 1, current);
       }
+      this.$nextTick(() => {
+        this.client.play({
+          streamId: current.sid,
+          container: current.sid
+        });
+      });
     });
 
     window.addEventListener('beforeunload', this.handleLeaveRoom);
@@ -249,4 +273,18 @@ export default {
 .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;
+}
 </style>