标签: react-native-camera

我可以让react-native-camera模块访问摄像头并保存图像.但是,我无法弄清楚如何向用户显示此图像.

我在尝试什么:

我在这里拍照.这会生成看起来像.jpg文件的内容assets-library://....

    _takePicture() {
        var self = this;
        this.refs.cam.capture(function(err, data) {
          this.setState({photo: data});
          console.log(err, data);
          // data is "assets-library://asset/asset.JPG?id=########-####-####-####-##########&ext=JPG"
          console.log('just took a picture');
        }); 
    }

但是,如果我尝试渲染图像:

    render: function() {
      return(
         <Image style={styles.image} source={{uri: this.state.photo}}/>
      );
    }

我收到此错误:

No suitable image URL loader found for assets-library://asset/asset.JPG?id=.......

如何拍照,将其保存到state我的应用程序的当前状态并进行渲染？

当我的反应相机与React-Native上的项目设置和链接时,我一直遇到这个错误.我尝试了谷歌中找到的所有解决方案,但仍然无法正常工作,我也试过这个视频https://www.youtube.com/watch?v=pJseuSOC8HA并且也没有工作.有人可以试着帮我吗？

这是我的package.json:

"dependencies": {
    "prop-types": "^15.5.8",
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
    "react-navigation": "^1.0.0-beta.7",
    "react-redux": "^5.0.4",
    "redux": "^3.6.0",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.2.0"
  },

如何在react-native-camera顶部添加一个掩码？

我正在使用react-native-camera为React Native QRCode扫描仪应用程序构建UI.

相机顶部的覆盖遮罩应为浅灰色,但中间部分必须保持透明(透视).

但是当我在外面罩上更改backgroundColor时,它似乎也会影响中心部分.我的意思是,当然,它背后是儿童观.

下面的代码是快照的简化版本.

<Camera
  ref={cam => {
    this.camera = cam;
  }}
  onBarCodeRead={this._onBarCodeRead}
  style={styles.cameraView}
  aspect={Camera.constants.Aspect.fill}
  playSoundOnCapture
>
  <View
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0.2, 0.2, 0.2, 0.2)',
      alignItems: 'center',
      justifyContent: 'space-around',
    }}
  >
    <View
      style={{
        width: 300,
        height: 300,
        backgroundColor: 'transparent',
        borderColor: 'white',
        borderWidth: 1,
      }}
    />
  </View>
</Camera>

知道怎么做到这一点？

我正在尝试安装react-native-camera.

我做到了npm install react-native-camera react-native link react-native-camera.

它给了我错误的说法Gradle sync failed: Could not find method google() for arguments [] on repository container.

我也尝试了手动链接,如文档中所述,直到我添加的第6步

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

我使用的是exifinterface版本,例如27. +而不是25. +

我有distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zipdistributionUrl和classpath 'com.android.tools.build:gradle:2.2.3'

我不知道我错过了什么.当我打开我的Android工作室时,它给了我错误Gradle sync failed: Could not find method google() for arguments [] on repository container

当我react-native run-android在手机上运行时,它给了我错误的说法undefined is not an object (evaluating 'cameramanager.aspect') …

我试图实现与Facebook或Instagram相同的功能:立即
预览相机拍摄的图像

此时,调用此函数时我的摄取正确:

takePicture = async function() {
   if (this.camera && this.state.isConnected === true) {
      const options = { quality: 0, base64: false };
      const data = await this.camera.takePictureAsync(options);
      this.toLoading(data.uri);
   }
};

如此处所示,摄像机质量选项设置为0,以确保问题不是由图像处理引起的.

我也将我的RNCamera道具设置为降低,如下所示:

      autoFocus={"off"}
      skipProcessing={true}
      type={"back"}
      flashMode={"off"}
      zoom={0}
      whiteBalance={"auto"}
      ratio={"16:9"}

我在android和ios上测试了这个,即使ios似乎更快地执行它,它仍然不会立即执行.
有没有人能够使用react native重现facebook/instagram相机预览？我一直在寻找github回购,在我的情况下似乎有很多人,但仍然没有解决方案.我还注意到人们试图推出世博会项目以继续本机代码,但延迟仍然存在.

我正在使用react-native-camera为Android和iOS构建条形码扫描器.

我能够扫描iOS中的条形码,但问题是扫描边界没有视觉效果.我希望整个屏幕能够扫描条形码而不仅仅是屏幕中间.

它有什么办法吗？如果还有一些其他库也适合我.

我的目标是使用react-native-camera,只需在同一屏幕上显示图片,如果拍摄了照片.我正在尝试将图片源保存为"imageURI".如果它存在,我想展示它,如果还没有拍摄照片,只显示没有图像的文字.我有相机工作,因为我可以跟踪应用程序将图片保存到磁盘.遇到以下问题:

• 如何在拍摄照片时将捕获函数数据分配给变量,我可以稍后调用(imageURI).

• 不知道如何在Javascript中执行if语句来检查变量是否存在.

  import Camera from 'react-native-camera';
  
  export default class camerahere extends Component {
  
  _takePicture () {
    this.camera.capture((err, data) => {
    if (err) return;
    imageURI = data;
    });
  }
  
  render() {
  
    if ( typeof imageURI == undefined) {
      image = <Text> No Image Yet </Text> 
    } else {
      image = <Image source={{uri: imageURI, isStatic:true}} 
      style={{width: 100, height: 100}} />
    }
  
  
  return (
    <View style={styles.container}>
      <Camera
        captureTarget={Camera.constants.CaptureTarget.disk}
        ref={(cam) => {
          this.camera = cam;
        }}
        style={styles.preview}
        aspect={Camera.constants.Aspect.fill}>
  
        {button}
      <TouchableHighlight onPress={this._takePicture.bind(this)}>
        <View style={{height:50,width:50,backgroundColor:"pink"}}></View> …

  Run Code Online (Sandbox Code Playgroud)

我在我正在开发的应用程序中使用react-native-camera组件(https://github.com/lwansbrough/react-native-camera).

有没有办法从视频/摄像机馈送中获取单个帧,以便我可以实时执行处理.

我的最终目标是使用tracking.js库实时跟踪对象,以实现AR效果.

谢谢您的帮助!

我试图将我的React Native项目升级到最新版本（0.59.2）。不幸的是，现在尝试运行react-native run-android im时出现此错误：

Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve project :react-native-camera.
 Required by:
     project :app
  > Cannot choose between the following variants of project :react-native-camera:
      - generalDebugRuntimeElements
      - mlkitDebugRuntimeElements
    All of them match the consumer attributes:
      - Variant 'generalDebugRuntimeElements':
          - Required com.android.build.api.attributes.BuildTypeAttr 'debug' and found compatible value 'debug'.
          - Found com.android.build.api.attributes.VariantAttr 'generalDebug' but wasn't required.
          - Required com.android.build.gradle.internal.dependency.AndroidTypeAttr 'Aar' and found compatible value …

我有兴趣使用 React-Native 在相机视图顶部放置一个视图，类似于以下内容：

是否有插件或易于使用的方法来执行此操作？目前，我只对放置图像并识别房间中的某个人感兴趣？（4个人在同一个房间，如果我指向一个，显示文字A，如果我指向另一个，显示文字B，以此类推）