window DeviceMotion event using React

Question

当我移动浏览器时，我无法触发React应用程序中的DeviceMotion函数。我使用window对象devicemotion事件来实现功能。

摘录自我的代码

export default function App() {
const [x, setX] = useState("");
const [y, setY] = useState("");
const [z, setZ] = useState("");
function handleMotionEvent(event) {
console.log("handle motion event", event);
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
setX(x);
setY(y);
setZ(z);
}
useEffect(() => {
window.addEventListener("devicemotion", handleMotionEvent, true);
}, [x, y, z]);
return (
<div className="App">
<h1>Device Motion</h1>
<div>
X - {x} Y - {y} Z - {z}
</div>
</div>
);
}

我使用CodeSandbox创建了一个工作示例。有人能帮忙吗？

Answer 1

问题是您没有使用SSL证书，您必须将react应用程序设置为使用SSL证书https://www.makeuseof.com/create-react-app-ssl-https/一旦您使用SSL证书运行，您的移动浏览器将读取加速度计数据，我希望这能有所帮助。