React Native接入百度Ai，实现身份证识别

最新推荐文章于 2024-05-21 09:45:23 发布

上海小飞象

最新推荐文章于 2024-05-21 09:45:23 发布

阅读量1.2k

点赞数

分类专栏： React Native 文章标签： React Native

本文链接：https://blog.csdn.net/u013783000/article/details/98053063

版权

React Native 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前述

在React Native项目需求中，用到了身份证识别，下面是对接代码，全部是硬货，请多多评论或点赞。

第一步注册百度AI开放平台账号

地址 https://login.bce.baidu.com/ 注册步骤省略

第二步文字识别 > 创建应用

在这里插入图片描述

在这里插入图片描述
创建完成之后，如下图：
点击 管理，下载 android sdk包，结构如下：

第三步划重点

1.使用 Android Studio 打开 React Native 项目的 android文件夹
2. 导入 android sdk 包内 ocr_ui 模块，导入过程省略
3. 打开 ocr_ui模块修改 defaultConfig，使与rn主项目一致，包括 compileSdkVersion，minSdkVersion，targetSdkVersion等
4. 复制 ocr-sdk.jar 文件到 app>libs内
5. 复制 android sdk 内 libs目录arm64-v8a，armeabi，armeabi-v7a，x86 文件夹到 src>main>jniLibs 内，如果没有 jniLibs 目录，可新建一个。
6. 在app>build.gradle内 dependencies 添加重构生成

implementation files('libs/ocr-sdk.jar') 
implementation project(path: ':ocr_ui')

正常情况下，是可以生成成功的。
7. 复制 android sdk demo中的 FileUtil.java、RecognizeService.java文件，具体路径为 aip-ocr-android-sdk-1.4.4\OCRDemo\app\src\main\java\com\lcms
8. 在百度控制台，新建的项目下，下载 License文件，注意文件名不要更改。下载之后，放到main>assets内
在这里插入图片描述
9.在 MainApplication.java 的 getPackages 函数内，添加 new KeyboardPackage()

10.在 MainApplication.java 的 onCreate 函数内添加 initAccessToken 函数，initAccessToken函数如下
initAccessToken函数的具体作用是初始化OCR

private void initAccessToken(){
    OCR.getInstance(this).initAccessToken(new OnResultListener<AccessToken>() {
      @Override
      public void onResult(AccessToken accessToken) {
        String token=accessToken.getAccessToken();
        Session.setHasGotToken(true);
      }
      @Override
      public void onError(OCRError ocrError) {
        ocrError.printStackTrace();
        Session.setHasGotToken(false);
        Session.setBaidu_message("licence方式获取token失败,"+ocrError.getMessage());
      }
    },getApplicationContext());
  }

Session代码如下
在这里插入图片描述
10.创建 KeyboardPackage.java ，KeyboardModule.java 文件代码如下：
KeyboardPackage.java ：

KeyboardModule.java：

public class KeyboardModule extends ReactContextBaseJavaModule {
    private ReactApplicationContext _context=null;
    public KeyboardModule(ReactApplicationContext reactContext){
        super(reactContext);
        _context=reactContext;
    }
    @Override
    public String getName(){
        return "KeyboardFunctionalities";
    }

