我试图允许用户在反应原生应用程序中上传视频,但是甚至无法访问相机。
**不使用Expo。我使用react-native cli并使用react-native-init生成我的项目**
**使用react-native版本0.53.0。 Android版本5.1 **
**更新:经过一些好的建议后,我已将android / app / build.gradle文件中的compileSdkVersions和targetSdkVersions更改为> 23并且知道问题不在于我的权限。此外,不熟悉的RCTCamera版本的react-native-camera工作正常,我能够捕获静态图像和视频并将它们保存到设备中。只有使用RNCamera的主版本在每次加载屏幕时仍然会崩溃应用程序:/
这不太理想,因为我不想在我的应用中弃用代码。因此,当我在下面提到react-native-camera时,我指的是使用RNCamera而不是RCTCamera的当前版本。 **
我尝试使用react-native-camera软件包(https://github.com/react-native-community/react-native-camera),但这会导致我的应用每次都崩溃。此外,我想使用用户已经安装的相机应用程序,而不是必须构建我自己的相机视图,这是本机相机所需的反应。
环顾四周,我偶然发现了三种有希望解决这个问题的方法:
1)链接 - 据我所知,此StackOverflow帖子(React native send a message to specific whatsapp Number 2)链接可用于打开用户在其设备上的其他应用。我认为这也可用于访问相机应用程序。但我还没有找到任何相关信息。如何检查用户是否有相机应用程序,然后链接到它们?理想情况下,用户手机上会出现一个弹出菜单,要求用户从可用的相机应用列表中进行选择。
2)这篇文章来自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的东西,但我没有运气。但我知道如果我可以从媒体流中获取二进制数据,那么我可以直接将其发送到我的服务器。那么,有没有办法直接存储来自getUserMedia()方法的媒体流,即react-native-webrtc在没有像网络上的MediaRecorder这样的缓冲区中使用?
任何解决方案都会非常有用。由于我目前只有一部Android手机需要测试,因此我不需要有关如何使用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"
}
}
}
答案 0 :(得分:3)
嘿@mraaron我刚刚做了一个反应原生应用程序,我必须制作和上传视频,基本上你可以使用2种方法:
1)React Native Image Picker https://github.com/react-community/react-native-image-picker哪个 打开原生相机录制视频,并作出回应 你的路径和其他信息。该模块具有以下功能 定义选项时的图像和视频你可以指定mediaType: iOS上的“照片”,“视频”或“混合”,Android上的“照片”或“视频”
2)React Native Camera https://github.com/react-native-community/react-native-camera在此 你可以自定义相机窗口,因为它不会打开本机 相机应用程序
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.
答案 1 :(得分:0)
关于每次崩溃的应用程序,您是否仔细检查过您是否已提及androidmanifest.xml / info.plist中您的应用程序所需的所有权限?
另外,您希望将外部应用程序用于摄像机视图的具体原因是什么? 因为我使用了react-native-camera,它可以无缝地工作。
答案 2 :(得分:0)
这是我昨天刚刚制作的演示...如果它有用:
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