camera-serial-utils
Version:
A utility package for camera capture and serial communication using Web Serial API
78 lines (70 loc) • 2.47 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相机拍照测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#resultImage {
max-width: 100%;
margin-top: 20px;
display: none;
}
.error-message {
color: #f44336;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>相机拍照测试</h1>
<button id="openCamera">打开相机拍照</button>
<img id="resultImage" alt="拍摄结果">
<div id="errorMessage" class="error-message"></div>
<script type="module">
import { captureCamera } from '../dist/camera.js';
// import { serialHelper } from '../dist/camera.js';
const openCameraBtn = document.getElementById('openCamera');
const resultImage = document.getElementById('resultImage');
const errorMessage = document.getElementById('errorMessage');
openCameraBtn.addEventListener('click', async () => {
errorMessage.textContent = '';
try {
openCameraBtn.disabled = true;
openCameraBtn.textContent = '正在初始化相机...';
const base64Image = await captureCamera({
width: 1280,
height: 720,
quality: 0.9
});
resultImage.src = base64Image;
resultImage.style.display = 'block';
} catch (error) {
errorMessage.textContent = `错误: ${error.message}`;
console.error('拍照失败:', error);
} finally {
openCameraBtn.disabled = false;
openCameraBtn.textContent = '打开相机拍照';
}
});
</script>
</body>
</html>