Adds react-native-windows UWP support #862

rozele · 2017-08-29T13:39:30Z

This adds basic support for capturing photos and videos from either the front or back panel cameras, with some support for video quality, orientation, etc. This also uses ZXing.Net to support barcode scanning from the video preview frames. It also supports torch and flash modes. Videos and photos saved to disk (or camera roll / temporary folder) also supports some file metadata (e.g., lat/long).

There are a number of features that have not yet been implemented:

Support playSoundOnCapture for default shutter sounds
Add orientation metadata properties on photo / video files
Support all barcode formats in ZXing.Net
Additional file metadata (like description)
Photo quality settings with quality and jpegQuality
Image post-processing with mirrorImage and fixOrientation
Support event listeners for onZoomChanged & onFocusChanged
Device authorization checks as supported on iOS

rozele · 2017-08-29T13:40:02Z

Example/package.json

    "react-native": "~0.40.0",
-    "react-native-camera": "file:../"
+    "react-native-camera": "~0.10.1",
+    "react-native-windows": "^0.40.0"


Reset. #Closed

rozele · 2017-08-29T13:41:09Z

package.json

@@ -20,7 +20,8 @@
    "barcode"
  ],
  "dependencies": {
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "react": "^15.4.0"
  },


Delete #Closed

rozele · 2017-08-29T13:41:14Z

package.json

@@ -4,7 +4,7 @@
    "type": "git",
    "url": "https://github.com/lwansbrough/react-native-camera.git"
  },
-  "version": "0.10.0",
+  "version": "0.10.1",
  "description": "A Camera component for React Native. Also reads barcodes.",


Reset #Closed

rozele · 2017-08-29T13:43:19Z

windows/RNCamera/RCTCameraModule.cs

+                mediaCapture.AudioDeviceController.Muted = options.Value<bool>("audio");
+
+                // TODO: test orientation
+                var orientation = options.ContainsKey("orientation") ? options.Value<int>("orientation") : cameraForView.Orientation;


Delete. #Closed

this properties is null when i'm try to call the camera!! Can u help me??

rozele · 2017-08-29T13:44:12Z

Example/package.json

@@ -6,8 +6,12 @@
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
-    "react": "~15.4.0",
+    "react": "^15.4.0",


^ [](start = 14, length = 1)

Reset. #Closed

Hi...Can you please share the steps to integrate this library in react-native-windows?

https://shift.infinite.red/getting-started-with-react-native-development-for-windows-ba23a4be90b6
check it out!

ptomasroos · 2017-08-29T14:16:48Z

Just great @rozele ! Since I'm running vmware and windows from time to time I will def make sure to help out reviewing this!

rt2zz · 2017-08-29T18:49:15Z

awesome! with the number of platform support inconsistencies across iOS, android and windows, I am thinking we are going to need a docs overhaul to better communicate what works where.

sm2017 · 2017-11-10T08:24:13Z

@ptomasroos When you accept the PR?

sibelius · 2018-01-08T21:01:38Z

@rozele as I don't use windows much, I've added you as a contributor

so we can help us maintain this code, feel free to merge this if it is stable enough

DavidRajPaul · 2018-03-17T09:32:33Z

Hi...Can you please share the steps to integrate this library in react-native-windows?

DavidRajPaul · 2018-03-17T12:16:26Z

Can i Just access RNCamera from react-native-camera for windows?

DavidRajPaul · 2018-03-17T13:33:07Z

I followed this code to implement barcode support in react-native-windows. But got this error when importing Camera. @rozele Can you please help?

DavidRajPaul · 2018-03-20T16:39:18Z

Any updates??

sibelius · 2018-03-20T16:46:43Z

RNCamera is only for RN for now, u need to use RCTCamera on Windows

I don't like how to link this on windows

DavidRajPaul · 2018-03-20T16:51:30Z

Thanks for the update. Can anyone help me with linking with windows or suggest a plugin to implement barcode scan in windows? Any tutorial link or proper documentation? because the implementation steps mentioned are not clear and also very old.

aliaksandr-kazarez · 2018-04-11T21:28:19Z

Seems like this version won't work with react-native-windows above 0.52 because of System.Reactive.Linq dependency which has version 3.1.1, but react-native-windows updated to 4.0.0 preview in 0.53.

sibelius · 2018-04-11T21:41:38Z

@kozorezal can u try to update this branch to fix this? or send a new pr ?

