import React from 'react';
import { $http } from '../../containers/config/https';
import './style/index.less';
import { Button, message } from 'antd';

export default class FaceRecognitionManual extends React.Component {
    constructor() {
        super();
        this.state = {
            visible: false,
            streaming: false, // 是否开始捕获媒体
            faceValue: "", // 人脸特征值
        }
    }
    componentDidMount() {
        this.faceID();
    }
    ///关闭摄像头
    clearVideo = () => {
        let video = document.querySelector("#video");
        if (video.srcObject) {
            video.srcObject.getTracks()[0].stop(); //关闭摄像头
        }
    }
    // 人脸识别
    faceID = () => {
        try {
            let video = document.querySelector("#video");
            let canvas = document.querySelector("#canvas"); //
            let width = 500; //视频和canvas的宽度
            let height = 500; //
            let { streaming } = this.state; // 是否开始捕获媒体
            let that = this
            // 获取用户媒体,包含视频和音频
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(stream => {
                    video.srcObject = stream; // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
                    video.play(); //  播放视频
                });

            // 监听视频流就位事件,即视频可以播放了
            video.addEventListener('canplay', function (ev) {
                if (!streaming) {
                    video.setAttribute('width', width);
                    video.setAttribute('height', height);
                    canvas.setAttribute('width', width);
                    canvas.setAttribute('height', height);
                    streaming = true;
                    that.setState({
                        streaming: streaming
                    })
                }
            }, false);
        } catch (error) {
            message.error("当前浏览器没有摄像头权限，请先授权。")
        }

    }

    tackcapture = () => {
        let video = document.querySelector("#video");
        let canvas = document.querySelector("#canvas");
        let context = canvas.getContext('2d');
        let { streaming } = this.state; // 是否开始捕获媒体
        // 需要判断媒体流是否就绪
        if (streaming) {
            context.drawImage(video, 10, 62, 500, 376);// 将视频画面捕捉后绘制到canvas里面
            this.setState({
                imageUrl: canvas.toDataURL('image/png')  // 将canvas的数据传送到img里
            }, () => {
                this.faceImg() // 人脸识别验证
            })
        }
    }

    // 人脸识别获取特征值
    faceImg = () => {
        let { imageUrl } = this.state
        // 初始值下拉列表值
        let data = {
            "params": [
                {
                    "imageBase64": imageUrl.substring(imageUrl.indexOf(",") + 1)
                }
            ]
        };
        $http.post('urlDeault', this, {
            code: "88010021",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        faceValue: res.result.faceValue || "",
                    }, () => {
                        var { loadDara, closeModal } = this.props;
                        loadDara && loadDara(this.state.faceValue, this.state.imageUrl)
                        setTimeout(closeModal && closeModal(), 2 * 1000);//延迟5000毫米
                    })
                    message.success(res.errorMessage)
                }
            }
        });

    }
    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
    }

    render() {
        return (
            <div>
                <video id="video" width="500" height="500"></video>
                <canvas id="canvas" width="500" height="500"></canvas>
                <Button onClick={this.tackcapture}>拍照</Button>
            </div>

        )
    }
}
