前端调用摄像头画面并展示在html中，拍照功能，react脚手架项目

前端调用摄像头画面并展示在html中，拍照功能

我使用的是react脚手架搭建的项目

render代码，此处我使用的点击事件显示隐藏视频窗口

{this.state.isshipin ? <li onClick={this.shipinClose}>
	<p>开启视频</p>
		</li> : <li onClick={this.shipinShow}>
	<p>关闭视频</p>
</li>}

自定义点击事件，延迟是因为我的视频时显示隐藏的，显示时需延时才能获取到dom

shipinShow = () => {
        this.setState({
            isshipin: true
        })
    }
shipinClose = () => {
        this.setState({
            isshipin: false
        })
        setTimeout(() => {
            //访问用户媒体设备的兼容方法
            function getUserMedia(constraints, success, error) {
                if (navigator.mediaDevices.getUserMedia) {
                    //最新的标准API
                    navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
                } else if (navigator.webkitGetUserMedia) {
                    //webkit核心浏览器
                    navigator.webkitGetUserMedia(constraints, success, error)
                } else if (navigator.mozGetUserMedia) {
                    //firfox浏览器
                    navigator.mozGetUserMedia(constraints, success, error);
                } else if (navigator.getUserMedia) {
                    //旧版API
                    navigator.getUserMedia(constraints, success, error);
                }
            }

            let video = document.getElementById('video');

            function success(stream) {
                //兼容webkit核心浏览器
                let CompatibleURL = window.URL || window.webkitURL;
                //将视频流设置为video元素的源
                console.log(stream);

                // video.src = CompatibleURL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
            }

            function error(error) {
                console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
            }

            if(!navigator.mediaDevices){
                message.warning("不支持访问用户媒体")
                return
            }

            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                //调用用户媒体设备, 访问摄像头
                getUserMedia({
                    video: {
                        width: 480,
                        height: 320
                    }
                }, success, error);
            } else {
                alert('不支持访问用户媒体');
            }

            // document.getElementById('capture').addEventListener('click', function () {
            // 	context.drawImage(video, 0, 0, 352, 326);
            // })
        }, 4);
    }