Merge pull request #11 from kevinjpuscan/master

add audio and video controlls

Author: diegogurgel

src/components/Icons.js

@@ -0,0 +1,20 @@
+import React from 'react'
+export const ShareScreenIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="greenyellow" d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.11-.9-2-2-2H4c-1.11 0-2 .89-2 2v10c0 1.1.89 2 2 2H0v2h24v-2h-4zm-7-3.53v-2.19c-2.78 0-4.61.85-6 2.72.56-2.67 2.11-5.33 6-5.87V7l4 3.73-4 3.74z"/></svg>
+);
+
+export const MicOnIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="greenyellow" d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+)
+
+export const MicOffIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path fill="greenyellow" d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/></svg>
+)
+
+export const CamOnIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path fill="greenyellow" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
+)
+
+export const CamOffIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path fill="greenyellow" d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"/></svg>
+)

src/components/ShareScreenIcon.js

@@ -3,7 +3,8 @@ import VideoCall from '../helpers/simple-peer';
 import '../styles/video.css';
 import io from 'socket.io-client';
 import { getDisplayStream } from '../helpers/media-access';
-import ShareScreenIcon from './ShareScreenIcon';
+import {ShareScreenIcon,MicOnIcon,MicOffIcon,CamOnIcon,CamOffIcon} from './Icons';
+
 class Video extends React.Component {
   constructor() {
     super();
@@ -15,10 +16,13 @@ class Video extends React.Component {
       peer: {},
       full: false,
       connecting: false,
-      waiting: true
+      waiting: true,
+      micState:true,
+      camState:true,
     };
   }
   videoCall = new VideoCall();
+
   componentDidMount() {
     const socket = io(process.env.REACT_APP_SIGNALING_SERVER);
     const component = this;
@@ -27,6 +31,7 @@ class Video extends React.Component {
     this.getUserMedia().then(() => {
       socket.emit('join', { roomId: roomId });
     });
+
     socket.on('init', () => {
       component.setState({ initiator: true });
     });
@@ -45,6 +50,8 @@ class Video extends React.Component {
       component.setState({ full: true });
     });
   }
+
+
   getUserMedia(cb) {
     return new Promise((resolve, reject) => {
       navigator.getUserMedia = navigator.getUserMedia =
@@ -69,6 +76,29 @@ class Video extends React.Component {
       );
     });
   }
+
+  setAudioLocal(){
+    if(this.state.localStream.getAudioTracks().length>0){
+      this.state.localStream.getAudioTracks().forEach(track => {
+        track.enabled=!track.enabled;
+      });
+    }
+    this.setState({
+      micState:!this.state.micState
+    })
+  }
+
+  setVideoLocal(){
+    if(this.state.localStream.getVideoTracks().length>0){
+      this.state.localStream.getVideoTracks().forEach(track => {
+        track.enabled=!track.enabled;
+      });
+    }
+    this.setState({
+      camState:!this.state.camState
+    })
+  }
+
   getDisplay() {
     getDisplayStream().then(stream => {
       stream.oninactive = () => {
@@ -82,6 +112,7 @@ class Video extends React.Component {
       this.state.peer.addStream(stream);
     });
   }
+
   enter = roomId => {
     this.setState({ connecting: true });
     const peer = this.videoCall.init(
@@ -105,6 +136,7 @@ class Video extends React.Component {
       console.log(err);
     });
   };
+
   call = otherId => {
     this.videoCall.connect(otherId);
   };
@@ -132,14 +164,51 @@ class Video extends React.Component {
           id='remoteVideo'
           ref={video => (this.remoteVideo = video)}
         />
+
+        <div className='controls'>
         <button
-          className='share-screen-btn'
+          className='control-btn'
           onClick={() => {
             this.getDisplay();
           }}
         >
           <ShareScreenIcon />
         </button>
+
+
+        <button
+        className='control-btn'
+          onClick={() => {
+            this.setAudioLocal();
+          }}
+        >
+          {
+            this.state.micState?(
+              <MicOnIcon></MicOnIcon>
+            ):(
+              <MicOffIcon></MicOffIcon>
+            )
+          }
+        </button>
+
+        <button
+        className='control-btn'
+          onClick={() => {
+            this.setVideoLocal();
+          }}
+        >
+          {
+            this.state.camState?(
+              <CamOnIcon></CamOnIcon>
+            ):(
+              <CamOffIcon></CamOffIcon>
+            )
+          }
+        </button>
+        </div>
+        
+
+
         {this.state.connecting && (
           <div className='status'>
             <p>Establishing connection...</p>

src/components/video.js

@@ -30,10 +30,15 @@
   color: greenyellow;
   height: 100vh;
 }
-.share-screen-btn{
+
+.controls{
   position: absolute;
   bottom: 24px;
   left: 24px;
+}
+.control-btn{
+  position: relative;
+  margin-right: 24px;
   background: transparent;
   outline: none;
   border: none;
@@ -43,6 +48,7 @@
   height: 64px;
   width: 64px;
 }
+
 @media screen and (max-width: 480px) {
   .video-wrapper {
     position: relative;