手机网页端获取手机设备信息-陀螺仪_手机浏览器能够获取陀螺仪信息

 window.addEventListener('deviceorientation',

背景：需要在网页端获取手机的陀螺仪信息，用于控制相机视角的移动

1.获取设备信息

 window.addEventListener('deviceorientation',

 使用这个语句就可以很简单的获取

参考链接：

JavaScript 陀螺仪检测设备方向(重力感应) - 掘金 (juejin.cn)

 Window：deviceorientation 事件 - Web API 接口参考 | MDN (mozilla.org)

 2，打印信息，看一下是否获取成功

1.控制台打印

移动端没有控制台该如何调试? - 掘金 (juejin.cn)

手机浏览器不能F12看到控制台，使用vConsle

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
<script>
    // init vConsole
    var vConsole = new VConsole();
    console.log('Hello world');
</script>

2.使用html元素打印

tuoluo.innerText =  "陀螺仪位姿"+`Alpha: ${tuoluoalpha}, Beta: ${tuoluobeta}, Gamma: ${tuoluogamma}`  ;

3，获取手机的权限

ios手机不可以直接获取，需要获取权限（手机权限+https）

安卓手机只需要https就可以

参考链接

Web简易版裸眼3D——deviceorientation - 掘金 (juejin.cn)

1.手机权限

<script>
    var btn = document.querySelector('.btn');
 
    // 为按钮添加点击事件监听器
    btn.addEventListener('click', function() {
        console.log("点击按钮，获取权限");
        if (typeof DeviceOrientationEvent.requestPermission === 'function') {
            DeviceOrientationEvent.requestPermission()
                .then(permissionState => {
                    if (permissionState === 'granted') {
// handle data
                        console.log("权限获取成功");
                        window.addEventListener("deviceorientation", function(event) {
                            console.log(event.beta, event.gamma);
                        });
                    } else {
// handle denied
                        console.log("权限未获取");
                    }
                })
                .catch((err) => {
                    console.log(err)
                });
        }
    });
 
</script>

绑定一个按钮

点击允许，获取成功

3.1.2

这里存在一个问题，第一次如果点击拒绝，浏览器会记住选项，以后再点击按钮也不会弹出请求权限弹窗了，除非清除缓存。

iOS 13+ Safari 启用陀螺仪授权 - 知乎 (zhihu.com)

2.https

vue项目本地开启https访问模式-CSDN博客

我是使用vue的cli一键本地部署的，所以在vue.config文件里面添加代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
 
    // 此处开启 https
    https: true
  }
 
  // public: 'https://localhost:446'
})

 记得需要在devServer里面填写，修改配置文件之后重启服务

npm run serve

前面变成https，就成功了