This adds basic support for capturing photos and videos from either the front or back panel cameras, with some support for video quality, orientation, etc. This also uses ZXing.Net to support barcode scanning from the video preview frames. It also supports torch and flash modes. Videos and photos saved to disk (or camera roll / temporary folder) also supports some file metadata (e.g., lat/long). There are a number of features that have not yet been implemented: - Support `playSoundOnCapture` for default shutter sounds - Add orientation metadata properties on photo / video files - Support all barcode formats in ZXing.Net - Additional file metadata (like description) - Photo quality settings with `quality` and `jpegQuality` - Image post-processing with `mirrorImage` and `fixOrientation` - Support event listeners for `onZoomChanged` & `onFocusChanged` - Device authorization checks as supported on iOS

surajGoverdhanam · 2018-06-20T16:41:30Z

Can anyone please provide documentation for react-native-camera windows support

surajGoverdhanam · 2018-06-20T16:43:48Z

I am getting "unable to get property 'Aspect ' of undefined or null".
I am using

"react-native": "0.54.0",
"react-native-camera": "^1.0.2",

gtRfnkN · 2018-07-26T14:32:11Z

@rozele, thank you very much for this effort - the library works really well on Windows and reads QR codes just fine! I'm running react@16.3.1 & react-native@0.55.4.

I am not sure, what is actually blocking this from being merged - can someone elaborate on that? I would love to help out with this PR, even though I have no experience with Windows programming, but I will try my best.

For everyone being stuck with the Aspect property bug: this should not happen if you're on the correct repository & branch and have set-up the library for windows correctly. Here is how you can do that:

add the following dependency into you package.json:
"react-native-camera": "https://github.com/rozele/react-native-camera/#windows",.
This is the branch from @rozele with all the stuff RNWindows needs
link the library as described here:
https://github.com/Microsoft/react-native-windows/blob/master/docs/LinkingLibrariesWindows.md
In the MainReactNativeHost.cs add using RNCamera; and new RNCameraPackage()
add the camera & microphone capabilities to use the camera as described here:
https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/simple-camera-preview-access#add-capability-declarations-to-the-app-manifest
import and used as described in react-native-camera

PS: as @sibelius mentioned, you have to use RCTCamera not RNCamera (even though it's called RNCamera natively). So import like this: import Camera, { Barcode } from 'react-native-camera';

sibelius · 2018-07-26T14:46:22Z

Can we merge?

gtRfnkN · 2018-07-26T14:54:53Z

I would say not yet, I was too optimistic after it actually showed the camera stream and returned data for a QR code.

But the PR is still missing some things - here are two that I noticed already:

add to README how to set the library up with windows (a bit like what I wrote up there)
onBarCodeRead returns the data in a prop called text instead of data

I will try this library out some more and will also try to contribute as much as I can so we can get Windows supported 🙂

expectpin · 2018-11-24T20:34:44Z

@gtRfnk, on UWP app when I call takePictureAsync I get error '[JS Info] 'err: ', [TypeError: Object doesn't support property or method 'takePictureAsync']'.

`import Camera from 'react-native-camera';

takePicture = async () => {
try {
const data = await this.camera.takePictureAsync();
console.log('Path to image: ' + data.uri);
} catch (err) {
console.log('err: ', err);
}
};

render() {
return (

<Camera
ref={ref => {
this.camera = ref;
}}
style = {styles.preview}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
/>
<View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>

<Text style={{fontSize: 14}}> SNAP

);
}
}`

What I'm doing wrong?

gtRfnkN · 2018-12-03T15:47:26Z

@expectpin takePictureAsync is currently not implemented, you will have to use capture like this:

this.camera.capture({ target: 0 })
  .then(data => { ... })
  .catch(error => { ... });

sibelius · 2018-12-03T15:51:26Z

Open issues if something in this PR is not working well

We can improve it in another PRs

n1ru4l · 2018-12-05T16:41:23Z

🎉 This PR is included in version 1.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

npmun · 2019-01-01T04:34:29Z

@gtRfnkN @expectpin any thoughts on what I am doing wrong here? I can't make react-native-camera work on UWP for some reason.

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import Camera from "react-native-camera";

export class CameraComp extends Component {
  _takePicture = async () => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={ref => {
            this.camera = ref;
          }}
          permissionDialogTitle={"Permission to use camera"}
          permissionDialogMessage={
            "We need your permission to use your camera phone"
          }
          style={styles.preview}
        >
          <View
            style={{ flex: 0, flexDirection: "row", justifyContent: "center" }}
          >
            <Text style={styles.capture} onPress={() => this._takePicture()}>
              [CAPTURE]
            </Text>
          </View>
        </Camera>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "black"
  },
  preview: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center"
  },
  capture: {
    flex: 0,
    backgroundColor: "#fff",
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: "center",
    margin: 20
  }
});

