局域网IP实现HTTPS访问 + H5网页调用手机摄像头

最新推荐文章于 2026-08-21 16:12:06 发布

原创最新推荐文章于 2026-08-21 16:12:06 发布 · 1.3k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

一、编写HTML5手机摄像头调用代码

我们可以通过 navigator.mediaDevices.getUserMedia() 函数在HTML网页中调用摄像头，但受限于浏览器安全机制，需要在 localhost 或 HTTPS 环境下访问

<!DOCTYPE html>
<html>
<head>
  <title>H5 CAMERA</title>
</head>

<body>
  <video id="video" width="480" height="640" autoplay style="display: none;"></video>
  <canvas id="canvas" width="480" height="640"></canvas>

  <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
  <script>
  // 获取标签元素
  var video = document.getElementById('video')
  var canvas = document.getElementById('canvas')
  var ctx = canvas.getContext('2d')

  // 启动摄像头
  navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
  .then(function(stream) {
    video.srcObject = stream
  })
  .catch(function(err) {
    alert('ERROR:' + err)
  })

  // 水平翻转画布
  // ctx.translate(canvas.width, 0)
  // ctx.scale(-1, 1)

  video.addEventListener('play', function() {
    setInterval(function() {
      // 绘制视频帧到画布
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

      // 将画布内容转换为base64，JPEG压缩比55%
      var imageB64 = canvas.toDataURL('image/jpeg', 0.55).replace('data:image/jpeg;base64,', '')

    }, 33) // 每帧33ms，fps=30
  })

  </script>
</body>
</html>

二、局域网IP实现HTTPS访问

1. 下载工具包

mkcert-v1.4.4.exe等2个文件https://pan.quark.cn/s/b8b72f03dfb2

2. 通过mkcert工具安装CA根证书

执行下面的命令安装CA根证书

.\mkcert-v1.4.4.exe -install

在弹出的证书安装安全警告中选择是

看到如下提示内容即说明安装成功

3. 创建HTTPS自签名证书

执行下面的命令创建自签名证书

# 换成你自己的局域网IP地址
.\mkcert-v1.4.4.exe 192.168.5.170

看到如下提示即说明创建成功

在文件夹中可以看到2个新生成的证书文件

4. 配置nginx服务器

解压nginx压缩包，拷贝上一步生成的2个证书文件，替换到 nginx-1.18.0\conf 目录下

修改 nginx.conf 配置文件，把SSL证书文件名替换为自己的证书后保存文件

5. 启动nginx服务器

在CMD中启动nginx服务器，如果443端口被占用，可通过 netstat 结合 tasklist 命令查询占用进程并处理

启动成功后，在手机浏览器输入地址 https://192.168.5.170/camera.html 测试（替换为你自己的IP地址），即可正常调用手机摄像头预览画面

总结

作者因为很害怕，所以这里并没有对文章进行总结，但贴了一张二崩子的壁纸XD

标签

#https #html5 #nginx