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

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

@@ -1,49 +0,0 @@
-.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%;
-}

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

@@ -1,22 +1,19 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'unique-classnames';
-import './index.css';
 
-export default class MediaPlayer extends Component {
+export default class StreamInfo extends Component {
   static propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
     stream: PropTypes.object,
     client: PropTypes.object,
-    onClick: PropTypes.func,
   };
   static defaultProps = {
     className: '',
     style: {},
     stream: {},
     client: null,
-    onClick: () => { },
   };
 
   constructor(props) {
@@ -32,7 +29,6 @@ export default class MediaPlayer extends Component {
         rtt: 0,
         biggestRTT: 0,
       },
-      showPlayMask: false
     }
     this.volumeTimer = 0;
     this.stateTimer = 0;
@@ -42,7 +38,7 @@ export default class MediaPlayer extends Component {
     this.isComponentMounted = true;
     const { stream } = this.props;
     if (stream.mediaStream) {
-      this.play();
+      this.start();
     }
   }
 
@@ -50,7 +46,7 @@ export default class MediaPlayer extends Component {
     if (!nextProps.stream.mediaStream) {
       this.stop();
     } else if (nextProps.stream.mediaStream !== this.props.stream.mediaStream) {
-      this.play();
+      this.start();
     }
   }
 
@@ -59,20 +55,7 @@ export default class MediaPlayer extends Component {
     this.isComponentMounted = false;
   }
 
-  play() {
-    const { client, stream } = this.props;
-    const mirror = stream.type === 'publish';
-    client.play({
-      streamId: stream.sid,
-      container: stream.sid,
-      mirror: mirror
-    }, (err) => {
-      if (err) {
-        this.setState({
-          showPlayMask: true
-        });
-      }
-    });
+  start() {
     this.startGetVolume();
     this.startGetState();
   }
@@ -146,11 +129,6 @@ export default class MediaPlayer extends Component {
     clearInterval(this.stateTimer);
   }
 
-  handleClick = () => {
-    const { stream, onClick } = this.props;
-    onClick && onClick(stream);
-  }
-
   renderStats = () => {
     const { stream } = this.props;
     const { volume, stats } = this.state;
@@ -162,46 +140,17 @@ export default class MediaPlayer extends Component {
       : null;
   }
 
-  handlePlay = () => {
-    const { client, stream } = this.props;
-    client.resume(stream.sid, (err) => {
-      if (err) {
-        console.log(`播放失败 ${err}`);
-        alert(`播放失败 ${err}`);
-      } else {
-        this.setState({
-          showPlayMask: false
-        });
-      }
-    });
-  }
-
-  renderVideoMask = () => {
-    const { showPlayMask } = this.state;
-    return showPlayMask ? (
-      <div className="play-mask">
-        <div className="mask-content">
-          <div className="hint">由于当前浏览器不支持视频自动播放，请点击下面的按钮来播放</div>
-          <button onClick={this.handlePlay}>播放</button>
-        </div>
-      </div>
-    ) : null;
-  }
-
   render() {
     const { stream, className, style } = this.props;
 
-    const classes = classnames('media-player', className);
+    const classes = classnames('stream-info', className);
     const hasMediaStream = !!stream.mediaStream;
 
     return (
-      <div className={classes} style={style} onClick={this.handleClick}>
+      <div className={classes} style={style}>
         <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>用户ID: {stream.uid}</div>
         <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>流ID: {stream.sid}</div>
         { this.renderStats() }
-        <div className="video-container" id={stream.sid} style={{ display: hasMediaStream ? 'block' : 'none' }}>
-          { this.renderVideoMask() }
-        </div>
         <p style={{ display: hasMediaStream ? 'none' : 'block' }}> unsubscribe </p>
       </div>
     )

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

@@ -24,4 +24,18 @@
 .room button:hover,
 .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;
 }

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import sdk, { Client } from 'urtc-sdk';
 
 import config from '../../config';
-import MediaPlayer from '../../components/MediaPlayer';
+import StreamInfo from '../../components/StreamInfo';
 import './index.css';
 
 const { AppId, AppKey } = config;
@@ -45,7 +45,12 @@ export default class Room extends Component {
       console.info('stream-published: ', localStream);
       const { localStreams } = this.state;
       localStreams.push(localStream);
-      this.setState({ localStreams });
+      this.setState({ localStreams }, () => {
+        this.client.play({
+          streamId: localStream.sid,
+          container: localStream.sid,
+        });
+      });
     });
     this.client.on('stream-added', (remoteStream) => {
       console.info('stream-added: ', remoteStream);
@@ -64,7 +69,12 @@ export default class Room extends Component {
       if (idx >= 0 ) {
         remoteStreams.splice(idx, 1, remoteStream);
       }
-      this.setState({ remoteStreams });
+      this.setState({ remoteStreams }, () => {
+        this.client.play({
+          streamId: remoteStream.sid,
+          container: remoteStream.sid,
+        });
+      });
     });
     this.client.on('stream-removed', (remoteStream) => {
       console.info('stream-removed: ', remoteStream);
@@ -87,10 +97,16 @@ export default class Room extends Component {
         // 更新流的信息
         streams.splice(idx, 1, current);
       }
+      const playFunc = () => {
+        this.client.play({
+          streamId: current.sid,
+          container: current.sid,
+        });
+      }
       if (isLocalStream) {
-        this.setState({ localStreams: streams });
+        this.setState({ localStreams: streams }, playFunc);
       } else {
-        this.setState({ remoteStreams: streams });
+        this.setState({ remoteStreams: streams }, playFunc);
       }
     });
 
@@ -212,7 +228,10 @@ export default class Room extends Component {
     const { localStreams } = this.state;
     return localStreams.map(stream => {
       return stream.mediaStream ?
-        <MediaPlayer className="local-stream" key={stream.sid} client={this.client} stream={stream} onClick={this.handleSelectStream}/> :
+        <div className="stream-container" key={stream.sid} onClick={() => this.handleSelectStream(stream)}>
+          <StreamInfo client={this.client} stream={stream}></StreamInfo>
+          <div className="video-container" id={stream.sid}></div>
+        </div> :
         null;
     });
   }
@@ -220,12 +239,11 @@ export default class Room extends Component {
     const { remoteStreams } = this.state;
     return remoteStreams.map(stream => {
       return stream.mediaStream ?
-        <MediaPlayer className="remote-stream" key={stream.sid} client={this.client} stream={stream} onClick={this.handleSelectStream} /> :
-        <div className="media-player remote-stream" key={stream.sid} onClick={() => { this.handleSelectStream(stream) }}>
-          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>用户ID: {stream.uid}</div>
-          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>流ID: {stream.sid}</div>
-          <p> unsubscribe </p>
-        </div>;
+        <div className="stream-container" key={stream.sid} onClick={() => this.handleSelectStream(stream)}>
+          <StreamInfo client={this.client} stream={stream}></StreamInfo>
+          <div className="video-container" id={stream.sid}></div>
+        </div> :
+        null;
     });
   }