前言：
如今朋友们对“html用什么软件方便”大概比较注重，你们都需要剖析一些“html用什么软件方便”的相关知识。那么小编也在网摘上收集了一些关于“html用什么软件方便””的相关文章，希望各位老铁们能喜欢，朋友们快快来学习一下吧！还是先贴效果图，分享宝贝儿子的快乐：）
直接贴源码，朋友们复制下来，贴在记事本，改扩展名成html就能用！一个应用就是一页html文件，比python那个要方便多了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头</title>
</head>
<body>
<video id="videoElement" width="640" height="480" autoplay></video>
<button onclick="startRecording()">开始录像</button>
<button onclick="stopRecording()">停止录像</button>
<button onclick="takePhoto()">拍照</button>
<canvas id="canvasElement" width="640" height="480"></canvas>
<script>
// 获取视频和画布元素
const video = document.getElementById('videoElement');
const canvas = document.getElementById('canvasElement');
const context = canvas.getContext('2d');
// 获取摄像头权限并播放视频流
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(error => {
console.error('获取摄像头权限失败:', error);
});
// 开始录像
let mediaRecorder;
const chunks = [];
function startRecording() {
chunks.length = 0;
mediaRecorder = new MediaRecorder(video.srcObject);
mediaRecorder.ondataavailable = function(event) {
chunks.push(event.data);
};
mediaRecorder.start();
}
// 停止录像并保存视频文件
function stopRecording() {
mediaRecorder.stop();
mediaRecorder.onstop = function() {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video.webm';
a.click();
};
}
// 拍照并保存图片文件
function takePhoto() {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'photo.png';
a.click();
}, 'image/png');
}
</script>
</body>
</html>
标签： #html用什么软件方便
