React-native-camera: this.camera.capture() returning file name / uri not image binary

Created on 11 Apr 2016  路  3Comments  路  Source: react-native-camera/react-native-camera

Steps to reproduce

  1. Include code from example.
  2. Press the capture button - firing this.camera.capture()
  3. The data when logged is not an image binary, instead it appears to be a uri of the form: assets-library://asset/asset.JPG?id=0126412B-2B92-4F90-BB7B-CB00000A0000&ext=JPG
    From here there are two options:

A) Send the 'data' to the server as an image binary - this fails because it's not an image binary

B) Include the photo uri in an object and send that as form data to the server - this also fails

render function includes:

            <Camera
              ref={(cam) => {
                this.camera = cam;
              }}
              style={localStyles.preview}
              aspect={Camera.constants.Aspect.fill}
              flashMode={Camera.constants.FlashMode.auto}
              captureAudio={false}>
              <View style = {localStyles.captureBtnContainer}>
                <Text 
                  style={localStyles.captureBtn} 
                  onPress={this.takePicture.bind(this)}>
                  Capture
                </Text>
              </View>
            </Camera>

When the capture button is pressed, the takePicture method is fired - and on success the image should be sent to my server.

 takePicture() {
    this.camera.capture()
      .then((data) => {
        this.setState({'photoUri' : data})
        var uploadUrl = this.state.uploadUrl;

        var photo = {
          uri: data,
          type: 'image/jpeg',
          name: 'photo.jpg',
        };

        var uploadForm = new FormData()
        uploadForm.userKey = this.state.userKey;
        uploadForm.append('image', photo);
        fetch(uploadUrl, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/related',
          },
          body: uploadForm
        })
      .then((response) => response.text())
      .then((responseText) => { 
        alert(responseText);
      })
      .catch((error) => { alert('takePicture upload: ' + error) });
      })
      .catch(err => alert('takePicture: ' + err));
  }

Expected behaviour

I expect the 'data' returned to be an image binary - but it doesn't seem to be

Actual behaviour

Instead the 'data' returned appears to be a uri for the image. This uri, however fails with a "No suitable request handler found for assets-library..."

Environment

  • Node.js version:5.10.0
  • React Native version:0.23.1
  • React Native platform + platform version: iOS 9.3.1 (on phone) and latest simulator (iphone 5s)

    react-native-camera

Version: "master"

Most helpful comment

For anyone experiencing a similar issue I've found that setting:

captureTarget={Camera.constants.CaptureTarget.disk}

Within the tag returns a uri usable in the way set out above.

All 3 comments

FYI - I used the "Mostly automatic install" as opposed to the "manual install" approach.

For anyone experiencing a similar issue I've found that setting:

captureTarget={Camera.constants.CaptureTarget.disk}

Within the tag returns a uri usable in the way set out above.

For anyone experiencing a similar issue I've found that setting:

captureTarget={Camera.constants.CaptureTarget.disk}

Within the tag returns a uri usable in the way set out above.

this solution doesnt work

Was this page helpful?
0 / 5 - 0 ratings

Related issues

TylerKirby picture TylerKirby  路  3Comments

WarrenBuffering picture WarrenBuffering  路  3Comments

maxschmeling picture maxschmeling  路  3Comments

pavermakov picture pavermakov  路  3Comments

alameddinc picture alameddinc  路  3Comments