react 拍照以及录制视频功能

1、首先，在你的React应用程序中安装react-html5-camera-photo组件。可以通过npm命令行运行"npm install react-html5-camera-photo"来安装该组件。

2、在需要使用拍照功能的页面中引入该组件，并在render()方法中添加<Camera />标签。该标签会渲染出摄像头的预览画面。

3、在用户点击拍照按钮时，调用<Camera />标签中的onTakePhoto(dataUri)方法，将拍摄的照片以Data URI的形式返回。

不多废话上代码：

import React, {PureComponent} from 'react';
import {connect} from 'dva';
import Camera from 'react-html5-camera-photo';//拍照组件
import 'react-html5-camera-photo/build/css/index.css';//不能注释以及删除，react-html5-camera-photo自带的样式


class Test extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            photo: null,//照片
        };
    }

    //拍照方法
    takePhoto = (dataUri) => {
        console.log(dataUri)
        //将获取到的照片存储起来
        this.setState({
            photo: dataUri
        })
    };

    render() {
        const {photo} = this.state
        return (
            <div className={'page-body'}>
                <div className={'content-body'}>
                    <div>
                        {/*拍照：第三方组件  onTakePhoto拍照--关键方法 */}
                        <Camera onTakePhoto={(dataUri) => {this.takePhoto(dataUri)}} />
                        {/* 在页面上显示捕获的图像 */}
                        {photo && <img src={photo} alt="Camera photo"/>}
                    </div>
                </div>
            </div>
        )
    }
}

export default connect()(Test);

效果图：

拍出来的图片：

 相关api可以在这个地址中搜到

文档地址GitHub - seanyangsg/react-html5-camera-photo: HTML5 camera photo