camera feature detection

react/src/components/dashboard/qrModal/qrModal.js

@@ -13,7 +13,7 @@ class QRModal extends React.Component {
     super(props);
     this.state = {
       modalIsOpen: false,
-      error: ''
+      error: null,
     };
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
@@ -32,23 +32,35 @@ class QRModal extends React.Component {
   }
 
   handleError(err) {
-    this.setState({error: err});
+    this.setState({
+      error: err,
+    });
   }
 
   openModal() {
-    this.setState({modalIsOpen: true});
+    this.setState({
+      modalIsOpen: true
+    });
+
     if (this.props.mode === 'scan') {
       ReactDOM.render(
         <QrReader
           delay={50}
-          style={{ height: 281, width: 500, transform: 'scaleX(-1)' }} 
+          style={{
+            height: 281,
+            width: 500,
+            transform: 'scaleX(-1)'
+          }}
           onError={ this.handleError }
           onScan={ this.handleScan } />, document.getElementById('webcam'));
     }
   }
 
   closeModal() {
-    this.setState({modalIsOpen: false});
+    this.setState({
+      modalIsOpen: false,
+    });
+
     if (this.props.mode === 'scan') {
       ReactDOM.unmountComponentAtNode(document.getElementById('webcam'));
     }

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -8,24 +8,19 @@ export const QRModalRender = function () {
       <span className="label label-default margin-left-10 action"
         title={ translate('INDEX.QRCODE') }
         onClick={ this.openModal }>
-        <i className="icon fa-qrcode" aria-hidden="true"></i>
+        <i className="icon fa-qrcode"></i>
       </span>
       <div
         className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
-        id="QRModal"
+        id="QRModal">
-        aria-hidden="true"
-        aria-labelledby="QRModal"
-        role="dialog"
-        tabIndex="-1">
         <div className="modal-dialog modal-center modal-sm">
           <div className="modal-content">
             <div className="modal-header bg-orange-a400 wallet-send-header">
               <button
                 type="button"
                 className="close white"
-                aria-label="Close"
                 onClick={ this.closeModal }>
-                <span aria-hidden="true">×</span>
+                <span>×</span>
               </button>
               <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QR_CODE') }</h4>
             </div>
@@ -34,8 +29,7 @@ export const QRModalRender = function () {
                 <div className="page-content vertical-align-middle">
                   <QRCode
                     value={ this.props.content }
-                    size={198}
+                    size={ 198 } />
-                  />
                 </div>
               </div>
             </div>
@@ -53,24 +47,20 @@ export const QRModalReaderRender = function () {
       <button type="button"
         className="btn btn-default"
         onClick={ this.openModal }>
-        <i className="icon fa-qrcode" aria-hidden="true"></i>
+        <i className="icon fa-qrcode"></i>
         { translate('INDEX.SCAN_QRCODE_WEBCAM') }
       </button>
-      <div className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+      <div
-        id="QRReadModal"
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
-        aria-hidden="true"
+        id="QRReadModal">
-        aria-labelledby="QRReadModal"
-        role="dialog"
-        tabIndex="-1">
           <div className="modal-dialog modal-center modal-md">
             <div className="modal-content">
               <div className="modal-header bg-orange-a400 wallet-send-header">
                 <button
                   type="button"
                   className="close white"
-                  aria-label="Close"
                   onClick={ this.closeModal }>
-                  <span aria-hidden="true">×</span>
+                  <span>×</span>
                 </button>
                 <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QRCODE_WEBCAM') }</h4>
               </div>

react/src/components/dashboard/sendCoin/sendCoin.js

@@ -55,6 +55,7 @@ class SendCoin extends React.Component {
       currentStackLength: 0,
       totalStackLength: 0,
       utxoMethodInProgress: false,
+      isCameraFeatureDetected: false,
     };
     this.updateInput = this.updateInput.bind(this);
     this.handleBasiliskSend = this.handleBasiliskSend.bind(this);
@@ -65,14 +66,33 @@ class SendCoin extends React.Component {
     this._fetchNewUTXOData = this._fetchNewUTXOData.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.setRecieverFromScan = this.setRecieverFromScan.bind(this);
+    this.detectCamera = this.detectCamera.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  // test device camera capabilities
+  detectCamera() {
+    const _getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+    _getUserMedia(
+      { 'video': true },
+      function() {
+        this.setState({
+          isCameraFeatureDetected: true,
+        });
+      },
+      function() {
+        console.warn('this device doesn\'t have camera!');
+      }
+    );
+  }
+
   setRecieverFromScan(receiver) {
     this.setState({
       sendTo: receiver
     });
-    document.getElementById('edexcoinSendTo').focus()
+
+    document.getElementById('edexcoinSendTo').focus();
   }
 
   componentWillMount() {
@@ -81,6 +101,8 @@ class SendCoin extends React.Component {
       this.handleClickOutside,
       false
     );
+
+    this.detectCamera();
   }
 
   componentWillUnmount() {

react/src/components/dashboard/sendCoin/sendCoin.render.js

@@ -156,12 +156,13 @@ export const SendApiTypeSelectorRender = function () {
           </div>
         </span>
       </div>
+      { this.stateisCameraFeatureDetected &&
         <div className="col-lg-4 text-right">
           <QRModal
             mode="scan"
-          setRecieverFromScan={this.setRecieverFromScan}
+            setRecieverFromScan={this.setRecieverFromScan} />
-        />
         </div>
+      }
     </div>
   );
 };