Question

我正在使用React Native为 iOS，Android和Windows 开发应用程序，我需要通过WebView显示网页。该网页访问设备的相机，因此它使用MediaDevices.getUserMedia() Javascript功能。

即使在智能手机上的Chrome应用中，它也可以在桌面上正常运行，。但是，当我通过React Native <WebView />调用网页时，出现PermissionDenied错误。问题是没有显示请求让我接受该权限。它只是在不问的情况下否认了这个请求。

以下是我的WebView元素示例：

<WebView style={{flex: 1}} mediaPlaybackRequiresUserAction={false} domStorageEnabled={true} allowsInlineMediaPlayback={true} source={{uri: 'https://myurltomyapp.com/index.html'}} startInLoadingState={true} allowUniversalAccessFromFileURLs={true} />

我已经在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-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAPTURE_AUDIO_OUTPUT" /> <uses-permission android:name="android.permission.CAPTURE_SECURE_VIDEO_OUTPUT" /> <uses-permission android:name="android.permission.CAPTURE_VIDEO_OUTPUT" /> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.RECORD_VIDEO"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <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.WAKE_LOCK" />

是的，托管网站的网址已通过SSL认证，因此通过HTTPS进行验证。它适用于Chrome应用，因此它也适用于WebView。

我一直在阅读网络，似乎是因为React Native WebView缺少onPermissionRequest()实现，所以它无声地失败（并拒绝它）。

有没有办法在React Native中实现覆盖原生WebView ？如果可能，我必须编辑哪些文件？是否有任何第三方模块（最新版本）已实施（尚未能找到）？

谢谢。

Answer 1

最后，我必须在原生Android中实现自己的WebView组件。问题是onPermissionRequest（）函数，它没有在本机WebView中实现。您必须创建自己的并覆盖该功能。就我而言，我必须添加以下代码（所有文件都在路径[react-native-project]/android/app/src/main/java/com/listproject/permissionwebview/下）：

PermissionWebviewPackage.java：

package com.listproject.permissionwebview;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.ArrayList;
import java.util.List;

/**
 * Add this package to getPackages() method in MainActivity.
 */

public class PermissionWebviewPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
            new PermissionWebviewViewManager()
          );
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

PermissionWebviewView.java：

package com.listproject.permissionwebview;
import android.content.Context;
import android.widget.LinearLayout;
import android.os.Bundle;
import android.widget.Toast;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.PermissionRequest;
import android.webkit.WebSettings;
import android.net.http.SslCertificate;
import android.net.http.SslError;
import android.webkit.SslErrorHandler;
import android.support.v4.app.ActivityCompat;
import android.app.LocalActivityManager;
import android.view.ViewGroup;
import android.Manifest;
import android.app.Activity;
import com.listproject.MainActivity;
import com.listproject.R;

public class PermissionWebviewView extends WebView{

    private Context context;

    public PermissionWebviewView(Context context) {
        super(context);
        this.context = context;

        this.setWebViewClient(new WebViewClient());

        WebSettings webSettings = this.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowUniversalAccessFromFileURLs(true);
        webSettings.setMediaPlaybackRequiresUserGesture(false);
        webSettings.setUseWideViewPort(true);
        webSettings.setDomStorageEnabled(true);

        this.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onPermissionRequest(final PermissionRequest request) {
                request.grant(request.getResources());
            }
        });
    }
}

PermissionWebviewViewManager.java：

package com.listproject.permissionwebview;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

public class PermissionWebviewViewManager extends SimpleViewManager<PermissionWebviewView> {

    public static final String REACT_CLASS = "PermissionWebviewViewManager";
    private String source;

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public PermissionWebviewView createViewInstance(ThemedReactContext context) {
        return new PermissionWebviewView(context); //If your customview has more constructor parameters pass it from here.
    }

    @ReactProp(name = "sourceUri")
    public void setSource(PermissionWebviewView view, String source) {
        view.loadUrl(source);
    }
}

最后，更新您的MainApplication.java文件，并将您的包添加到getPackages()函数中：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        [...],
        new PermissionWebviewPackage()
  );
}

请记住，listproject，permissionwebview等的名称可以更改为您需要的名称，只要您在文件的名称空间和包中更改它们即可引用。

完成所有这些后，您需要创建的只是ReactNative组件导出（[react-native-project]/app/components/PermissionWebView/index.android.js）：

import PropTypes from 'prop-types';
import {requireNativeComponent, ViewPropTypes} from 'react-native';

// The 'name' property is not important, the important one is below
var mcs = {
  name: 'PermissionWebview',
  propTypes: {
    sourceUri: PropTypes.string,
      ...ViewPropTypes
  }
};

module.exports = requireNativeComponent('PermissionWebviewViewManager', mcs);

请注意，我们将索引名称设置为index.android.js，因为此组件是针对Android制作的，因此它仅包含在Android平台中。

有了这个，一切都应该有效，WebView组件应该在使用时请求权限。

编辑：

我已将代码上传到Github repository。我只更改了一些名称，但核心代码没有改变，以确保它仍然有效（我无法测试它，所以最好不要改变很多东西）。

希望它有所帮助！

Answer 2

就我而言，以下代码有效。

步骤1：向AndroidManifest.xml添加权限

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MICROPHONE" />
<uses-permission android:name="android.permission.CAMERA" />
<!-- any additional permissions -->

第2步：从“ react-native”包中为“ PermissionsAndroid”添加导入语句

import {
  PermissionsAndroid
} from 'react-native';

第3步：编写异步方法以获取所需的权限，这里我获得了“摄像头和麦克风”权限

cameraPermission = async () => {

    let granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Camera Permission",
        message:
          "App needs access to your camera " +
          "so others can see you.",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera");
    } else {
      console.log("Camera permission denied");
    }
}

micPermission = async () => {

let granted = await PermissionsAndroid.request(
  PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
  {
    title: "Audio Permission",
    message:
      "App needs access to your audio / microphone",
    buttonNeutral: "Ask Me Later",
    buttonNegative: "Cancel",
    buttonPositive: "OK"
  }
);

if (granted === PermissionsAndroid.RESULTS.GRANTED) {
  console.log("You can use the Microphone");
} else {
  console.log("Microphone permission denied");
}  

micPermission = async () => {
    let granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: "Audio Permission",
        message:
          "App needs access to your audio / microphone",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the Microphone");
    } else {
      console.log("Microphone permission denied");
    }    
}

第4步：在componentDidMount上触发权限

componentDidMount() {
  this.cameraPermission();
  this.micPermission();
}

第5步：添加具有媒体属性的WebView

render() {
return (
  <WebView
    userAgent={this.state.userAgent} //Set your useragent (Browser) **Very Important
    originWhitelist={['*']}
    allowsInlineMediaPlayback
    bounces={true}
    source={{
      uri: this.state.url, //URL of your redirect site
    }}
    startInLoadingState
    scalesPageToFit
    javaScriptEnabled={true}
  />
);
}

希望这会有所帮助！

React Native：Webview getUserMedia无法正常工作（onPermissionRequest覆盖？）

2 个答案:

编辑：