React-native 接入设备摄像头？（Android 具体而言）

Question

我正在尝试允许用户在本机反应应用程序中上传视频，但我什至无法访问相机。

** 没有使用世博会。我使用了 react-native cli 并使用了 react-native-init 来生成我的项目 **

** 使用 react-native 版本 0.53.0。 Android 版本 5.1 **

** 更新：经过一些好的建议，我将 android/app/build.gradle 文件中的 compileSdkVersions 和 targetSdkVersions 更改为 > 23，并且知道问题不在于我的权限.此外，已弃用的 react-native-camera 版本的 RCTCamera 工作正常，我能够捕获静止图像和视频并将它们保存到设备中。只有使用 RNCamera 的主版本在每次屏幕加载时仍然会导致应用程序崩溃：/

这不太理想，因为我不想在我的应用程序中使用已弃用的代码。因此，当我在下面提到 react-native-camera 时，我指的是使用 RNCamera 而不是 RCTCamera 的当前版本。 **

我尝试使用 react-native-camera 包 (https://github.com/react-native-community/react-native-camera)，但这会导致我的应用程序每次都崩溃。另外我想使用用户已经安装的相机应用程序，而不是必须构建我自己的相机视图，这是 react-native-camera 所需要的。

环顾四周，我偶然发现了三种有前途的解决方法：

1) 链接 - 据我从这个 Whosebug 了解到 post () linking 可用于打开用户设备上的其他应用程序。我认为这也可以用于访问相机应用程序。但是我还没有找到这方面的任何信息。如何检查用户是否有相机应用程序，然后 link 给他们？理想情况下，用户 phone 上会出现一个弹出菜单，要求用户从可用相机应用列表中进行选择。

2) post 来自 android 开发者文档 - https://developer.android.com/training/camera/videobasics.html 。这描述了如何准确地完成我想做的事情，但是我在制作用于我的组件的本机模块时遇到了麻烦。我对在 react-native 中构建桥梁有非常基本的了解，并且只有在阅读了几篇列出所有代码的文章后才能使一个简单的本地 Toast 模块工作。那么任何人都可以编写一个 VideoModule.java 文件来实现与 android 文档指定的功能相同的功能吗？这对我来说似乎是最简单的解决方案，但我对 Java/android 的知识缺乏阻碍了。

3) ReactNativeWebRTC - 我已经在应用程序的不同屏幕上成功包含此模块 (https://github.com/oney/react-native-webrtc)。但是当我使用这个模块在两个对等点之间传输视频时，它看不到如何使用它来上传视频。我查看是否有类似于我用于该应用程序 Web 版本的 MediaRecorder API 的东西，但我没有任何运气。但我知道，如果我能从媒体流中获取二进制数据，那么我就可以将其直接发送到我的服务器。那么，有没有一种方法可以直接将来自 react-native-webrtc 使用的 getUserMedia() 方法的媒体流存储在缓冲区中，而无需像网络上那样使用 MediaRecorder？

任何解决方案在这里都会非常有帮助。由于我目前只有一个 Android phone 可以测试，所以我不需要有关如何使用 iOS 进行这项工作的信息。 android 的解决方案。非常感谢。

这是我的 AndroidManifest.xml 权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

我的 android/app/build.gradle 文件：

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load 
the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
  *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

 project.ext.react = [
    entryFile: "index.js"
 ]

 apply from: "../../node_modules/react-native/react.gradle"

 /**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
 def enableSeparateBuildPerCPUArchitecture = false

  /**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
 def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 26
    buildToolsVersion "25.0.2"

defaultConfig {
    applicationId "com.slimnative"
    minSdkVersion 16
    targetSdkVersion 26
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86"
    }
}
buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
    variant.outputs.each { output ->
        // For each separate APK per architecture, set a unique version code as described here:
        // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
        def versionCodes = ["armeabi-v7a":1, "x86":2]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) {  // null for the universal-debug, universal-release variants
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }
    }
    }
   }

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+"  // From node_modules
compile project(':WebRTCModule')
compile project(':react-native-svg')
compile (project(':react-native-camera')) {
    // exclude group: "com.google.android.gms"
    exclude group: "com.android.support"
}
// compile ("com.google.android.gms:play-services-vision:10.2.0") {
//     force = true;
// }
compile ('com.android.support:exifinterface:26.0.1') {
    force = true;
}
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}

还有我的android/build.gradle:

buildscript {
repositories {
    jcenter()
}
dependencies {
    classpath 'com.android.tools.build:gradle:2.2.3'
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}
}

allprojects {
repositories {
    mavenLocal()
    jcenter()
    maven {
        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
        url "$rootDir/../node_modules/react-native/android"
    }
    maven { url "https://jitpack.io" }
    maven {
        url "https://maven.google.com"
    }
   }
   }

Answer 1

关于应用程序每次崩溃，您是否仔细检查过您是否在 androidmanifest.xml/info.plist 中提到了应用程序所需的所有权限？

另外，您希望使用外部应用程序查看相机的具体原因是什么？因为我用过react-native-camera，而且用起来很流畅

Answer 2

这是我昨天刚做的演示...如果有帮助：

import React from 'react';
import { View, Text, Alert } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

    class CameraForm extends React.Component {

      state = {
        hasCameraPermission: null
      };

      componentDidMount() {
        this.permissionCheck();
      }

      permissionCheck = async () => {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({
          hasCameraPermission: status === 'granted'
        });
      };

      handleBarCodeScanRead = data => {
          Alert.alert(
            'Scan successful!',
            JSON.stringify(data)
          );
      };

      render() {
        return (
          <View style={styles.container}>
            <Text>Scan your wallet code</Text>
            { this.state.hasCameraPermission === null ?
                  <Text>Requesting for camera permission</Text> :
                  this.state.hasCameraPermission === false ?
                  <Text>Camera permission is not granted</Text> :
                  <BarCodeScanner
                    onBarCodeRead={this.handleBarCodeScanRead}
                    style={{ height: 400, width: 400, marginTop: 20 }}
                  />
            }
          </View>
        );
      }
    }

    const styles = {
      container: {
        flex: 1,
        alignSelf: 'stretch',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white'
      }
    };

    export default CameraForm

;

Answer 3

嘿@mraaron 我刚刚制作了一个反应本机应用程序，我必须在其中制作和上传视频，基本上你可以使用 2 种方法：

1) React Native Image Picker https://github.com/react-community/react-native-image-picker which opens up the native camera to record videos and in response will give u the path and other info. This module has both functionality of images and videos while defining options u can specify mediaType: 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android

.

2) React Native Camera https://github.com/react-native-community/react-native-camera in this u can customise the camera window as it does not open the native camera app

Note:- I have implemented both the packages and both are working absolutely fine in android as well as ios, if u need any help u can ping me up.

React-native 接入设备摄像头？（Android 具体而言）

React-native Access Device Camera? (Android Specifically)

android

android-camera

webrtc

react-native

react-native-native-module

React-native 接入设备摄像头？ （Android 具体而言）

React-native Access Device Camera? (Android Specifically)

android

android-camera

webrtc

react-native

react-native-native-module

React-native 接入设备摄像头？（Android 具体而言）