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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native：Webview getUserMedia无法正常工作（onPermissionRequest覆盖？）相关的知识，希望对你有一定的参考价值。

我正在使用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" />

是的，托管网站的URL是SSL认证的，所以它通过HTTPS。它适用于Chrome应用，因此它也适用于WebView。

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

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

谢谢。

答案

最后，我必须在原生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等的名称可以更改为您需要的任何名称，只要您在文件的名称空间和包引用中更改它们即可。

一旦掌握了所有这些，您需要创建的就是React Native组件导出（qazxsw poi）：

[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); ，因为此组件是为Android设计的，因此它仅包含在Android平台中。

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

编辑：

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

希望它可以帮到某人！

以上是关于React Native：Webview getUserMedia无法正常工作（onPermissionRequest覆盖？）的主要内容，如果未能解决你的问题，请参考以下文章

React Native WebView 状态栏

React Native开发React Native控件之WebView组件详解以及实例使用(22)

React-native：如何自动保存 webview 当前网页？

WebView 不一致地显示白屏 react-native

有啥方法可以在 react-native-webview 中禁用 hapticFeedback

如何在 iOS 的 WebView(react-native-webview) 中设置自定义字体？