[react demo] - iOS 兼容性处理

examples/react/package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "unique-classnames": "^1.0.6"
+    "unique-classnames": "^1.0.6",
+    "urtc-sdk": "latest"
   },
   "scripts": {
     "start": "react-app-rewired start",

examples/react/src/components/MediaPlayer/index.css

@@ -7,6 +7,39 @@
   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/react/src/components/MediaPlayer/index.jsx

@@ -156,6 +156,23 @@ export default class MediaPlayer extends Component {
       : null;
   }
 
+  handleUnmute = () => {
+    this.videoElem.current.muted = false;
+  }
+
+  renderVideoMask = () => {
+    if (this.isIOS && this.videoElem.current && this.videoElem.current.muted) {
+      return (
+        <div className="muted-mask">
+          <div className="mask-content">
+            <div className="hint">由于iOS系统限制，视频自动播放时需要静音，需要您点击下面按钮来取消静音</div>
+            <button onClick={this.handleUnmute}>取消静音</button>
+          </div>
+        </div>
+      )
+    }
+  }
+
   render() {
     const { stream, className, style } = this.props;
 
@@ -167,14 +184,15 @@ export default class MediaPlayer extends Component {
         <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>用户ID: {stream.uid}</div>
         <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>流ID: {stream.sid}</div>
         { this.renderStats() }
-        <div style={{ display: hasMediaStream ? 'block' : 'none' }}>
+        <div className="video-container" style={{ display: hasMediaStream ? 'block' : 'none' }}>
           <video
             ref={this.videoElem}
             webkit-playsinline="true"
             autoPlay
             playsInline
-            controls={this.isIOS}>
+            muted={this.isIOS}>
           </video>
+          { this.renderVideoMask() }
         </div>
         <p style={{ display: hasMediaStream ? 'none' : 'block' }}> unsubscribe </p>
       </div>

examples/react/src/pages/room/index.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 
-// 注：实际使用时，请使用 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';