Merge pull request #1 from disoul/develop

v0.1.0

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+build/
+*.log
+.DS_Store

Demo/Dockerfile

@@ -0,0 +1,2 @@
+FROM nginx
+COPY ./dist/* /usr/share/nginx/html/

Demo/README.md

@@ -0,0 +1,18 @@
+# QNRTC Web Demo
+
+## 运行
+
+```
+yarn install
+npm run start
+```
+
+## 注意事项
+- Chrome 只允许 localhost 或者 https 页面访问媒体设备(摄像头)，开发时请确保通过 localhost 来访问
+- 请使用 Chrome 56 以上版本访问
+
+## 代码说明
+
+使用 mobx 和 react 进行开发，关于和连麦服务核心相关的代码在
+[AppStore](./src/app/stores/AppStore.ts) 和
+[RoomPage](./src/app/containers/RoomPage/index.tsx) 中    

Demo/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "pili-rtc-web-demo",
+  "version": "0.1.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --hot --progress --colors --port 4000 --open",
+    "build": "webpack -p --progress --colors",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "test": "jest"
+  },
+  "license": "MIT",
+  "jest": {
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.3",
+    "@types/jest": "^22.2.2",
+    "@types/node": "^9.4.6",
+    "@types/react": "^16.0.40",
+    "@types/react-dom": "^16.0.4",
+    "@types/react-router": "^4.0.22",
+    "@types/webpack": "^3.8.8",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "^7.1.3",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.10",
+    "enzyme": "^3.3.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "html-loader": "^1.0.0-alpha.0",
+    "html-webpack-plugin": "^3.0.4",
+    "jest": "^22.4.3",
+    "mobx-react-devtools": "^4.2.15",
+    "postcss": "^6.0.19",
+    "postcss-browser-reporter": "^0.5.0",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.1",
+    "postcss-pxtorem": "^4.0.1",
+    "postcss-reporter": "^5.0.0",
+    "postcss-url": "^7.3.1",
+    "precss": "^3.1.2",
+    "prettier": "^1.11.1",
+    "puppeteer": "^1.2.0",
+    "react-hot-loader": "^4.0.0",
+    "style-loader": "^0.20.2",
+    "ts-jest": "^22.4.2",
+    "ts-loader": "^4.0.0",
+    "tslint": "^5.9.1",
+    "tslint-react": "^3.5.1",
+    "typescript": "^2.7.2",
+    "url-loader": "^1.0.0-beta.0",
+    "webpack": "^4.0.1",
+    "webpack-cleanup-plugin": "^0.5.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0",
+    "webpack-hot-middleware": "^2.21.1"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "clipboard": "^2.0.0",
+    "material-ui": "^1.0.0-beta.36",
+    "material-ui-icons": "^1.0.0-beta.36",
+    "mobx": "^3.6.1",
+    "mobx-react": "^4.4.2",
+    "mobx-react-router": "^4.0.1",
+    "mobx-utils": "^3.2.2",
+    "pili-rtc-web": "^0.1.0",
+    "react": "^16.2.0",
+    "react-avatar": "^2.5.1",
+    "react-dom": "^16.2.0",
+    "react-draggable": "^3.0.5",
+    "react-motion": "^0.5.2",
+    "react-router": "^4.2.0",
+    "seedrandom": "^2.4.3",
+    "store": "^2.0.12"
+  }
+}

Demo/src/app/components/Header/index.tsx

@@ -0,0 +1,92 @@
+/*
+ * index.tsx
+ * Copyright (C) 2018 disoul <[email protected]>
+ *
+ * Distributed under terms of the MIT license.
+ */
+import * as React from 'react';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import Typography from 'material-ui/Typography';
+import Button from 'material-ui/Button';
+import TextField from 'material-ui/TextField';
+import Dialog, {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from 'material-ui/Dialog';
+
+import * as styles from './style.css';
+
+interface Props {
+  userId?: string;
+  onLogin: (userId: string) => void;
+}
+
+interface State {
+  showLogin: boolean;
+  userId: string;
+}
+
+export class Header extends React.Component<Props, State> {
+  state = {
+    showLogin: false,
+    userId: '',
+  }
+
+  handleLogin = () => {
+    this.setState({
+      showLogin: true,
+    })
+  }
+
+  handleLoginEnter = () => {
+    this.props.onLogin(this.state.userId);
+    this.handleLoginCancel();
+  }
+
+  handleLoginCancel = () => {
+    this.setState({
+      showLogin: false,
+    })
+  }
+
+  render() {
+    return (
+      <AppBar position="static">
+        <Toolbar>
+          <Typography variant="title" color="inherit" className={styles.title}>
+            Qiniu RTC Demo
+          </Typography>
+          <div className={styles.header_blank} />
+          <Button color="inherit" onClick={this.handleLogin}>{this.props.userId || '登录'}</Button>
+        </Toolbar>
+        <Dialog
+          open={this.state.showLogin}
+          onClose={this.handleLoginCancel}
+        >
+          <DialogTitle>登录</DialogTitle>
+          <DialogContent>
+            <DialogContentText>请输入一个用户标识</DialogContentText>
+            <TextField
+              autoFocus
+              margin="dense"
+              value={this.state.userId}
+              onChange={(e) => this.setState({ userId: e.target.value })}
+              fullWidth
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleLoginCancel} color="primary">
+              取消
+            </Button>
+            <Button onClick={this.handleLoginEnter} color="primary">
+              登录
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </AppBar>
+    );
+  }
+}

