http域获取摄像头及nginx配置本地HTTPS

发布时间:2025-12-10 11:24:03 浏览次数:2

应用场景:

局域网考试系统——考试过程中需要采集考生头像;

问题所在:

既然是局域网,那就是在一个教室内,没有外网,一台主机上装有考试系统的软件,所有的其他机器访问这台机器,那就是http访问,而不是https 也不是localhost,这就是问题的所在,因为考试需要用到摄像头,而获取摄像头我用的是HTML5中的<video>标签 + MediaDevices.getUserMedia()(https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia  相关的API地址),之前的文档也提过如何获取摄像头,这里不详细提供代码了,但是如果页面的脚本从一个非安全源加载(如 HTTP)责在调用MediaDevices.getUserMedia()这个API接口的时候就会报 null 找不到资源的错误,因为这个MediaDevices.getUserMedia()接口目前只允许https,localhost,File这3种域访问,(谷歌浏览器可以通过具体的安全设置解除限制,但是其他浏览器我还不清楚),说道这问题就很清楚了,局域网是http域,所以考试的时候其他机器在获取摄像头的时候就会出现问题,无法采集头像

解决的思路:

既然http访问不可以,那就将本地的http访问通过nginx配置成https 访问,这样就可以解决采集头像的问题了

首先:下载安装nginx,http://nginx.org/en/download.html

我选的是1.18.0版本 ,下载后直接解压就可以应用,不需要安装

点击nginx.exe 启动 或者通过cmd 命令 start nginx 启动 然后打开浏览器 输入localhost:80 (nginx默认端口)

出现如下页面,说明你下载并且启动成功

现在是localhost 访问,而我们需要用的是https 访问,接下来就是要通过配置nginx达到本地HTTPS 访问的目的,想要进行https 访问,首先需要遵循https 安全协议,需要下载SSL 证书,需要下载相关的软件生成SSL 证书,网上有几种方式,我用的是openssl 生成SSL 证书,下载openssl (地址:http://slproweb.com/products/Win32OpenSSL.html),下载完安装,记住安装完之后需要配置一下环境变量(复制你安装的位置至bin层),否者之后运行CMD 命令有可能会出错,接下来就是要生成证书的环节了,运行cmd,进入到你nginx 根目录 输入命令 openssl genrsa -des3 -out jason.key    然后回车 出现如下

然后设置密码,回车,然后会让你再输入一次 ,接着输入命令 openssl req -new -key jason.key -out jason.csr ,回车,需要输入刚才你设置的密码,接下来会让你填注册信息,就按照提示输入,回车

都填完之后再次输入命令 openssl rsa -in jason.key -out jason-np.key   输入之前你设置的密码 最后输入命令

openssl x509 -req -days 366 -in jason.csr -signkey jason-np.key -out jason.crt 如下图 说明你已经生成证书了,

此时,你可以去nginx 根目录下查看 会有4个文件

然后用文本打开上图的conf中的nginx.conf 文件进行https 配置,

其中 root  对应的我在这里演示没有配置,实际应用中我们应该配上本地项目的路径,server_name 就相当于我们访问的域名,最好是写主机ip地址,要是写其他的,可能还得需要配置dns解析,否者局域内其他人还是访问不到

最后,启动通过 start nginx 命令启动  这时候打开网页 输入:https://192.168.80.194 正常的话 会出现

 

这时候看到已经是https了 只不过这里可能是因为生成的证书不被认可 所以还是现实不安全连接,但是这样已经可以达到开始提到的局域访问项目并且使用摄像头的目的了,至于不安全连接有时间再研究

注:启动nginx 的时候有可能因为端口占用而导致没有启动,访问的时候网页打不开,这时候你看一下你的任务管理中是否有nginx 没有的话  你可以 cmd 输入命令  netstat -aon|findstr "443"  回车  检查下端口被哪个服务占用,停掉服务,再次启动nginx

需要做网站?需要网络推广?欢迎咨询客户经理 13272073477