调用摄像头---图片抓拍和视频录像-CFANZ编程社区

调用摄像头---图片抓拍和视频录像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="视频" onclick="getMedia()"/>
<video src="" id="video" width="500px" height="500px"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="takPhone()" id="but">拍照</button>

<script>
    function getMedia()
    {
        var constrints={
            video:{width:500,height:500},
            audio:true
        };

        //获取摄像头区域
        var video=document.getElementById('video');
        /*
        * 该方法返回Promise对象
        * 这个Promise对象返回成功后会调函数带一个MediaStream对象作为其参数
        * then()时Promise的方法
        * then()方法是异步执行,当then()前的所有的方法执行完后再执行then()内部的程序
        * 避免数据没有获取到
        * */
        var promise=navigator.mediaDevices.getUserMedia(constrints);
        promise.then(function(MediaStream){
            video.srcObject=MediaStream;
            video.play();
        });
    }
    function takPhone()
    {
        var video=document.getElementById("video");
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext('2d');
        ctx.drawImage(video,0,0,500,500);
    }
</script>
</body>
</html>

0 条评论