AWS EC2部署Django应用调用getUserMedia报undefined错误如何解决

问题原因 #

你遇到的报错本质是navigator.mediaDevices对象为undefined，浏览器的getUserMedia API属于敏感能力，仅允许在安全上下文（HTTPS协议、localhost本地环境）中调用，你当前用HTTP协议访问部署在EC2上的服务，浏览器直接禁用了这个API。

解决方案 #

1. 生产环境解决方案：配置HTTPS访问 #

• 申请SSL证书：可以用Let's Encrypt免费证书，或者云服务商提供的免费DV证书
• 部署证书：在EC2上用Nginx或Apache做反向代理，配置SSL证书，将HTTP请求重定向到HTTPS
• Django适配：在settings.py中添加SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')，确保Django能识别HTTPS请求

2. 临时测试解决方案：浏览器豁免HTTP限制 #

仅用于本地测试，不要在生产环境使用：

• 打开Chrome/Edge浏览器，地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure
• 将你的EC2公网HTTP地址（比如http://1.2.3.4:8000）添加到豁免列表，重启浏览器后即可正常调用接口

3. 代码兼容优化 #

添加前置判断，避免直接调用抛出未捕获错误：

// 先判断API是否可用
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
  alert("当前访问环境不支持录音功能，请使用HTTPS访问或更换现代浏览器");
  return;
}
// 原有录音逻辑放在判断之后

额外注意点 #

你当前的代码配置是捕获麦克风输入音频，如果需要捕获扬声器输出的系统音频，需要将getUserMedia替换为getDisplayMedia，同时配置{ audio: true, video: false }参数，调用时用户需要在弹窗中勾选「分享系统音频」选项。

内容的提问来源于stack exchange，提问作者Masaki93