[react demo] - 与 purejs 版统一

examples/react/README.md

@@ -0,0 +1,23 @@
+# URTC-demo（React 版本）
+
+## 运行步骤
+
+1. 添加配置
+
+详见 config 目录下的 README
+
+2. 安装 npm 依赖包
+
+```
+npm install
+```
+
+3. 执行运行命令
+
+```
+npm start
+```
+
+4. 打开页面
+
+浏览器打开 http://localhost:3000

examples/react/src/App.js

@@ -6,6 +6,8 @@ function App() {
   return (
     <div className="App">
       <Room/>
+      <br/>
+      <a href="https://github.com/ucloud/urtc-sdk-web" target="_blank">API 文档请看这里</a>
     </div>
   );
 }

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

@@ -3,10 +3,10 @@
   margin: 0 auto;
 }
 
-.room input {
-  padding: 4px 0;
+.room .local-stream,
+.room .remote-stream {
+  text-align: left;
 }
-
 .room button {
   padding: 8px 0;
   display: inline-block;

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

@@ -202,11 +202,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.handleChooseStream} /> :
-        <div className="remote-stream" key={stream.sid} onClick={() => { this.handleSelectStream(stream) }}>
+        <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>
-          <div style={{ width: '100%' }}> unsubscribe </div>
+          <p> unsubscribe </p>
         </div>;
     });
   }