React | 在react中使用Video标签进行拍照生成Base64图片

- 日理万妓 2021-09-21 08:14 760阅读 0赞

## 功能 ##

1.  效果图
2.  代码

点击一个按弹出一个框可以点击拍照生成Base64图片

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

## 上代码 ##

*  回到顶部

import React, {  PureComponent, Fragment } from 'react';
    import {  Button, Row, Col } from 'antd'
    
    // import avatar from './avatar.png' // 背景图
    
    //视频流
    let trackStrem
    
    /** * 参数 * @param {getCameraRef} function 获取子类ref * @param {onChange} function 传递图片数据 * @param {image} base64 图片数据 */
    export default class Camera extends PureComponent { 
    
        state = { 
            camState: 1
        }
    
        componentDidMount() { 
        	// 如果没有对子类属性控制的需求可以直接注释这个回调函数 getCameraRef
            const {  image, getCameraRef } = this.props;
            getCameraRef(this)
            if (image) { 
                this.changeState(1)
            } else { 
                this.changeState(2)
            }
        }
    
        componentWillUnmount() { 
            this.closeCamera()
        }
    
        // 状态切换
        changeState = (state) => { 
            switch (state) { 
                case 1:
                    this.setState({  camState: 1 })
                    break;
                case 2:
                    this.setState({  camState: 2 })
                    this.openCamera()
                    break;
                case 3:
                    this.setState({  camState: 3 })
                    this.catchPhoto()
                    this.closeCamera()
                    break;
            }
        }
    
        // 打开摄像头
        openCamera = () => { 
            console.log(`open camera...`)
            const video = this.refs.video
            const videoObj = { 
                video: { 
                    width: 320,
                    height: 240
                }
            }
            const errBack = function (error) { 
                console.log(error.message);
                console.log("Video capture error: ", error.message + " " + error.code);
            }
    
            // 判断媒体对象是否有权限
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
                navigator.mediaDevices.getUserMedia(videoObj).then(function (stream) { 
                    console.log(`video`, video)
                    video.srcObject = trackStrem = stream
                    video.play()
                }).catch(function (err) { 
                    errBack(err)
                })
            }
            else window.alert('打开摄像头失败')
            
        }
    
        // 关闭摄像头
        closeCamera = () => { 
            console.log(`close camera...`)
            if (this.refs.video) this.refs.video.pause();
            if (trackStrem) trackStrem.getTracks()[0].stop();
        }
    
        // 保存图片
        catchPhoto = () => { 
            const {  onChange } = this.props;
            const canvas = this.refs.canvas
            const video = this.refs.video
            let context = canvas.getContext("2d")
            context.drawImage(video, 0, 0, 320, 240);
            // 从画布上获取照片数据
            let imgData = canvas.toDataURL(`image/jpeg`);
            // 对外派发图片数据
            if (onChange) onChange(imgData)
        }
    
        render() { 
            const {  camState } = this.state
            const {  image } = this.props;
    
            console.log(`camState`, camState)
    
            return (
                <Row>
                    <Col span={ 24} style={ {  padding: 12, textAlign: 'center' }}>
                        <img style={ {  width: 320, height: 240, display: camState === 1 ? 'block' : 'none' }} src={ image} />
                        { /* <img alt="avatar" src={avatar} style={ { zIndex: 100, position: 'absolute', x: 0, y: 0, display: camState === 1 ? 'none' : 'block' }} /> */}
                        <video ref="video" width="320" height="240" autoPlay style={ {  display: camState === 1 ? 'none' : 'block' }}></video>
                        <canvas ref="canvas" width="320" height="240" style={ {  display: 'none' }}></canvas>
                    </Col>
                    <Col span={ 24} style={ {  padding: 12, textAlign: 'center' }}>
                        { camState === 2 ? <Button onClick={ () => this.changeState(3)} type="primary">保存快照</Button> : <Button onClick={ () => this.changeState(2)} type="primary">重新拍照</Button>}
                    </Col>
                </Row>
            );
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/129bb82c1a27455c9a59d4c488ffd150.png