很多老师现在喜欢使用互动式HTML 课件。这样的课件有几个明显优点：
- 一个文件就能运行；
- 不需要安装复杂软件；
- 可以投屏演示；
- 学生也可以在电脑、平板、手机上操作；
- 能把抽象的信息科技知识变成可看、可点、可体验的学习活动。
但只要课件中包含摄像头功能，比如：
- 人脸采集演示；
- 图像识别体验；
- 二维码扫描；
- 拍照上传；
- 机器视觉实验；
就经常会遇到一个问题：
页面明明打开了，按钮也能点，但摄像头打不开。
有些老师会看到类似提示：
如果使用摄像头，需要在HTTPS 或 localhost 环境下，部分浏览器直接打开本地文件可能无法调用摄像头。
这句话很重要，但对不少老师来说并不够“落地”。
到底什么是HTTPS？什么是 localhost？为什么双击 HTML 文件不行？学生访问老师电脑 IP 为什么也不行？课堂上最稳妥的做法是什么？
这篇文章就专门把这个问题讲清楚。
一、先给结论：摄像头课件不能简单“双击打开”
如果您的HTML 课件里使用了摄像头，最稳妥的打开方式不是双击文件，而是下面两类环境：
第一类：本机演示环境
适合老师自己投屏演示。
地址一般是：http://localhost:8000
或：http://127.0.0.1:8000
这种方式叫：本地服务器方式。
虽然它是http://，但浏览器会把 localhost 和 127.0.0.1 当作可信的本机环境，因此通常允许调用摄像头。
第二类：HTTPS 网站环境
适合学生用手机、平板、电脑访问。
地址一般是：（需要部署在网络平台或本地服务器）
https://xxx.netlify.app/
https://用户名.github.io/项目名/
https://学校网站/course/smart-lock/
这种方式叫：HTTPS 静态网页部署。
因为地址以https:// 开头，浏览器认为它是安全环境，可以弹出摄像头授权窗口。
不推荐的方式
下面这些方式，即使页面能打开，摄像头也很可能不能用：
file:///C:/Users/Teacher/Desktop/index.html
http://192.168.1.20:8000
http://学校内网服务器/course/index.html
http://普通网站.com/index.html
原因很简单：
它们通常不是浏览器认可的安全环境。
二、为什么浏览器这么“严格”？
HTML 调用摄像头时，本质上使用的是浏览器提供的摄像头接口：
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
这个接口可以访问用户摄像头，属于敏感权限。
如果网页可以随便调用摄像头，那会带来严重隐私风险。
所以现代浏览器规定：
摄像头、麦克风、定位等敏感能力，一般只能在安全环境中使用。
这里的“安全环境”主要包括：
1. https:// 开头的网站；
2. http://localhost；
3. http://127.0.0.1。
也就是说，浏览器不是看这个课件是不是“本地文件”，而是看当前页面所处的访问环境是否可信。
三、几个地址的准确含义
很多课堂部署问题，其实都来自对地址的误解。
1. file:///... 是直接打开文件
如果老师双击HTML 文件，浏览器地址栏可能显示：
file:///C:/Users/Teacher/Desktop/智能门锁.html
这表示：浏览器直接读取电脑里的文件。
这种方式打开普通网页一般没问题。
比如按钮、动画、测验、滑块、Canvas 绘图都可能正常。
但摄像头功能就不一定稳定。
有的浏览器直接禁止，有的浏览器行为不一致。
因此，只要涉及摄像头，不要把双击文件作为正式课堂方案。
2. localhost 是“本机”
如果地址是：http://localhost:8000
它表示：当前这台电脑自己。
老师电脑上的localhost，就是老师电脑自己。
学生电脑上的localhost，就是学生电脑自己。
手机上的localhost，就是手机自己。
这是一个极其重要的概念。
很多老师会误以为：我在老师电脑上开了localhost，学生也打开这个地址就能访问。
这是不对的。
学生在自己电脑上输入：http://localhost:8000
浏览器找的是学生自己的电脑，不是老师的电脑。
3. 127.0.0.1 也是“本机”
地址：http://127.0.0.1:8000
和：http://localhost:8000
基本可以理解为同一类地址。
它们都指向当前设备自己。
4. 192.168.x.x 是局域网地址
例如老师电脑的IP 是：192.168.1.20
学生访问：http://192.168.1.20:8000
这表示：学生通过局域网访问老师电脑上的网页服务。
这种方式页面往往可以打开。但是摄像头大概率不能用。
为什么？
因为它是：http://192.168.1.20:8000
不是HTTPS，也不是学生自己的 localhost。
浏览器通常不会把它当作安全环境。
所以，老师电脑开一个HTTP 服务，学生通过 IP 访问，这种方式适合分发普通网页，但不适合学生端使用摄像头。
四、课堂场景一：老师投屏演示，推荐用localhost
这是最常见、最简单、最稳定的方式。
适合场景
- 老师只需要自己电脑调用摄像头；
- 学生观看投屏；
- 老师演示图像采集、人脸识别原理；
- 学生不需要每人打开摄像头。
五、方式一：使用VS Code + Live Server
这是我最推荐给小白老师的本机演示方案。
操作直观，不容易出错。
第1 步：准备课件文件夹
在电脑上新建一个文件夹，例如：
D:\智能门锁课件
把HTML 文件放进去。
建议把HTML 文件改名为：index.html
文件夹结构如下：
智能门锁课件
└── index.html
为什么建议改名为index.html？
因为网页服务器默认会自动寻找index.html。
这样访问时可以直接输入：
http://localhost:5500/
而不需要输入很长的中文文件名。
第2 步：安装 VS Code
打开官网：https://code.visualstudio.com/
下载安装Visual Studio Code。
第3 步：用 VS Code 打开课件文件夹
打开VS Code 后，点击：文件 → 打开文件夹
选择刚才的文件夹：D:\智能门锁课件
点击：选择文件夹
第4 步：安装 Live Server 插件
在VS Code 左侧点击“扩展”图标。
搜索：Live Server
找到Live Server 插件，通常作者显示为：Ritwick Dey
点击安装。
第5 步：启动课件
在VS Code 左侧文件列表中，右键点击：index.html
选择：Open with Live Server
浏览器会自动打开类似地址：
http://127.0.0.1:5500/
或者：
http://localhost:5500/
只要是这两类地址，就属于本机可信环境。
第6 步：测试摄像头
进入课件中的摄像头演示部分，点击：
打开摄像头
浏览器会弹出提示：是否允许此网站使用摄像头？
请选择：允许
如果能看到摄像头画面，就说明部署成功。
第7 步：正式上课
上课时直接保持浏览器页面打开，投屏即可。
建议课前至少完成三项测试：
- 页面能打开；
- 摄像头能打开；
- 图像能采集。
六、方式二：使用Python 本地服务器
如果不想使用VS Code，也可以用 Python。
这种方式更简洁，但需要会打开命令行。
第1 步：确认电脑是否安装 Python
Windows 电脑
按下：Win + R
输入：cmd回车。
在黑色命令行窗口输入：python --version
如果看到类似：Python 3.12.2
说明已经安装。
如果提示找不到命令，可以再试：
py --version
macOS 电脑
打开“终端”，输入：python3 --version
如果看到版本号，说明已经安装。
第2 步：准备课件文件夹
例如在D 盘准备：
D:\智能门锁课件
里面放：index.html
第3 步：进入课件文件夹
Windows 示例
如果文件夹在D 盘，命令如下：
D:
cd 智能门锁课件
然后启动服务器：
python -m http.server 8000
如果python 不可用，可以试：
py -m http.server 8000
macOS 示例
如果文件夹在桌面：
cd ~/Desktop/智能门锁课件
python3 -m http.server 8000
第4 步：浏览器访问
打开浏览器，输入：http://localhost:8000
或者：http://127.0.0.1:8000
如果文件名是index.html，页面会自动打开。
第5 步：测试摄像头
点击课件里的：打开摄像头
浏览器弹出权限窗口时，选择：允许
第6 步：关闭服务器
上课结束后，回到命令行窗口，按：
Ctrl + C
即可关闭本地服务器。
七、课堂场景二：学生每人一台电脑，要自己调用摄像头
这种情况要特别注意。
如果每位学生都要打开自己的摄像头，有两个稳妥方案。
方案A：每台学生电脑都运行 localhost
也就是说：
- 老师给每台学生电脑分发课件文件夹；
- 每台电脑自己运行 Live Server 或 Python 本地服务器；
- 每台电脑访问自己的：
http://localhost:8000
或：
http://127.0.0.1:8000
这样摄像头通常可以使用。
这种方式的优点
- 不需要把课件上传公网；
- 适合机房离线环境；
- 学生数据都留在自己电脑；
- 摄像头权限相对稳定。
这种方式的缺点
- 每台电脑都要配置一次；
- 小学生操作可能需要老师提前准备；
- 如果机房电脑权限受限，可能不能运行命令行或安装插件。
适合做法
如果在机房上课，建议老师课前请信息中心协助：
1. 把课件文件夹复制到每台学生电脑；
2. 统一安装 VS Code 和 Live Server，或统一配置 Python；
3. 桌面上放一个启动说明；
4. 课前逐台抽测摄像头权限。
八、课堂场景三：学生用手机或平板扫码使用
如果希望学生用手机、平板、家用电脑扫码打开，并且使用摄像头，最推荐方式是：
把HTML 课件部署到 HTTPS 网站。
也就是让学生访问：https://...
而不是：http://192.168.x.x
九、HTTPS 部署方式一：Netlify Drop
这是对小白老师较友好的HTTPS 部署方式之一。
适合场景
- 老师希望快速生成一个 HTTPS 链接；
- 学生可以扫码访问；
- 课件是单文件 HTML；
- 不需要数据库；
- 不需要服务器配置。
第1 步：准备发布文件夹
新建一个文件夹，例如：智能门锁课件发布版
里面放：index.html
结构如下：
智能门锁课件发布版
└── index.html
第2 步：打开 Netlify Drop
浏览器访问：https://app.netlify.com/drop
如果提示登录，可以注册或登录Netlify 账号。
第3 步：拖拽上传
把整个文件夹：智能门锁课件发布版
拖到网页上传区域。
Netlify 会自动部署。
第4 步：获取 HTTPS 地址
部署成功后，会生成一个类似地址：
https://wonderful-smart-lock-12345.netlify.app/
这就是可以分享给学生的HTTPS 课件地址。
第5 步：测试摄像头
打开这个地址，进入课件摄像头部分，点击：打开摄像头
如果浏览器弹出权限提示，选择：允许
如果画面正常显示，就可以生成二维码发给学生。
Netlify 使用提醒
Netlify 部署的是公网地址。
知道链接的人都可能访问页面。
不过，如果课件代码没有上传数据的接口，学生在页面中录入的模拟成员、模拟密码等信息通常只保存在学生自己浏览器的localStorage 中，不会主动上传给 Netlify。
但课堂上仍然要明确提醒：
不要输入真实家庭门锁密码，不要填写真实敏感身份信息。
十、HTTPS 部署方式二：GitHub Pages
GitHub Pages 适合长期保存一个稳定链接。
如果老师愿意注册GitHub，这是很好的静态网页部署方式。
第1 步：注册 GitHub
打开：https://github.com/
注册账号并登录。
第2 步：新建仓库
点击右上角：+
选择：New repository
仓库名称可以写：smart-lock-course
建议选择：Public
然后点击：Create repository
第3 步：上传课件文件
进入仓库后，点击：
Add file → Upload files
上传：index.html
注意：文件最好放在仓库根目录，不要藏在多层文件夹里。
上传后点击：Commit changes
第4 步：开启 GitHub Pages
进入仓库页面，点击：Settings
左侧找到：Pages
在Build and deployment 中选择：
Source: Deploy from a branch
然后选择：
Branch: main
Folder: /root
保存。
第5 步：等待生成地址
等待几十秒到几分钟，GitHub 会生成一个地址，例如：
https://用户名.github.io/smart-lock-course/
这个就是HTTPS 课件地址。
第6 步：测试并生成二维码
打开地址，测试摄像头。
成功后，将地址生成二维码，课堂分发即可。
十一、HTTPS 部署方式三：学校 HTTPS 网站
如果学校有自己的官方网站、教学平台或资源平台，最规范的做法是请网管部署到学校HTTPS 环境。
可以这样和网管沟通，老师可以直接对网管老师说：
这是一个单文件HTML 静态课件，不需要数据库，不需要后端服务。请帮我部署到学校 HTTPS 网站目录下，确保学生能通过 https:// 地址访问。课件中使用浏览器摄像头 API，因此不能只用普通 HTTP。
正确地址示例
https://www.xxxschool.edu.cn/course/smart-lock/
或：
https://course.xxxschool.edu.cn/smart-lock/index.html
不推荐地址示例
http://www.xxxschool.edu.cn/course/smart-lock/
http://192.168.10.5/course/smart-lock/
这两类地址都不是理想摄像头环境。
学校部署时需要注意
请网管确认：
1. 网站证书有效；
2. 地址确实是 https://；
3. 学生设备访问时没有证书警告；
4. 页面没有被嵌入到不支持摄像头权限的旧平台框架中；
5. 如果平台使用 iframe 嵌入，需要允许摄像头权限。
如果课件被嵌入在其他平台页面里，有时还需要平台支持类似权限策略。
对普通老师来说，最稳妥的方式是：
直接用浏览器打开课件的HTTPS 地址，不要嵌在复杂平台里。
十二、为什么不建议“老师电脑开服务，学生访问老师 IP”？
很多老师会自然想到：
我在老师电脑上开一个服务器，然后学生访问我的IP，不就行了吗？
例如老师电脑IP 是：192.168.1.20
学生访问：http://192.168.1.20:8000
这确实可能打开页面。
但是，摄像头功能通常不能用。
因为这个地址是普通HTTP 局域网地址，不是 HTTPS，也不是学生自己的 localhost。
浏览器为了保护学生隐私，会限制摄像头API。
这个方式可以用来做什么？
它可以用于：
- 打开课件；
- 操作按钮；
- 完成测验；
- 体验滑块；
- 查看动画；
- 生成设计报告；
- 体验不需要摄像头的功能。
不适合做什么？
不适合让学生端调用摄像头。
如果这节课必须让学生使用摄像头，应改用：
1. 每台学生电脑运行自己的 localhost；
2. 或者部署到 HTTPS 网站；
3. 或请网管配置可信 HTTPS 局域网服务。
十三、离线机房有没有办法让多台设备都用摄像头？
有，但要分情况。
最简单可靠：每台电脑自己运行localhost
如果机房完全离线，不连接互联网，但每台电脑都有课件文件，那么可以让每台电脑本地运行服务器。
每台电脑访问：
http://localhost:8000
这是离线机房中最简单的摄像头方案。
不建议新手配置：局域网HTTPS
理论上，可以在学校局域网内部搭建HTTPS 服务，例如：
https://smartlock.local/
但这需要：
- 服务器；
- HTTPS 证书；
- 证书被学生设备信任；
- 域名或内网 DNS；
- 浏览器兼容测试；
- 移动设备证书安装与信任配置。
这对普通课堂老师来说不推荐自行操作。
如果学校信息中心有能力，可以由网管统一配置。
不建议使用浏览器实验开关
网上有些方法会让老师修改浏览器实验设置，允许不安全来源访问摄像头。
例如修改Chrome flags 或启动参数。
这类方法不适合课堂推广，原因是：
- 操作复杂；
- 风险较高；
- 学生设备不可控；
- 以后浏览器升级可能失效；
- 不符合安全教学理念。
信息科技课堂本身就应强调安全规范，所以不建议用“绕过浏览器安全限制”的方式。
十四、手机和平板访问时的特别提醒
如果学生用手机或平板访问课件，请尽量使用HTTPS 地址。
推荐地址形式：
https://xxx.netlify.app/
https://用户名.github.io/项目名/
https://学校HTTPS网站/课程目录/
不推荐：
http://192.168.1.20:8000
也不推荐把HTML 文件直接发到微信或 QQ 后让学生在内置浏览器里打开。
iPhone / iPad
建议使用：
- Safari；
- 最新版 Chrome；
- 最新版 Edge。
但要注意，iOS 上的 Chrome、Edge 底层仍然受 Safari/WebKit 机制影响。
因此HTTPS 环境更重要。
如果学生误点了“不允许”，可以检查：
设置→ Safari → 摄像头
或者：
设置→ Chrome → 摄像头
安卓手机和平板
建议使用：
- Chrome；
- Edge；
- 系统浏览器最新版。
如果摄像头不能打开，检查：
设置→ 应用 → Chrome/Edge → 权限 → 相机
确认相机权限为允许。
微信内置浏览器
不建议依赖微信内置浏览器。
如果老师通过微信群发链接，建议提醒学生：
请点击右上角菜单，选择“在浏览器中打开”。
十五、如何生成二维码给学生扫码？
如果已经获得HTTPS 地址，例如：
https://smart-lock-course.netlify.app/
可以搜索：网址生成二维码
把链接粘贴进去，生成二维码。
课堂建议：
1. PPT 上放二维码；
2. 同时放文字链接；
3. 老师准备一个备用短链接；
4. 课前用手机扫码测试一次；
5. 课前用学生网络环境测试一次。
十六、如何判断当前环境是否正确？
看浏览器地址栏。
摄像头通常可用的地址
https://xxx.com/
https://xxx.netlify.app/
https://用户名.github.io/项目名/
http://localhost:8000/
http://127.0.0.1:8000/
摄像头通常不可用或不稳定的地址
file:///C:/Users/Teacher/Desktop/index.html
http://192.168.1.20:8000/
http://10.0.0.5/course/index.html
http://普通网站.com/course/index.html
十七、摄像头权限弹窗怎么处理？
第一次点击“打开摄像头”时，浏览器通常会弹出：
是否允许此网站使用摄像头？
一定要选择：允许
如果误点了“阻止”，就需要重新设置权限。
Chrome / Edge 重新允许摄像头
在地址栏左侧点击：
- 小锁图标；
- 或权限图标；
- 或“网站设置”。
找到：摄像头
改为：允许
然后刷新页面。
Safari 重新允许摄像头
在Safari 中可以查看：
Safari → 设置 → 网站 → 摄像头
找到对应网站，设置为：允许
或：询问
十八、常见错误与精准排查
摄像头打不开时，不要只说“网页坏了”。
应根据错误类型排查。
1. NotAllowedError
含义：摄像头权限被拒绝。
常见原因：
- 用户点击了“阻止”；
- 浏览器默认禁止；
- 系统设置禁止浏览器访问摄像头；
- 当前页面不是安全环境。
解决方法：
1. 确认地址是 https://、localhost 或 127.0.0.1；
2. 在浏览器地址栏权限设置中允许摄像头；
3. 检查系统摄像头权限；
4. 刷新页面后重试。
2. NotFoundError
含义：没有找到可用摄像头。
常见原因：
- 电脑没有摄像头；
- 外接摄像头未连接；
- 摄像头驱动异常；
- 摄像头被禁用。
解决方法：
1. 打开系统自带“相机”应用测试；
2. 检查外接摄像头连接；
3. 重启浏览器；
4. 重启电脑；
5. 检查设备管理器或系统权限。
3. NotReadableError
含义：摄像头存在，但当前无法读取。
常见原因：
摄像头被其他程序占用了，例如：
- 腾讯会议；
- 钉钉；
- Zoom；
- 微信视频；
- 系统相机；
- 录屏软件。
解决方法：
1. 关闭占用摄像头的软件；
2. 刷新网页；
3. 重新点击打开摄像头；
4. 必要时重启浏览器。
4. NotSecureError
含义：当前页面不是安全环境。
常见原因：
- 使用了 file:///；
- 使用了普通 HTTP；
- 使用了局域网 IP 的 HTTP 地址。
解决方法：
改用：https://...
或：http://localhost...
或：http://127.0.0.1...
5. 页面提示“浏览器不支持摄像头”
常见原因：
- 浏览器太旧；
- 使用了兼容模式；
- 使用了不支持摄像头 API 的内置浏览器；
- 当前环境禁用了 navigator.mediaDevices。
解决方法：
换用最新版：
- Chrome；
- Edge；
- Safari；
- Firefox。
不建议使用：
- IE；
- 旧版国产浏览器兼容模式；
- 微信内置浏览器；
- QQ 内置浏览器。
十九、系统层面的摄像头权限检查
即使网页权限允许，系统层面也可能禁止浏览器使用摄像头。
Windows 10 / Windows 11
打开：设置→ 隐私和安全性 → 摄像头
确认：摄像头访问是开启的。
同时确认：允许应用访问摄像头
和：允许桌面应用访问摄像头是开启的。
macOS
打开：系统设置→ 隐私与安全性 → 摄像头
确认正在使用的浏览器已经被允许，例如：
- Chrome；
- Edge；
- Safari；
- Firefox。
如果刚刚修改权限，需要重启浏览器。
iPad / iPhone
检查：设置→ Safari → 摄像头
或：设置→ Chrome → 摄像头
建议设置为：询问
或：允许
安卓设备
路径因品牌略有不同，一般在：
设置→ 应用 → Chrome/Edge → 权限 → 相机
设置为：允许
二十、关于学生的摄像头画面会不会被上传的说明
很多老师会担心：
课件部署到Netlify、GitHub Pages 或学校网站后，学生的摄像头画面会不会被上传？
这要看课件代码有没有上传逻辑。
以常见的单文件HTML 摄像头演示课件为例，它的处理过程通常是：
1. 浏览器从本机摄像头获取画面；
2. 页面把画面显示在 <video> 标签中；
3. 点击采集时，把画面画到 <canvas>；
4. 在浏览器本地提取简单图像特征；
5. 不主动上传到服务器。
如果代码中没有：
- fetch() 上传；
- XMLHttpRequest 上传；
- 表单提交；
- WebSocket 传输；
- 第三方统计或图像接口；
那么摄像头图像通常只是停留在学生自己的浏览器里。
但课堂上仍然要强调：
不输入真实密码，不录入真实敏感身份信息，不把真实人脸、指纹等生物特征当作可公开数据。
信息科技课堂不仅要教会学生使用技术，更要教会学生理解技术边界与隐私责任。
对信息科技老师来说，部署一个摄像头 HTML 课件，不只是技术操作问题，更是信息安全教育的一部分。
我们要让学生明白：
所以，这类课件最稳妥的课堂部署原则就是：
教师本机演示用 localhost，全班扫码体验用 HTTPS，直接双击 HTML 不作为摄像头正式方案。
记住这句话，绝大多数课堂摄像头部署问题都可以避免。
10个月宝宝每天需要喝多少奶粉？
