[vue demo] - iOS 订阅流兼容性处理

examples/vue/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.4.3",
     "unique-classnames": "^1.0.6",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "urtc-sdk": "latest"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

examples/vue/src/components/MediaPlayer.vue

@@ -4,14 +4,20 @@
     <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 v-show="stream.mediaStream">
+    <div class="video-container" v-show="stream.mediaStream">
       <video
         ref="video"
         webkit-playsinline
         autoplay
         playsinline
-        v-bind:controls="isIOS">
+        v-bind:muted="isIOS">
       </video>
+      <div class="muted-mask" v-show="isMuted">
+        <div class="mask-content">
+          <div class="hint">由于iOS系统限制，视频自动播放时需要静音，请点击下面的按钮来取消静音</div>
+          <button @click.stop="handleUnmute">取消静音</button>
+        </div>
+      </div>
     </div>
     <p v-show="!stream.mediaStream">unsubscribe</p>
   </div>
@@ -39,7 +45,8 @@ export default {
         rtt: 0,
         biggestRTT: 0
       },
-      isIOS: isIOS()
+      isIOS: isIOS(),
+      isMuted: isIOS()
     };
   },
   props: {
@@ -163,6 +170,12 @@ export default {
     handleClick: function () {
       const { stream, onClick } = this;
       onClick && onClick(stream);
+    },
+    handleUnmute: function () {
+      if (this.$refs.video) {
+        this.$refs.video.muted = false;
+        this.isMuted = false;
+      }
     }
   }
 };
@@ -179,6 +192,39 @@ export default {
   cursor: pointer;
 }
 
+.media-player .video-container {
+  position: relative;
+}
+
+.media-player .muted-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 {
+  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%;

examples/vue/src/pages/Room.vue

@@ -18,8 +18,7 @@
 </template>
 
 <script>
-// 注：实际使用时，请使用 import sdk, { Client } from 'urtc-sdk';
-import sdk, { Client } from '@sdk';
+import sdk, { Client } from 'urtc-sdk';
 
 import config from '../config';
 import MediaPlayer from '../components/MediaPlayer.vue';
@@ -209,7 +208,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style>
 .room {
   max-width: 640px;
   margin: 0 auto;

examples/vue/vue.config.js

@@ -1,7 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  chainWebpack: (config) => {
-    config.resolve.alias.set('@sdk', path.resolve(__dirname, '../../lib'));
-  }
-}