<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像截图</title>
<style>
body {
margin: 0;
}
video {
object-fit: cover;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<video src=""></video>
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
<button onclick="handlePlay()">play</button>
<button onclick="handleClip()">clip</button>
<img src="" alt="" srcset="">
<script>
// 开启拍摄
async function play(constraints) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints)
console.log('流媒体:', stream)
const video = document.querySelector('video')
video.srcObject = stream
video.onloadedmetadata = (e) => {
video.play()
}
} catch (error) {
console.log('error:',)
}
}
function handlePlay() {
const constraints = {
audio: false,
video: {
// 前置摄像头
// facingMode: "user"
// 强制使用后置摄像头
// facingMode: {
// exact: "environment"
// }
}
}
play(constraints)
}
function handleClip () {
const video = document.querySelector('video')
video.pause()
const canvas = document.getElementById('canvas')
canvas.height = video.clientHeight
canvas.width = video.clientWidth
console.log(video.videoHeight, video.videoWidth)
const ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0, 400, 300)
const canvas2 = document.getElementById('canvas2')
canvas2.height = 100
canvas2.width = 200
const ctx2 = canvas2.getContext('2d')
ctx2.drawImage(canvas, 100, 100, 200, 100, 0, 0, 200, 100)
const imgsrc = canvas2.toDataURL('image/png')
document.querySelector('img').src = imgsrc
}
</script>
</body>
</html>
javascript中getUserMedia和用canvas截图
最新推荐文章于 2024-05-09 20:51:28 发布