thanks for your help!

npmun · 2019-01-01T18:06:29Z

nevermind...looks like Camera cannot have any children.

vikmis007 · 2019-09-05T06:06:23Z

@rozele Is there any further update in this? I want to scan a barcode that needs to be integrated into a UWP app.

vikmis007 · 2019-09-05T06:07:52Z

@npmun Is the camera access working for you for UWP app?

npmun · 2019-09-05T13:58:15Z

@vikmis007 Yes it does. But my use case is very basic.

sibelius · 2019-09-05T14:04:25Z

as RCTCamera was removed, you can send a PR renaming RCTCamera usage on UWP to RNCamera and it will probably work

rozele commented Aug 29, 2017

View reviewed changes

rozele force-pushed the windows branch from fc3ffe0 to 5baddf6 Compare August 29, 2017 13:45

rozele force-pushed the windows branch from 5baddf6 to bb1a99f Compare August 29, 2017 14:43

rozele mentioned this pull request Aug 29, 2017

react-native-camera for react-native-windows ReactWindows/third-party-module-status#10

Closed

ptomasroos self-assigned this Sep 8, 2017

ptomasroos removed their assignment Jan 10, 2018

jgfidelis closed this Mar 10, 2018

sibelius mentioned this pull request Mar 16, 2018

Make Zbar optional or replacle ZXing to improve performance and quality of the barcode scanner for android. #664

Closed

sibelius reopened this Mar 17, 2018

creambyemute mentioned this pull request Apr 10, 2018

Control camera in react native window microsoft/react-native-windows#1761

Closed

sibelius mentioned this pull request Apr 26, 2018

#react-native camera in windows UWP #1520

Closed

rozele added 2 commits June 18, 2018 20:33

Updating NuGet packages for RNCamera UWP project

7fba814

rozele force-pushed the windows branch from bb1a99f to 7fba814 Compare June 19, 2018 01:22

rozele added 2 commits June 27, 2018 16:55

Minor fixes for legacy RCTCamera implementation

235a8af

hack(CameraForView): default camera to any when panel info not available

9d2865a

sibelius merged commit 1c62749 into react-native-camera:master Dec 3, 2018

n1ru4l added the released label Dec 5, 2018

Adds react-native-windows UWP support #862

Adds react-native-windows UWP support #862

Conversation

rozele commented Aug 29, 2017

rozele Aug 29, 2017 • edited

Choose a reason for hiding this comment

rozele Aug 29, 2017 • edited

Choose a reason for hiding this comment

rozele Aug 29, 2017 • edited

Choose a reason for hiding this comment

rozele Aug 29, 2017 • edited

Choose a reason for hiding this comment

hoangtuandinh77 Apr 26, 2018

Choose a reason for hiding this comment

rozele Aug 29, 2017 • edited

Choose a reason for hiding this comment

DavidRajPaul Mar 17, 2018

Choose a reason for hiding this comment

hoangtuandinh77 Apr 12, 2018

Choose a reason for hiding this comment

ptomasroos commented Aug 29, 2017

rt2zz commented Aug 29, 2017

sm2017 commented Nov 10, 2017

sibelius commented Jan 8, 2018

DavidRajPaul commented Mar 17, 2018

DavidRajPaul commented Mar 17, 2018

DavidRajPaul commented Mar 17, 2018

DavidRajPaul commented Mar 20, 2018

sibelius commented Mar 20, 2018

DavidRajPaul commented Mar 20, 2018

aliaksandr-kazarez commented Apr 11, 2018

sibelius commented Apr 11, 2018

surajGoverdhanam commented Jun 20, 2018

surajGoverdhanam commented Jun 20, 2018

gtRfnkN commented Jul 26, 2018 • edited

sibelius commented Jul 26, 2018

gtRfnkN commented Jul 26, 2018

expectpin commented Nov 24, 2018

gtRfnkN commented Dec 3, 2018

sibelius commented Dec 3, 2018

n1ru4l commented Dec 5, 2018

npmun commented Jan 1, 2019 • edited by n1ru4l

npmun commented Jan 1, 2019

vikmis007 commented Sep 5, 2019

vikmis007 commented Sep 5, 2019

npmun commented Sep 5, 2019

sibelius commented Sep 5, 2019

rozele Aug 29, 2017 •

edited

rozele Aug 29, 2017 •

edited

rozele Aug 29, 2017 •

edited

rozele Aug 29, 2017 •

edited

rozele Aug 29, 2017 •

edited

gtRfnkN commented Jul 26, 2018 •

edited

npmun commented Jan 1, 2019 •

edited by n1ru4l