Merge pull request #42 from JodusNodus/ios11-fix

Version 2.0.0 with ios11 support

README.md

@@ -8,7 +8,6 @@ A [React](https://facebook.github.io/react/) component for reading QR codes from
 
 ## Known Issues
 - Due to browser implementations the camera can only be accessed over https or localhost.
-- Not compatible with macOS/iOS Safari. Use `legacyMode` to support these platforms.
 - In Firefox a prompt will be shown to the user asking which camera to use, so `facingMode` will not affect it.
 
 ## Install
@@ -24,33 +23,29 @@ class Test extends Component {
   constructor(props){
     super(props)
     this.state = {
-      delay: 100,
+      delay: 300,
       result: 'No result',
     }
-
     this.handleScan = this.handleScan.bind(this)
   }
   handleScan(data){
-    this.setState({
-      result: data,
-    })
+    if(data){
+      this.setState({
+        result: data,
+      })
+    }
   }
   handleError(err){
     console.error(err)
   }
   render(){
-    const previewStyle = {
-      height: 240,
-      width: 320,
-    }
-
     return(
       <div>
         <QrReader
           delay={this.state.delay}
-          style={previewStyle}
           onError={this.handleError}
           onScan={this.handleScan}
+          style={{ width: '100%' }}
           />
         <p>{this.state.result}</p>
       </div>
@@ -60,74 +55,25 @@ class Test extends Component {
 ```
 
 ## Props
+### Events
+| Prop        | Argument         | Description
+|-------------|------------------|-------------
+| onScan      | `result`         | Scan event handler. Called every scan with the decoded value or `null` if no QR code was found.
+| onError     | `Error`          | Called when an error occurs.
+| onLoad      | none             | Called when the component is ready for use.
+| onImageLoad | img onLoad event | Called when the image in legacyMode is loaded.
+
+### Options
+| Prop           | Type                    | Default       | Description
+|----------------|-------------------------|---------------|-------------
+| delay          | number or `false`       | `500`         | The delay between scans in milliseconds. To disable the interval pass in `false`.
+| facingMode     | `user` or `environment` | `environment` | Specify which camera should be used (if available).
+| resolution     | number                  | `600`         | The resolution of the video (or image in legacyMode). Larger resolution will increase the accuracy but it will also slow down the processing time.
+| style          | a valid React style     | none          | Styling for the container element. **Warning** The preview will always keep its 1:1 aspect ratio.
+| className      | string                  | none          | ClassName for the container element.
+| showViewFinder | boolean                 | `true`        | Show or hide the build in view finder. See demo
+| legacyMode     | boolean                 | `false`       | If the device does not allow camera access (e.g. IOS Browsers, Safari) you can enable legacyMode to allow the user to take a picture (On a mobile device) or use an existing one. To trigger the image dialog just call the method `openImageDialog` from the parent component. **Warning** You must call the method from a user action (eg. click event on some element).
 
-**onScan**
-
-Type: `function`, Required, Argument: `result`
-
-Scan event handler. Called every scan with the decoded value or `null` if no QR code was found.
-
-**onError**
-
-Type: `function`, Required, Argument: `error`
-
-Function to call when an error occurs such as:
-- Not supported platform
-- The lack of available devices
-
-**onLoad**
-
-Type: `function`, Optional
-
-Called when the component is ready for use.
-
-**onImageLoad**
-
-Type: `function`, Optional, Argument: React img onLoad event
-
-Called when the image in legacyMode is loaded.
-
-**delay**
-
-Type: `number`, Optional, Default: `500`
-
-The delay between scans in milliseconds. To disable the interval pass in `false`.
-
-**facingMode**
-
-Type: `string`, Optional
-
-Specify which camera direction should be used (if available). Options: `front` and `rear`.
-
-**legacyMode**
-
-Type: `boolean`, Optional, Default: `false`.
-
-If the device does not allow camera access (e.g. IOS Browsers, Safari) you can enable legacyMode to allow the user to take a picture (On a mobile device) or use an existing one. To trigger the image dialog just call the method `openImageDialog` from the parent component. **Warning** You must call the method from a user action (eg. click event on some element).
-
-**maxImageSize**
-
-Type: `number`, Optional, Default: `1500`.
-
-If `legacyMode` is active then the image will be downscaled to the given value while keepings its aspect ratio. Allowing larger images will increase the accuracy but it will also slow down the processing time.
-
-**style**
-
-Type: `object`, Optional
-
-Styling for the preview element. This will be a `video` or an `img` when `legacymode` is `true`. **Warning** The preview will keep its aspect ratio, to disable this set the CSS property [objectFit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to `fill`.
-
-**className**
-
-Type: `string`, Optional
-
-ClassName for the container element.
-
-**chooseDeviceId**
-
-Type: `function`, Optional, Arguments: (1) video devices matching `facingMode`, (2) all video devices
-
-Called when choosing which device to use for scanning. By default chooses the first video device matching `facingMode`, if no devices match the first video device found is choosen.
 
 ## Dev
 
@@ -140,15 +86,13 @@ Called when choosing which device to use for scanning. By default chooses the fi
 ### Demo
 `npm run storybook`
 
-### Test
-`npm test`
-
 ### Linting
 `npm run lint`
 
 ## Tested platforms
-- Chrome 56 and Firefox 53 on macOs 10.12
-- Chrome 55 and Firefox 50 on Android 6.0.1
+- Chrome macOs & Android
+- Firefox macOs & Android
+- Safari macOs & IOS
 
 ## License
 The MIT License (MIT)

lib/getDeviceId.js

@@ -7,7 +7,7 @@ function defaultDeviceIdChooser(filteredDevices, videoDevices, facingMode) {
   if (filteredDevices.length > 0) {
     return filteredDevices[0].deviceId;
   }
-  if (videoDevices.length == 0 || facingMode == 'front') {
+  if (videoDevices.length == 1 || facingMode == 'front') {
     return videoDevices[0].deviceId;
   }
   return videoDevices[1].deviceId;
@@ -33,10 +33,6 @@ module.exports = function getDeviceId(facingMode) {
       if (videoDevices.length < 1) {
         reject(new NoVideoInputDevicesError());
         return;
-      } else if (videoDevices.length == 1) {
-        // Only 1 video device available thus stop here
-        resolve(devices[0].deviceId);
-        return;
       }
 
       var pattern = facingMode == 'rear' ? /rear|back|environment/ig : /front|user|face/ig;