前端调用摄像头录像

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <video id="media" autoplay></video>
        <button id="capture">点击抓拍</button>
    </div>
    <canvas id="canvas" width="480" height="320"></canvas>

    <script>
        const media = document.getElementById('media')	// video元素
        const capture = document.getElementById('capture')	// button元素

        const canvas = document.getElementById('canvas')  // canvas元素
        const context = canvas.getContext('2d')

        navigator.mediaDevices.getUserMedia({video: {width: 480, height: 320}, audio: true}).then(stream => {
            // 将视频流设置为video元素的源
            media.srcObject = stream
            // 低版本浏览器
            // media.src = window.URL.createObjectURL(stream)
            media.play()
        })

        // 绑定拍照按钮的单机事件
        capture.addEventListener('click', () => {
            context.drawImage(media, 0, 0)	// 将video在canvas上绘制出来
            canvas.toBlob(blob => {		// 将canvas转换为blob
                console.log(blob)
            })
        })
    </script>
</body>
</html>

你可能感兴趣的:(前端基础html,css,js,javascript,html5)