Laravel WebCam在本地IP服务器无法运行问题求助

我开发了一个点击按钮即可打开摄像头的功能：

• 使用php artisan serve命令运行时一切正常
• 但通过本地IP地址（例如执行php artisan serve --host=192.168.10.10）运行该应用时，按钮失效并抛出错误：

  Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')

我怀疑浏览器标记的「不安全（not secure）」状态是问题根源。尝试执行php artisan serve --host=192.168.10.10 --port=443时，又出现权限错误：

An attempt was made to access a socket in a way forbidden by its access permissions

相关代码示例如下：

<button type="button" class="btn btn-primary" onclick="openCamera()">Open camera</button>

<div id="cameraContainer">
    <video id="cameraVideo" style="display: none;"></video>
    <div id="overlayFrame"></div>
    <canvas id="photoCanvas" style="display: none;"></canvas>
</div>

<script>
        var videoStream;

        function openCamera() {
            // Access the camera
            navigator.mediaDevices.getUserMedia({
                    video: true
                })
                .then(function(stream) {
                    videoStream = stream;
                    var video = document.getElementById('cameraVideo');
                    video.srcObject = stream;
                    video.play();
                    video.style.display = 'block';
                    document.getElementById('overlayFrame').style.display = 'block';
                })
                .catch(function(error) {
                    console.error('Error accessing camera: ', error);
                });
        }
    </script>

1. 问题根源 #

你的猜测完全正确，浏览器的「不安全」状态是核心问题。现代浏览器要求调用getUserMedia这类敏感API必须在安全上下文下运行，安全上下文包括：

• localhost（这就是php artisan serve默认运行正常的原因）
• HTTPS协议的域名/IP
• 少数浏览器会把本地IP列入例外，但大部分场景仍需HTTPS

2. 解决端口443权限问题 #

执行--port=443报错是因为443是系统保留的特权端口，普通用户进程没有绑定权限，解决方法：

• 使用非特权端口（比如8443）搭配自签名证书启动HTTPS服务
• 给PHP进程赋予绑定特权端口的权限（不推荐，存在安全风险）

3. 具体实现步骤 #

方法一：自签名证书+非特权端口启动HTTPS服务

1. 用OpenSSL生成自签名证书：

openssl req -x509 -newkey rsa:4096 -keyout server.key -out server.crt -days 365 -nodes

2. 将生成的server.key和server.crt放到项目根目录，执行启动命令：

php artisan serve --host=192.168.10.10 --port=8443 --ssl-cert=server.crt --ssl-key=server.key

3. 访问https://192.168.10.10:8443，浏览器提示证书不安全时选择「继续访问」，即可正常调用摄像头API。

方法二：修改hosts映射localhost到本地IP

1. 打开系统hosts文件：
   • Windows：C:\Windows\System32\drivers\etc\hosts
   • Linux/macOS：/etc/hosts
2. 添加一行映射：

192.168.10.10 local.dev

3. 执行php artisan serve --host=local.dev启动服务，访问http://local.dev:8000即可，因为local.dev被映射到localhost，属于安全上下文。

4. 代码优化建议 #

给navigator.mediaDevices做兼容性判断，避免出现undefined错误：

function openCamera() {
    // 检查浏览器是否支持媒体设备API
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        alert('当前浏览器不支持摄像头访问功能');
        return;
    }
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(function(stream) {
            videoStream = stream;
            var video = document.getElementById('cameraVideo');
            video.srcObject = stream;
            video.play();
            video.style.display = 'block';
            document.getElementById('overlayFrame').style.display = 'block';
        })
        .catch(function(error) {
            console.error('摄像头访问失败: ', error);
        });
}

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