app、h5自定义取景框，调用摄像头内嵌到网页或app

童柯西

已于 2022-03-22 15:31:22 修改

阅读量3.4k

点赞数 2

文章标签： react.js javascript 前端

于 2022-03-21 21:15:53 首次发布

本文链接：https://blog.csdn.net/qq_43001049/article/details/123612891

版权

最近写的项目中有关于智能识图的功能，那么首先为了方便用户体验和完善app功能，我们需要自定义拍摄页面

为了完成这个功能，需要使用一个web的API开发接口：MediaDevices.getUserMedia()

这个API 会返回一个MediaStream，里面包含了请求的媒体类型的轨道。

首先先写一个简单的视频载体

 <video id={'videoTest'}
        playsInline={true}
        style={{width: SCREEN_WIDTH, height:SCREEN_WIDTH,}}/>

然后在进入页面的时候把返回的流媒体赋在这个viedo上

 //获取video，之后作为stream数据的载体
        let video = document.getElementById('videoTest')
        navigator.mediaDevices.getUserMedia({
            video: {
                facingMode: 'environment',//在app上使用后置  后置:’environment‘,前置：’user‘
                width: {ideal:1000},//1000的摄像头分辨率宽
                height:{ideal:1000},//1000的摄像头分辨率高
            },
            audio: false //关闭录音
        }).then((stream)=>{
            video.srcObject = stream
            this.mediaStream = stream
            video.play();
        }).catch((error)=>{
            console.log(error);
        })

到这里为止我们调用电脑的摄像头就已经成功了
请添加图片描述
但是众所周知app的开发如果需要调用设备的一些权限的，那么我们在打包完成之后还需要在Android Studio原生上添加一下权限

添加位置：app=>src=>AndroidManifest.xml

 <uses-permission android:name="android.permission.CAMERA" />

然后再MainActivity中检查app是否有该权限，如果没有就申请权限

在源码中添加以下代码

  private static final int REQUEST_PERMISSIONS_CODE = 1;
    private static final String[] REQUIRED_PERMISSIONS = {Manifest.permission.CAMERA};
    @Override
    protected void onResume() {
        super.onResume();
        // 动态权限检查
        if (!isRequiredPermissionsGranted() && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            requestPermissions(REQUIRED_PERMISSIONS, REQUEST_PERMISSIONS_CODE);
        }
    }
    /**
     * 判断我们需要的权限是否被授予，只要有一个没有授权，我们都会返回 false。
     *
     * @return true 权限都被授权
     */
    private boolean isRequiredPermissionsGranted() {
        for (String permission : REQUIRED_PERMISSIONS) {
            if (ContextCompat.checkSelfPermission(this, permission) == PackageManager.PERMISSION_DENIED) {
                return false;
            }
        }
        return true;
    }