Initial commit (dirty)

.gitignore

@@ -0,0 +1,4 @@
+/coverage
+/dist
+/node_modules
+npm-debug.log*

.travis.yml

@@ -0,0 +1,20 @@
+sudo: false
+
+language: node_js
+node_js:
+  - 4
+
+cache:
+  directories:
+    - node_modules
+
+before_install:
+  - npm install codecov.io coveralls
+
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
+  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+
+branches:
+  only:
+    - master

CONTRIBUTING.md

@@ -0,0 +1,27 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= v4 must be installed.
+
+## Installation
+
+- Running `npm install` in the app's root directory will install everything you need for development.
+
+## Development Server
+
+- `npm start` will run the app's development server at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` creates a production build by default.
+
+   To create a development build, set the `NODE_ENV` environment variable to `development` while running this command.
+
+- `npm run clean` will delete built resources.

README.md

@@ -0,0 +1,3 @@
+# twiliobasicapp
+
+Describe twiliobasicapp here.

nwb.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  type: 'react-app'
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "twiliobasicapp",
+  "version": "1.0.0",
+  "description": "Describe twiliobasicapp here",
+  "private": true,
+  "scripts": {
+    "build": "nwb build-react-app",
+    "clean": "nwb clean-app",
+    "start": "nwb serve-react-app",
+    "test": "nwb test",
+    "test:coverage": "nwb test --coverage",
+    "test:watch": "nwb test --server"
+  },
+  "dependencies": {
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  },
+  "devDependencies": {
+    "nwb": "0.12.x"
+  },
+  "author": "",
+  "license": "MIT",
+  "repository": ""
+}

server/app.py

@@ -0,0 +1,39 @@
+import os
+from flask import Flask, jsonify, request
+from flask_cors import CORS, cross_origin
+from faker import Factory
+from twilio.access_token import AccessToken, VideoGrant
+from dotenv import load_dotenv, find_dotenv
+
+app = Flask(__name__)
+CORS(app)
+fake = Factory.create()
+load_dotenv(find_dotenv())
+
+#@app.route('/')
+#def index():
+#    return app.send_static_file('index.html')
+
+@app.route('/token')
+def token():
+    # get credentials for environment variables
+    account_sid = os.environ['TWILIO_ACCOUNT_SID']
+    api_key = os.environ['TWILIO_API_KEY']
+    api_secret = os.environ['TWILIO_API_SECRET']
+
+    # Create an Access Token
+    token = AccessToken(account_sid, api_key, api_secret)
+
+    # Set the Identity of this token
+    token.identity = fake.user_name()
+
+    # Grant access to Video
+    grant = VideoGrant()
+    grant.configuration_profile_sid = os.environ['TWILIO_CONFIGURATION_SID']
+    token.add_grant(grant)
+
+    # Return token info as JSON
+    return jsonify(identity=token.identity, token=token.to_jwt(), roomName='ed209')
+
+if __name__ == '__main__':
+    app.run(debug=True, port=8000)

server/requirements.txt

@@ -0,0 +1,13 @@
+click==6.6
+fake-factory==0.5.3
+Flask==0.11.1
+Flask-Cors==3.0.2
+httplib2==0.9.2
+itsdangerous==0.24
+Jinja2==2.8
+MarkupSafe==0.23
+python-dotenv==0.6.0
+pytz==2016.7
+six==1.10.0
+twilio==5.6.0
+Werkzeug==0.11.11

src/App.css

