javascript - Web 蓝牙:无法将 BLE 设备与具有 Live Server VS Code 扩展的移动设备配对
问题描述
我是 Web 开发领域的初学者。我想通过网页将 BLE 设备 (NRF52840 DK) 与我的移动设备配对。我测试了一个 Web 蓝牙示例,它在我的 PC 上运行良好,如下图所示:
将我的 PC (Chrome) 与 BLE 设备成功配对
我是通过 VS Code 上流行的扩展 Live Server 完成的。当我尝试使用我的 IP 和端口访问我的手机 (Android) 上的该页面并按下按钮时,什么也没发生。
将我的手机 (Chrome) 与 BLE 设备配对失败
有什么我没有考虑到的吗?
这是 HTML 和 JS 代码:
<!DOCTYPE html>
<html>
<head>
<title>BLE WebApp</title>
</head>
<body>
<form>
<button>Connect with BLE device</button>
</form>
<script>
var deviceName = 'Nordic_HRM'
function isWebBluetoothEnabled() {
if (!navigator.bluetooth) {
console.log('Web Bluetooth API is not available in this browser!')
return false
}
return true
}
function getDeviceInfo() {
let chosenHeartRateService = null;
console.log('Requesting Bluetooth Device...')
navigator.bluetooth.requestDevice({ filters: [{ services: ['heart_rate'] }] })
.then(device => device.gatt.connect())
.then(server => {
console.log("Getting HR Service…")
return server.getPrimaryService('heart_rate');
})
.then(service => {
chosenHeartRateService = service;
return Promise.all([
service.getCharacteristic('heart_rate_measurement')
.then(handleHeartRateMeasurementCharacteristic),
]);
})
}
function handleHeartRateMeasurementCharacteristic(characteristic) {
return characteristic.startNotifications()
.then(char => {
characteristic.addEventListener('characteristicvaluechanged',
onHeartRateChanged);
});
}
function onHeartRateChanged(event) {
const characteristic = event.target;
console.log(parseHeartRate(characteristic.value));
}
function parseHeartRate(data) {
const flags = data.getUint8(0);
const rate16Bits = flags & 0x1;
const result = {};
let index = 1;
if (rate16Bits) {
result.heartRate = data.getUint16(index, /*littleEndian=*/true);
index += 2;
} else {
result.heartRate = data.getUint8(index);
index += 1;
}
const contactDetected = flags & 0x2;
const contactSensorPresent = flags & 0x4;
if (contactSensorPresent) {
result.contactDetected = !!contactDetected;
}
const energyPresent = flags & 0x8;
if (energyPresent) {
result.energyExpended = data.getUint16(index, /*littleEndian=*/true);
index += 2;
}
const rrIntervalPresent = flags & 0x10;
if (rrIntervalPresent) {
const rrIntervals = [];
for (; index + 1 < data.byteLength; index += 2) {
rrIntervals.push(data.getUint16(index, /*littleEndian=*/true));
}
result.rrIntervals = rrIntervals;
}
return result;
}
document.querySelector('form').addEventListener('submit', function(event) {
event.stopPropagation()
event.preventDefault()
if (isWebBluetoothEnabled()) {
getDeviceInfo()
}
})
</script>
</body>
</html>
解决方案
我认为你描述的方式是不可能的。Web 蓝牙仅适用于启用了 HTTPS 的页面。它也适用于 localhost 用于测试目的。由于您通过未启用 HTTPS 的 IP 地址访问 Web 应用程序,因此 Web 蓝牙不可用。
https://web.dev/bluetooth/#https-only
您可以通过向页面添加带有布尔值或其他文本的文本来测试这一点,该文本将显示网络蓝牙是否可用。
function isWebBluetoothEnabled() {
if (!navigator.bluetooth) {
console.log('Web Bluetooth API is not available in this browser!')
document.getElementById('bluetoothState').innerText = 'Not available'
return false
}
document.getElementById('bluetoothState').innerText = 'Available'
return true
}
推荐阅读
- c++ - 将索引 i 处的字符串与 C++ 中的值进行比较
- asynchronous - Rust:Tokio + Warp 在后台运行
- pandas - 如何根据队友预测获胜者
- snakemake - Snakemake 集群模式,每个规则的 CPU 计数不同
- viewmodel - Jetpack Compose 在 ViewModel 中观察 mutableStateOf
- emacs - (Emacs) 括号没有正确缩进
- wordpress - woocommerce_shared_settings 弃用的控制台错误
- python - 从 JSON 文件读取的解包列表到函数调用
- java - 如何从 Java 成功与 python Twisted 服务器通信?
- javascript - 在 Google 表格中,如何扫描整个列以查找错误单元格并将内容替换为上面单元格中的内容?