    @ReactMethod
    public void hideKeyboard(){
        final Activity activity = getCurrentActivity();
        InputMethodManager imm = (InputMethodManager)Assertions.assertNotNull(activity.getSystemService(Activity.INPUT_METHOD_SERVICE));
        imm.hideSoftInputFromWindow(activity.getCurrentFocus().getWindowToken(), 0);
    }
    @ReactMethod
    public void printExec(String ip, String port,String data,Promise promise){
        Map<String,String> map=new HashMap<String,String>();
        map.put("code","404");
        Socket socket=new Socket();
        try{
            SocketAddress socAddress = new InetSocketAddress(ip, Integer.parseInt(port));
            socket.connect(socAddress, 3000);
            if(socket.isConnected()){
                BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(socket.getOutputStream()));
                bw.write(data);
                bw.flush();
                bw.close();
                socket.close();
                map.put("code","200");
                map.put("message","打印成功");
            }else{
                map.put("message","连接打印机失败");
            }
        }catch (Exception ex){
            map.put("message",ex.getMessage().toString());
        }
        Gson gson=new Gson();
        promise.resolve(gson.toJson(map));
    }
    @ReactMethod
    public void GetPrinterList(String IP, String Port, String VendorName,Promise promise) {
        Gson gson=new Gson();
        Map<String,String> mmap=new HashMap<String,String>();
        mmap.put("code","404");
        SocketUDP socket = new SocketUDP();
        String printerList = null;
        try {
            printerList = socket.SendData(IP, Integer.valueOf(Port), "RequestPrinterReportList");
            if (printerList.equals("")) {
                mmap.put("message","当前地址没有安装打印机");
            } else {
                List<Map<String, Object>> mlist = new ArrayList<Map<String, Object>>();
                String[] mArray = printerList.split(",");
                for (int i = 0; i < mArray.length; i++) {
                    Map<String, Object> map = new HashMap<String, Object>();
                    map.put("isChecked", false);
                    map.put("IP", IP);
                    map.put("Port", Port);
                    map.put("VendorName", VendorName);
                    map.put("PrinterName", mArray[i]);
                    mlist.add(map);
                }
                mmap.put("code","200");
                mmap.put("message",gson.toJson(mlist));
            }
        } catch (IOException e) {
            mmap.put("message","获取打印机列表失败");
        }
        promise.resolve(gson.toJson(mmap));
    }
    @ReactMethod
    public void installapk(String path,Promise promise){
        try{
            Runtime.getRuntime().exec("chmod 777 "+path);
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            intent.setDataAndType(Uri.parse("file://" + path),"application/vnd.android.package-archive");
            _context.startActivity(intent);
            promise.resolve("ok");
        }catch (Exception ex){
            ex.printStackTrace();
            promise.resolve("Exception:"+ex.getMessage());
        }
    }
    /**
     * TCP 条码打印
     * @param mIP
     * @param mPort
     * @param mData
     */
    private String TCPSocketPrint(String mIP,int mPort,String mData) {
        Socket socket=new Socket();
        try {
            // 创建一个Socket对象，并指定服务端的IP及端口号
            SocketAddress socAddress = new InetSocketAddress(mIP, mPort);
            socket.connect(socAddress, 3000);
            if(socket.isConnected())
            {
                BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(
                        socket.getOutputStream()));
                writer.write(mData);
                writer.flush();
                writer.close();
                socket.close();
            }
            return "打印成功";
        }  catch (IOException e) {
            //e.printStackTrace();
            return "网络连接错误";
        } catch (Exception e) {
            //e.printStackTrace();
            return "网络连接错误";
        }
    }

    private static final int REQUEST_CODE_CAMERA = 102;
    @ReactMethod
    public void TestScan(Promise promise){
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("status",String.valueOf(Session.gethasGotToken()));
        boolean hastoken=Session.gethasGotToken();
        if(!hastoken){
            map.put("msg",Session.getBaidu_message());
            promise.resolve(new Gson().toJson(map));return;
        }else{
            Session.setPromise(promise);
            final Activity activity = getCurrentActivity();
            ///身份证正面
            Intent intent = new Intent(activity, CameraActivity.class);
            intent.putExtra(CameraActivity.KEY_OUTPUT_FILE_PATH,FileUtil.getSaveFile(activity.getApplication()).getAbsolutePath());
            intent.putExtra(CameraActivity.KEY_CONTENT_TYPE, CameraActivity.CONTENT_TYPE_ID_CARD_FRONT);
            activity.startActivityForResult(intent, REQUEST_CODE_CAMERA);
        }
    }
    @ReactMethod
    public void TestScanBarCode(Promise promise){
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("status",String.valueOf(Session.gethasGotToken()));
        boolean hastoken=Session.gethasGotToken();
        if(!hastoken){
            map.put("msg",Session.getBaidu_message());
            promise.resolve(new Gson().toJson(map));return;
        }else{
            Session.setPromise(promise);
            final Activity activity = getCurrentActivity();
            ///身份证正面
            Intent intent = new Intent(activity, CameraActivity.class);
            intent.putExtra(CameraActivity.KEY_OUTPUT_FILE_PATH,FileUtil.getSaveFile(activity.getApplication()).getAbsolutePath());
            intent.putExtra(CameraActivity.KEY_NATIVE_ENABLE, true);
            intent.putExtra(CameraActivity.KEY_NATIVE_MANUAL, true);
            intent.putExtra(CameraActivity.KEY_CONTENT_TYPE, CameraActivity.CONTENT_TYPE_ID_CARD_FRONT);
            activity.startActivityForResult(intent, REQUEST_CODE_CAMERA);
        }
    }
}

在rn项目，可以使用点击事件，触发函数，函数代码如下：

 //身份证拍照识别
    async TestBarCode(){
        NativeModules.KeyboardFunctionalities.TestScan().then((response)=>{
            var json=JSON.parse(response);
            if(!json.status){
                GlobalFuc.alert(json.msg);return;
            }
            if(!json.resultok){
                GlobalFuc.alert(json.msg);return;
            }
            this.alertinfo(json.data);
        });
    }

//身份证扫描识别
  async TestScanBarCode(){
       NativeModules.KeyboardFunctionalities.TestScanBarCode().then((response)=>{
           var json=JSON.parse(response);
           if(!json.status){
               GlobalFuc.alert(json.msg);return;
           }
           if(!json.resultok){
               GlobalFuc.alert(json.msg);return;
           }
           this.alertinfo(json.data);
       });
   }

这就可以了，这仅仅只是一个demo，欢迎评论和提出问题。

上海小飞象

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
React Native接入百度Ai，实现身份证识别

android { compileSdkVersion 28 defaultConfig { minSdkVersion 16 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTy
复制链接

扫一扫