@@ -0,0 +1,48 @@
+.App {
+  height: 100%;
+  min-height: 400px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+}
+
+.App-flex {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.App-heading {
+  background-color: #222;
+  color: #f8f8f8;
+  font-size: 6vh;
+  box-shadow: 0px 4px 4vh 4px rgba(34,34,34,0.9);
+  z-index: 2;
+}
+
+.App-react {
+  color: #00d8ff;
+  text-decoration: overline underline;
+}
+
+.App-logo {
+  max-height: 30vh;
+  max-width: 30vh;
+}
+
+.App-instructions {
+  background-color: #f8f8f8;
+  color: #222;
+  font-size: 3vh;
+  line-height: 1.5;
+  padding: 0 1em;
+}
+
+.App-instructions code {
+  background-color: #222;
+  color: #00d8ff;
+  padding: .2em .3em;
+  border-radius: .2em;
+}

src/App.js

@@ -0,0 +1,19 @@
+import './App.css'
+
+import React from 'react'
+
+let App = React.createClass({
+  render() {
+    return <div className="App">
+      <div className="App-heading App-flex">
+        <h2>Welcome to <span className="App-react">React</span></h2>
+      </div>
+      <div className="App-instructions App-flex">
+        <img className="App-logo" src={require('./react.svg')}/>
+        <p>Edit <code>src/App.js</code> and save to hot reload your changes.</p>
+      </div>
+    </div>
+  }
+})
+
+export default App

src/components/NotSupported.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+
+class NotSupported extends Component {
+  render() {
+    return (
+      <div className="row">
+        <div className="col-lg-12">
+          <div className="panel panel-warning">
+            <div className="panel-body">
+              WebRTC is not available in your browser.
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NotSupported;

src/components/Room.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import '../index.css'
+
+var gRoom = null;
+window.addEventListener('beforeunload', leaveRoomIfJoined);
+
+
+class NotSupported extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {connectedToRoom: false, connState:'OFFLINE'};
+
+    this.roomJoined = this.roomJoined.bind(this);
+    this.handeLeaveRoom = this.handeLeaveRoom.bind(this);
+    this.joinRoom = this.joinRoom.bind(this);
+  }
+
+  componentDidMount(){
+    this.joinRoom();
+  }
+
+  joinRoom(){
+    this.props.videoClient.connect({ to: this.props.roomName}).then(this.roomJoined,
+        function(error) {
+          console.log('Could not connect to Twilio: ' + error.message);
+        });
+  }
+  roomJoined(room){
+    this.room = room;
+    gRoom = room;
+    if(!this.previewMedia){
+      this.room.localParticipant.media.attach(this.refs.localmedia);
+    }
+    this.setState({connState:'CONNECTED'});
+
+    //CONNECT
+    this.room.participants.forEach(participant=> {
+      console.log("Already in Room: '" + participant.identity + "'");
+      participant.media.attach(this.refs.remotemedia);
+      this.setState({connState:'PARTICIPANTADD'});
+    });
+
+    // When a participant joins, draw their video on screen
+    this.room.on('participantConnected',  participant=> {
+      console.log("Joining: '" + participant.identity + "'");
+      participant.media.attach(this.refs.remotemedia);
+      this.setState({connState:'PARTICIPANTADD'});
+    });
+
+    //DISCONNECT
+    // When a participant disconnects, note in log
+    this.room.on('participantDisconnected', function (participant) {
+      console.log("Participant '" + participant.identity + "' left the room");
+      participant.media.detach();
+      this.setState({connState:'PARTICIPANTREMOVE'});
+    });
+
+    // When we are disconnected, stop capturing local video
+    // Also remove media for all remote participants
+    this.room.on('disconnected',  ()=> {
+      console.log('Left');
+      this.room.localParticipant.media.detach();
+      this.room.participants.forEach(function(participant) {
+        participant.media.detach();
+      });
+      this.setState({connState:'DISCONNECTED'});
+      this.room = null;
+    });
+  }
+
+  handeLeaveRoom(){
+    console.log("handeLeaveRoom");
+    this.room.disconnect();
+    this.setState({connState:'DISCONNECTED'});
+  }
+
+  render() {
+    var leaveRoomButton = "";
+    if(this.state.connState=="CONNECTED"){
+      leaveRoomButton = <button onClick={this.handeLeaveRoom} className="btn btn-default">Leave Room</button>
+    }
+    var joinRoomButton = "";
+    if(this.state.connState=="DISCONNECTED"){
+      joinRoomButton = <button onClick={this.joinRoom} className="btn btn-default">Join Room</button>
+    }
+    return (
+
+      <div className="row">
+
+        <div id="callPanel" className="panel panel-default" style={{display: 'block' }}>
+          <div className="panel-heading">
+            <h3 className="panel-title">Call with PUT_NAME_HERE</h3>
+          </div>
+          <div className="panel-body">
+            <div id="videoPanel">
+              <div id="remoteVideo"  ref="remotemedia"></div>
+              <div id="localVideo"  ref="localmedia"></div>
+              <div id="remoteVideoBg" style={{display: 'none' }}></div>
+              <div id="localVideoBg" style={{display: 'none' }}></div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-sm-12">
+          {leaveRoomButton}{joinRoomButton}
+        </div>
+
+      </div>
+
+    );
+  }
+}
+
+function leaveRoomIfJoined() {
+  if (gRoom) {
+    gRoom.disconnect();
+  }
+}
+export default NotSupported;

src/components/StandBy.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+
+class StandBy extends Component {
+  render() {
+    return (
+      <div className="row">
+        <div className="col-lg-12">
+          <div className="panel panel-default">
+            <div className="panel-body">
+              Stand By
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StandBy;