功能如下
下载后的照片或视频为当前北京时间
html文件用户设置样式，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera App</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<button id="record">开始录像</button>
<button id="stop" disabled>停止录像</button>
<canvas id="canvas" width="640" height="480" style="display:none;"></canvas>
<a id="downloadPhoto" style="display:none;">下载照片</a>
<a id="downloadVideo" style="display:none;">下载视频</a>
<button id="toggleGrayScale">切换灰度滤镜</button>
<script src="camera.js"></script>
</body>
</html>
一些声明
document.addEventListener('DOMContentLoaded', function() {// 当文档加载完成时，执行函数
var video = document.getElementById('video'); // 获取页面中id为'video'的<video>元素
var canvas = document.getElementById('canvas'); // 获取页面中id为'canvas'的<canvas>元素
var context = canvas.getContext('2d'); // 获取canvas的2D绘图上下文
var downloadPhoto = document.getElementById('downloadPhoto'); // 获取页面中id为'downloadPhoto'的<a>元素，用于下载照片
var downloadVideo = document.getElementById('downloadVideo'); // 获取页面中id为'downloadVideo'的<a>元素，用于下载视频
var recordButton = document.getElementById('record'); // 获取页面中id为'record'的按钮元素，用于开始录制视频
var stopButton = document.getElementById('stop'); // 获取页面中id为'stop'的按钮元素，用于停止录制视频
var mediaRecorder; // 声明一个变量用于存储MediaRecorder对象
var chunks = []; // 声明一个数组用于存储录制的视频片段
var isGrayScale = false; // 用于跟踪是否应用了灰度滤镜
启动摄像头
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.error("Error accessing media devices.", error);
});
拍照功能
document.getElementById('snap').addEventListener('click', function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataUrl = canvas.toDataURL('image/png');
downloadPhoto.href = dataUrl;
downloadPhoto.download = getBeijingTimeString()+'.png';
downloadPhoto.style.display = 'inline';
});
开始录像
recordButton.addEventListener('click', function() {
mediaRecorder = new MediaRecorder(video.srcObject);
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.start();
recordButton.disabled = true;
stopButton.disabled = false;
});
停止录像
stopButton.addEventListener('click', function() {
mediaRecorder.stop();
recordButton.disabled = false;
stopButton.disabled = true;
mediaRecorder.onstop = function() {
var blob = new Blob(chunks, { type: 'video/mp4' });
chunks = [];
var videoUrl = URL.createObjectURL(blob);
downloadVideo.href = videoUrl;
downloadVideo.download = getBeijingTimeString()+'.mp4';
downloadVideo.style.display = 'inline';
};
});
切换灰度滤镜
function toggleGrayScale() {
isGrayScale = !isGrayScale; // 切换状态
var effect = isGrayScale ? 'grayscale(100%)' : 'none';
video.style.filter = effect;
}
为toggleGrayScale按钮添加事件监听器来切换灰度滤镜
document.getElementById('toggleGrayScale').addEventListener('click', toggleGrayScale);
});
获取当前北京时间的字符串
function getBeijingTimeString() {
var date = new Date(); // 获取当前时间
var year = date.getFullYear(); // 年
var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月
var day = date.getDate().toString().padStart(2, '0'); // 日
var hours = date.getHours().toString().padStart(2, '0'); // 小时
var minutes = date.getMinutes().toString().padStart(2, '0'); // 分钟
var seconds = date.getSeconds().toString().padStart(2, '0'); // 秒
// 拼接成年+月+日+小时+分钟+秒的格式
return `${year}${month}${day}${hours}${minutes}${seconds}`;
}
标签：function,canvas,可拍照,js,getElementById,html,video,var,document From： https://www.cnblogs.com/wild-bokeyuan/p/18522306