Demo/src/app/components/Header/style.css

@@ -0,0 +1,10 @@
+/*
+ * style.css
+ * Copyright (C) 2018 disoul
+ *
+ * Distributed under terms of the MIT license.
+ */
+.header_blank {
+  flex: 1;
+}
+

Demo/src/app/components/LoadingButton/index.tsx

@@ -0,0 +1,19 @@
+/*
+ * index.tsx
+ * Copyright (C) 2018 disoul <[email protected]>
+ *
+ * Distributed under terms of the MIT license.
+ */
+import * as React from 'react';
+
+interface Props {
+}
+
+interface State {
+}
+
+export class LoadingButton extends React.Component<Props, State> {
+  render() {
+    return null;
+  }
+}

Demo/src/app/components/LocalPlayer/index.tsx

@@ -0,0 +1,35 @@
+/*
+ * index.tsx
+ * Copyright (C) 2018 disoul <[email protected]>
+ *
+ * Distributed under terms of the MIT license.
+ */
+import * as React from 'react';
+import * as styles from './style.css'
+
+interface Props {
+  className?: string
+  videoClassName?: string
+}
+
+interface State {
+}
+
+export class LocalPlayer extends React.Component<Props, State> {
+  video: HTMLVideoElement
+
+  getVideoElement = () => this.video
+
+  render() {
+    return (
+      <div className={this.props.className}>
+        <video
+          className={`${this.props.videoClassName || ''} ${styles.video}`}
+          autoPlay
+          muted
+          ref={ref => this.video = ref}
+        />
+      </div>
+    );
+  }
+}

Demo/src/app/components/LocalPlayer/style.css

@@ -0,0 +1,11 @@
+/*
+ * style.css
+ * Copyright (C) 2018 disoul
+ *
+ * Distributed under terms of the MIT license.
+ */
+
+.video {
+  width: 100%;
+  height: 100%;
+}

Demo/src/app/components/RemotePlayer/index.tsx

@@ -0,0 +1,72 @@
+/*
+ * index.tsx
+ * Copyright (C) 2018 disoul <disoul@DiSouldeMBP>
+ *
+ * Distributed under terms of the MIT license.
+ */
+import * as React from 'react';
+import MicIcon from 'material-ui-icons/Mic';
+import MicOffIcon from 'material-ui-icons/MicOff';
+
+import * as styles from './style.css';
+
+interface Props {
+  id?: string
+  userId: string;
+  streamId: string | null;
+  muteAudio?: boolean;
+  muteVideo?: boolean;
+  color: string;
+  onVideoReady: (video: HTMLVideoElement, streamid: string) => any;
+  onContextMenu: (e: any) => any;
+}
+
+interface State {
+}
+
+export class RemotePlayer extends React.Component<Props, State> {
+  public video: HTMLVideoElement;
+
+  public constructor(props: Props) {
+    super(props);
+  }
+
+  public componentDidMount(): void {
+    console.log('componetDidMount');
+    this.props.onVideoReady(this.video, this.props.userId);
+  }
+
+  private handleDoubleClick = () => {
+    if (!this.props.streamId || this.props.muteVideo) {
+      return;
+    }
+
+    if (this.video.webkitRequestFullscreen) {
+      this.video.webkitRequestFullscreen();
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+        <div
+          className={styles.container}
+          onContextMenu={this.props.onContextMenu}
+          onDoubleClick={this.handleDoubleClick}
+          style={{
+            background: !!this.props.streamId ? this.props.color : '#9E9E9E',
+          }}
+          id={this.props.id}
+        >
+          { !this.props.muteAudio ? <MicIcon className={styles.mic} /> : <MicOffIcon className={styles.mic} /> }
+          <video
+            autoPlay
+            ref={ref => this.video = ref}
+            style={{
+              visibility: !!this.props.streamId && !this.props.muteVideo ? 'visible' : 'hidden',
+            }}
+          />
+          <p className={styles.user}>{this.props.userId}</p>
+        </div>
+    );
+  }
+}