React HOOK 自定义拍照画面，自动截取指定画面

需求

要求实现用户上传身份证照片，自定义上传画面，自动截取身份证图片，并获取身份证上面的信息。如果机型不支持则留有保底手段：相册上传图片，获取身份证上的信息。

大概思路

自定义上传画面

主要依赖 navigator.mediaDevices.getUserMedia API

自动截取身份证图片

根据 canvas.drawImage 去生成画布，随后进行 canvas.toDataURL 获取base64格式的图片

获取身份证上面的信息

这个先将base64图片上传oss，获取到图片url，再根据百度ocr身份证识别，获取到对应正反面的信息。

效果

实现

此功能为组件形式注入到上传图片的页面中，为保存一些数据一些utils内的方法，redux中的操作也都在下面展示。

核心代码

import React, { memo, useEffect, useRef, useState } from 'react'
import PropsType from 'prop-types'
import styled from 'styled-components'
import { withRouter } from 'react-router-dom'
import { detectDeviceType } from 'zzy-javascript-devtools'
import { connect } from 'react-redux'

import globalSty from '../../api/global-style'
import { getUserMedia, getXYRatio, cameraErrorMsg } from '../../api/utils'
import { getIdCardMsg, setCameraType } from './store/actionCreators'
import HeaderBar from '../../components/HeaderBar'
import Toast from '../../components/Toast'
import { uploadFileBase64Req } from '../../api'

let captrueTimer
let getStreamTimer
let isStart = false
let videoStreams
let pageTimer

const Camera = (props) => {const { type, close } = propsconst {setCameraTypeDispatch,getIdCardMsgDispatch,changeIdCardMsg,uploadFile} = props// photo这个值是用来开发测试时在截取区域上方黑色地方展示当前截取base64图片的。// const [photo, setPhoto] = useState('')// 1-正面 2-反面const [idCardType, setIdCardType] = useState(1)useEffect(() => {// 页面进入时，正反面状态以父组件传值为准setIdCardType(type)// 开始计时,超过指定时间就关闭页面，保证不会长期在此页面调用接口startTimeing()return () => {clearTimeout(pageTimer)}}, [])const videoRef = useRef()// 截取区域 refconst rectangle = useRef()// 弹窗组件ref，下面的方法都为弹窗提示组件方法，可忽略。const toastRef = useRef()useEffect(() => {if (videoRef.current && <img src="https下才可以使用，否则直接报错// 开始获取用户媒体流const getUserMediaStream = (videoNode) => {const params1 = {video: { facingMode: { exact: 'environment' } } // 设置true为