Canvas截取视频流上传图片
2021-05-23 本文已影响0人
空腹无才
video 视频流转换为图片并上传至服务器
一、客户端
video 对象可以获取摄像头视频流
// index.html
<!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>Document</title>
</head>
<body>
<div>
<video id = "video" width="300" height="300"></video>
<canvas id="canvas" width="300" height="300"></canvas>
</div>
</body>
</html>
let voideo = document.querySelector("#video");
let canvas = document.getElementById("canvas");
// 生成2d canvas 容器
let context = canvas.getContext("2d");
// navigator 存储了浏览器相关基本信息
// navigator.mediaDevices 判断是否可以有媒体设备
// navigator.mediaDevices.getUserMedia 是否可以使用媒体设备
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
let options = {
audio: false, // 是否开启音频设备
video： { // 视频输入设备
width: 300,
height: 300,
}
}
navigator.mediaDevices.getUserMedia(options).then(
function(stream) {
// 获取视频流，并添加到video对象中
video.srcObject = stream;
video.play();
createImage();
}
)
}
function createImage() {
//绘图
setInterval(() => {
// 向画布上绘制图片
let data = context.drawImage(voideo, 0, 0, 300, 300);
// 设置图片格式 获取base64图片内容
var image = canvas.toDataURL('image/png');
upDataImage(image);
}, 3000)
}
// 将图片上传至服务器处理
function upDataImage(data) {
fetch(
'你的url地址',
{
method: "post",
body: JSON.stringify({img: data}),
headers: {
'Content-Type': 'application/json'
},
}
).then(res => {
res.json().then(val => {
console.log(val)
})
})
}
二、知识点
- video 获取视频流并播放
- canvas 将图片转换为base64格式
- navigator 判断是否可以调用摄像头
