PC端调用mediaDevices 对象，获取摄像头权限，实现H5拍照

在PC端使用H5调用摄像头进行拍照，可以通过navigator.mediaDevices.getUserMedia() API来实现。以下是一个简单的实现例子：

HTML部分：

<button id="takePhoto">拍照</button>
<img id="photo" src="" alt="The screen capture will appear in this img tag" />

JavaScript部分：

document.getElementById('takePhoto').addEventListener('click', function() {
  takePhoto();
});
 
function takePhoto() {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function(stream) {
      const video = document.createElement('video');
      video.srcObject = stream;
      video.autoplay = true;
      video.onloadedmetadata = function(e) {
        video.play();
        document.getElementById('photo').src = '';
        // 在video元素中捕获帧并转换为图片
        document.getElementById('photo').src = video.srcObject.getVideoTracks()[0].getCapabilities().resizeHeight && video.srcObject.getVideoTracks()[0].getCapabilities().resizeWidth ?
          // 如果摄像头支持resize，则调整视频的大小
          MediaStreamTrack.getScreenshot() :
          // 如果不支持，则直接捕获原始视频大小的屏幕
          (video.mozGetUserMedia ? video.mozGetUserMedia('video') : (video.webkitGetUserMedia ? video.webkitGetUserMedia('video') : ''));
      };
    })
    .catch(function(err) {
      console.log(err.name + ": " + err.message);
    });
}

在上述代码中，我们首先为按钮注册了一个点击事件，当按钮被点击时，调用takePhoto函数。在takePhoto函数中，我们使用getUserMedia获取摄像头的视频流，并创建一个video元素来展示摄像头的内容。当视频加载完成后，我们捕获当前视频的一帧作为图片，并将其显示在img元素中。

注意：上述代码在某些旧浏览器中可能不工作，因为不是所有的浏览器都支持navigator.mediaDevices.getUserMedia。此外，在不同浏览器中可能需要前缀，如mozGetUserMedia或webkitGetUserMedia。