前端调用摄像头录像

95 阅读 0 评论 63 点赞

我是靠谱客的博主清新鸭子，最近开发中收集的这篇文章主要介绍前端调用摄像头录像，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>