vue h5页面在手机浏览器打开链接获取设备信息和授权图片拍照功能

要获取设备信息，您可以使用navigator对象。例如，要获取设备的宽度和高度，您可以使用以下代码：

const width = window.innerWidth;
const height = window.innerHeight;

要使用授权图片拍照功能，您可以使用HTML5的getUserMedia API。以下是一个简单的例子：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    // 在页面上显示摄像头视频流
    const videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    document.body.appendChild(videoElement);

    // 创建一个canvas元素来显示拍摄的照片
    const canvasElement = document.createElement('canvas');
    canvasElement.width = width;
    canvasElement.height = height;
    document.body.appendChild(canvasElement);

    // 创建一个拍照按钮
    const buttonElement = document.createElement('button');
    buttonElement.innerText = '拍照';
    document.body.appendChild(buttonElement);

    // 点击拍照按钮时，将视频帧绘制到canvas上
    buttonElement.addEventListener('click', () => {
      const context = canvasElement.getContext('2d');
      context.drawImage(videoElement, 0, 0, width, height);

      // 将canvas转换为base64编码的图像数据
      const imageData = canvasElement.toDataURL();

      // 在页面上显示拍摄的照片
      const imgElement = document.createElement('img');
      imgElement.src = imageData;
      document.body.appendChild(imgElement);
    });
  })
  .catch(error => {
    console.error(error);
  });

请注意，getUserMedia API需要HTTPS才能在大多数浏览器中使用。如果您的网站不是HTTPS，请使用localhost或127.0.0.1来测试该功能。