Các bài cùng serial: Sử dụng camera đo khoảng cách 2 vật thể hoặc 2 điểm
- Thuật toán để đo khoảng cách 2 vật thể hoặc 2 điểm bằng camera
- Đo khoảng cách giữa hai điểm bằng camera điện thoại
- Áp dụng OpenCV trong JavaScript và tính toán khoảng cách giữa hai điểm trong ảnh
- Sử dụng TensorFlow.js tính khoảng cách giữa hai điểm ảnh
- Công thức tính toán Real World Distance và tính các tham số từ JavaScript
- JavaScript và HTML5 đo khoảng cách từ điện thoại đến một điểm(bạn đang xem)
Để đo khoảng cách từ điện thoại đến một điểm bằng JavaScript và HTML5, bạn có thể kết hợp với các API Web như Geolocation, DeviceOrientation (cho cảm biến), hoặc Web Bluetooth API. Tuy nhiên, đối với việc đo khoảng cách vật lý giữa 2 điểm qua camera mà không có các thông tin về FOV, bạn sẽ cần kết hợp các giải pháp như AR, hoặc đo khoảng cách qua tín hiệu Bluetooth hoặc Wi-Fi (RSSI).
1. Sử dụng AR với JavaScript (WebXR)
Một cách phổ biến để đo khoảng cách với camera trong các ứng dụng web là sử dụng WebXR API để xây dựng trải nghiệm Augmented Reality (AR). Dưới đây là một ví dụ đơn giản sử dụng WebXR để hiển thị thông tin về khoảng cách.
HTML5/JavaScript sử dụng WebXR API:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Measure Distance with AR</title>
<script src="https://cdn.jsdelivr.net/npm/aframe"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- AR Button -->
<button id="start-ar" style="position: absolute; top: 20px; left: 20px;">Start AR</button>
<!-- A-Frame AR Scene -->
<a-scene embedded arjs>
<a-camera></a-camera>
<a-entity id="marker" position="0 0 -5" gps-entity-place="latitude: 37.7749; longitude: -122.4194;"></a-entity>
</a-scene>
<script>
document.getElementById('start-ar').addEventListener('click', () => {
if ('xr' in navigator) {
navigator.xr.requestDevice().then(device => {
device.requestSession('immersive-ar').then(session => {
session.addEventListener('end', () => alert("AR Session Ended"));
alert("AR Session Started!");
});
});
} else {
alert('WebXR not supported on this device');
}
});
</script>
</body>
</html>
Trong ví dụ này:
- WebXR API được sử dụng để kích hoạt AR trên các thiết bị hỗ trợ.
- Dữ liệu từ cảm biến của thiết bị (GPS, camera) có thể được sử dụng để đo khoảng cách với các đối tượng ảo.
2. Sử dụng Bluetooth để đo khoảng cách với JavaScript
JavaScript có thể sử dụng Web Bluetooth API để đo khoảng cách từ điện thoại đến các thiết bị Bluetooth khác (ví dụ: Bluetooth beacon).
Ví dụ đo khoảng cách từ Bluetooth device:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bluetooth Distance</title>
</head>
<body>
<button id="scan-bluetooth">Scan for Bluetooth Devices</button>
<div id="device-info"></div>
<script>
// Kiểm tra tính tương thích của Web Bluetooth API
if (!navigator.bluetooth) {
alert("Web Bluetooth is not supported on your device.");
}
// Lắng nghe sự kiện click để quét thiết bị Bluetooth
document.getElementById('scan-bluetooth').addEventListener('click', async () => {
try {
const device = await navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['battery_service']
});
// Lấy thông tin thiết bị
const name = device.name || "Unknown device";
const id = device.id;
const rssi = device.rssi; // Cường độ tín hiệu
// Tính toán khoảng cách ước tính từ RSSI
const estimatedDistance = calculateDistanceFromRSSI(rssi);
document.getElementById('device-info').innerHTML = `
Device: ${name}<br>
Device ID: ${id}<br>
RSSI: ${rssi} dBm<br>
Estimated Distance: ${estimatedDistance} meters
`;
} catch (error) {
console.log("Error scanning Bluetooth devices: ", error);
}
});
// Phương pháp tính khoảng cách từ RSSI
function calculateDistanceFromRSSI(rssi) {
const A = -59; // RSSI tại 1m (chuẩn)
const n = 2; // Hệ số suy giảm trong môi trường
// Tính khoảng cách
const distance = Math.pow(10, (A - rssi) / (10 * n));
return distance;
}
</script>
</body>
</html>
Trong ví dụ trên:
- Web Bluetooth API được sử dụng để quét các thiết bị Bluetooth gần và lấy RSSI (Cường độ tín hiệu nhận được).
- Khoảng cách được ước tính từ RSSI bằng công thức suy giảm tín hiệu.
3. Sử dụng Wi-Fi RSSI trong JavaScript
Việc đo khoảng cách qua Wi-Fi yêu cầu truy cập vào cường độ tín hiệu Wi-Fi (RSSI) để tính toán khoảng cách, nhưng JavaScript trong trình duyệt không hỗ trợ truy cập trực tiếp vào cường độ tín hiệu Wi-Fi vì lý do bảo mật.
Tuy nhiên, có thể sử dụng các API của nền tảng như Android (trong ứng dụng điện thoại) để truy xuất thông tin Wi-Fi. Trên web, việc này có thể không khả thi.
4. Cảm biến di động (Device Orientation)
Một cách khác để đo khoảng cách là sử dụng Device Orientation API và các cảm biến như Accelerometer để phát hiện sự thay đổi vị trí của điện thoại. Tuy nhiên, phương pháp này không chính xác khi bạn không di chuyển thiết bị và chỉ muốn đo khoảng cách đến một điểm.
5. Cảm biến và Camera (Stereo Vision, AR)
Nếu bạn có một camera và muốn đo khoảng cách từ điện thoại đến một vật thể, bạn có thể sử dụng các giải pháp như stereo vision hoặc SLAM. Đây là các thuật toán phức tạp và thường yêu cầu xử lý dữ liệu từ các cảm biến khác nhau như IMU và camera.
Tổng kết
- AR/Computer Vision (WebXR): Cách tiếp cận hiệu quả khi đo khoảng cách từ điện thoại đến một điểm cụ thể.
- Bluetooth: Có thể dùng Web Bluetooth API để đo khoảng cách đến các thiết bị Bluetooth.
- Wi-Fi: Đo từ RSSI nếu có quyền truy cập.
- Sensor (Accelerometer, Gyroscope): Đo sự thay đổi vị trí, nhưng không phải đo trực tiếp khoảng cách đến điểm vật lý.
Các phương pháp này có thể được tích hợp vào ứng dụng web của bạn tùy theo yêu cầu và khả năng của thiết bị.
