v1.3.0-beta/begin voice call

app/src/CallManager.js

@@ -0,0 +1,67 @@
+/* global webkitRTCPeerConnection */
+const emptyListener = (e) => console.log('EMPTY LISTENER FOR PHONE MANAGER', e);
+
+const CONFIG = {
+  iceServers: [
+    {
+      urls: [
+        'stun:stun.l.google.com:19302',
+        'stun:stun1.l.google.com:19302',
+        'stun:stun2.l.google.com:19302',
+        'stun:stun3.l.google.com:19302',
+        'stun:stun4.l.google.com:19302',
+      ],
+    },
+  ],
+  iceCandidatePoolSize: 10,
+};
+
+export default class PhoneManager {
+  constructor(listener = emptyListener) {
+    this.mediaStream = null;
+    this.listener = listener;
+    /* B I N D S */
+    this.joinCall = this.joinCall.bind(this);
+    this.getMediaStream = this.getMediaStream.bind(this);
+  }
+  async getMediaStream() {
+    return new Promise((resolve, reject) => {
+      if (this.mediaStream !== null && this.mediaStream !== undefined) resolve(true);
+      navigator.mediaDevices
+        .getUserMedia({
+          video: false,
+          audio: true,
+        })
+        .then((mediaStream) => {
+          this.mediaStream = mediaStream;
+          resolve(true);
+        })
+        .catch((error) => reject(error));
+    });
+  }
+  async joinCall() {
+    await this.getMediaStream();
+
+    var peerConnection = new webkitRTCPeerConnection(CONFIG);
+    console.log('Created Peer Connection', peerConnection);
+
+    peerConnection.addTrack(this.mediaStream.getAudioTracks()[0], this.mediaStream);
+    peerConnection.onicecandidate = (ev) => console.log('Got ICE', ev);
+
+    var offer = peerConnection.createOffer();
+    console.log('Created Offer', offer);
+
+    var answer = peerConnection.createAnswer();
+    console.log('Created Answer', answer);
+  }
+  async leaveCall() {
+    if (this.mediaStream !== null && this.mediaStream !== undefined) {
+      this.mediaStream.getAudioTracks().forEach((track) => track.stop());
+    }
+  }
+  toggleMute() {
+    if (this.mediaStream !== null && this.mediaStream !== undefined) {
+      this.mediaStream.getAudioTracks().forEach((track) => (track.enabled = !track.enabled));
+    }
+  }
+}

app/src/Chat.js

@@ -31,6 +31,7 @@ import {
 import { goTo } from 'route-lite';
 import Create from './Create';
 import VideoListener from './VideoListener';
+import CallManager from './CallManager';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 const alertMessage = {
@@ -63,6 +64,7 @@ export default class Chat extends Component {
     this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
     this.videoEventListener = this.videoEventListener.bind(this);
     this.mVideoListener = new VideoListener(this.videoEventListener);
+    this.mCallManager = new CallManager();
   }
   componentDidMount() {
     // EVENT CAPTURE FOR ENTER TO SEND
@@ -213,23 +215,10 @@ export default class Chat extends Component {
       ? giphyFetch.trending({ offset, limit: 1 })
       : giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
   }
-  handlePhoneCall() {
+  async handlePhoneCall() {
-    if (!this.state.onCall) {
+    if (!this.state.onCall) this.mCallManager.joinCall();
-      navigator.mediaDevices
+    else this.mCallManager.leaveCall();
-        .getUserMedia({
+    this.setState({ onCall: !this.state.onCall });
-          video: false,
-          audio: true,
-        })
-        .then((mediaStream) => {
-          this.setState({ onCall: true, muted: false });
-          console.log('GOT DEVICE');
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    } else {
-      this.setState({ onCall: false });
-    }
   }
   render() {
     const { admin, name, messages, newMessage, gif, onCall, muted } = this.state;
@@ -264,6 +253,20 @@ export default class Chat extends Component {
           <Thread messages={messages} />
         </div>
         <div className="text-phone-panel">
+          {newMessage ? null : (
+            <IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
+              {onCall ? <PhoneDisable /> : <PhoneEnable />}
+            </IconButton>
+          )}
+          {!newMessage && onCall && !muted ? (
+            <IconButton onClick={() => this.mCallManager.toggleMute()} color="secondary">
+              <MicOff />
+            </IconButton>
+          ) : !newMessage && onCall && muted ? (
+            <IconButton onClick={() => this.mCallManager.toggleMute()} color="primary">
+              <MicOn />
+            </IconButton>
+          ) : null}
           <TextField
             multiline
             rowsMax="3"
@@ -305,18 +308,6 @@ export default class Chat extends Component {
               ),
             }}
           />
-          <IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
-            {onCall ? <PhoneDisable /> : <PhoneEnable />}
-          </IconButton>
-          {onCall && !muted ? (
-            <IconButton color="secondary">
-              <MicOff />
-            </IconButton>
-          ) : onCall && muted ? (
-            <IconButton color="primary">
-              <MicOn />
-            </IconButton>
-          ) : null}
         </div>
         {gif ? (
           <Carousel

app/src/index.css

@@ -249,6 +249,9 @@ body.amazon-prime textarea:focus {
 textarea::-webkit-scrollbar {
   display: none;
 }
+.chat-message-box {
+  flex: 1;
+}
 .chat-message-box > div {
   border-radius: 26px;
 }