[react demo] - 检测浏览器是否支持自动播放

examples/react/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "UCloud RTC react 版本的 demo",
   "dependencies": {
+    "can-autoplay": "^3.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "unique-classnames": "^1.0.6",

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

@@ -11,7 +11,8 @@
   position: relative;
 }
 
-.media-player .muted-mask {
+.media-player .muted-mask,
+.media-player .play-mask {
   position: absolute;
   top: 0;
   right: 0;
@@ -26,7 +27,8 @@
   align-items: center;
 }
 
-.muted-mask .mask-content {
+.muted-mask .mask-content,
+.play-mask .mask-content {
   max-width: 200px;
 }
 

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

@@ -1,12 +1,9 @@
 import React, { Component, Fragment } from 'react';
+import canAutoplay from 'can-autoplay';
 import PropTypes from 'prop-types';
 import classnames from 'unique-classnames';
 import './index.css';
 
-function isIOS() {
-  return /.*iphone.*/i.test(navigator.userAgent);
-}
-
 export default class MediaPlayer extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -34,13 +31,13 @@ export default class MediaPlayer extends Component {
         videoLost: 0,
         biggestVideoLost: 0,
         rtt: 0,
-        biggestRTT: 0
+        biggestRTT: 0,
+        canAutoplay: true
       },
     }
     this.volumeTimer = 0;
     this.stateTimer = 0;
     this.videoElem = React.createRef();
-    this.isIOS = isIOS();
   }
 
   componentDidMount() {
@@ -49,6 +46,11 @@ export default class MediaPlayer extends Component {
     if (stream.mediaStream) {
       this.play(stream.mediaStream);
     }
+    canAutoplay.video().then(res => {
+      this.setState({
+        canAutoplay: res.result
+      });
+    });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -156,8 +158,10 @@ export default class MediaPlayer extends Component {
       : null;
   }
 
-  handleUnmute = () => {
-    this.videoElem.current.muted = false;
+  handlePlay = () => {
+    if (this.videoElem.current && this.videoElem.current.paused) {
+      this.videoElem.current.play();
+    }
   }
 
   renderVideoMask = () => {
@@ -165,18 +169,17 @@ export default class MediaPlayer extends Component {
     if (!stream || stream.type !== 'subscribe') {
       return null;
     }
-    if (!this.isIOS) {
-      return null;
-    }
-    if (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>
+    if (this.videoElem.current && this.videoElem.current.paused) {
+      if (!this.state.canAutoplay) {
+        return (
+          <div className="play-mask">
+            <div className="mask-content">
+              <div className="hint">由于当前浏览器不支持视频自动播放，请点击下面的按钮来播放</div>
+              <button onClick={this.handlePlay}>播放</button>
+            </div>
           </div>
-        </div>
-      )
+        )
+      }
     }
     return null;
   }
@@ -197,8 +200,7 @@ export default class MediaPlayer extends Component {
             ref={this.videoElem}
             webkit-playsinline="true"
             autoPlay
-            playsInline
-            muted={this.isIOS}>
+            playsInline>
           </video>
           { this.renderVideoMask() }
         </div>

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

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-
 import sdk, { Client } from 'urtc-sdk';
 
 import config from '../../config';