H5获取手机媒体设备权限(麦克风和相机)

methods:{

    getUserMedia(constrains) {
      let that = this;
      if (navigator.mediaDevices.getUserMedia) {
        // 最新标准API
        navigator.mediaDevices.getUserMedia(constrains).then(stream => { that.success(stream); }).catch(err => { that.error(err); });
      } else if (navigator.webkitGetUserMedia) {
        // webkit内核浏览器
        navigator.webkitGetUserMedia(constrains).then(stream => { that.success(stream); }).catch(err => { that.error(err); });
      } else if (navigator.mozGetUserMedia) {
        // Firefox浏览器
        navigator.mozGetUserMedia(constrains).then(stream => { that.success(stream); }).catch(err => { that.error(err); });
      } else if (navigator.getUserMedia) {
        // 旧版API
        navigator.getUserMedia(constrains).then(stream => { that.success(stream); }).catch(err => { that.error(err); });
      }
    },
    // 成功的回调函数
    success(stream) {
      console.log("已点击允许,开启成功");
      alert('已点击允许,开启成功')
    },
    // 异常的回调函数
    error(error) {
      console.log("访问用户媒体设备失败:", error.name, error.message);
      alert(`访问用户媒体设备失败,${error.name, error.message}`)
    }

//调用
 created() {
  if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  this.getUserMedia({ video: true, audio: true }); // 调用用户媒体设备,访问摄像头、录音
} else {
  console.log("你的浏览器不支持访问用户媒体设备");
}
},

}

效果图:

 

在HTML5中,通过JavaScript可以获取用户浏览器的一些信息,包括部分设备信息,但请注意这主要是关于用户的浏览器信息而不是直接获取手机硬件信息,因为浏览器API通常不会提供对手机硬件级别的访问权限。以下是一些常用的API: 1. **navigator** 对象:它包含有关浏览器的信息,如浏览器名称(`navigator.userAgent`),平台(`navigator.platform`),是否移动设备(`window.matchMedia("(max-width: 600px)").matches`)等。 ```javascript console.log(navigator.userAgent); // 获取设备的User-Agent字符串 ``` 2. **DeviceOrientationEvent**:对于一些支持该功能的设备(比如智能手机),你可以监听设备方向变化事件,但这并不包含完整的手机硬件信息。 ```javascript if (typeof DeviceOrientationEvent !== "undefined") { window.addEventListener("deviceorientation", function(event) { console.log(event.gamma); }); } ``` 3. **Geolocation API**:虽然主要用于定位,但它可以间接反映用户的地理位置,对于某些设备来说,这也可能关联到设备型号。 ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { console.log(position); }); } ``` 注意,为了保护用户隐私,大部分现代浏览器会对敏感的设备信息(如位置、摄像头等)进行限制,并需要用户明确授权。因此,获取设备的具体硬件信息通常不是推荐的做法,除非在用户明确同意的情况下并且用于合法用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值