如何让getUserMedia（）在所有浏览器上工作

解决方案

为了使 getUserMedia() 在所有浏览器上正常工作，我们需要考虑几个方面：

1. 浏览器兼容性: 首先，getUserMedia() 是 WebRTC API 的一部分，旨在允许网页应用直接访问用户的相机和麦克风。尽管现代浏览器普遍支持这一功能，但老版本的浏览器可能不支持或实现方式有差异。

2. 使用 Polyfill: 对于不支持 getUserMedia() 的浏览器，可以使用 Polyfill 如 adapter.js 来实现功能的兼容。这个库能够抹平不同浏览器之间的实现差异，提供一致的 API。

3. 特性检测: 在代码中实现特性检测，以确保不会在不支持 getUserMedia() 的浏览器上运行无法执行的代码。可以使用如下方式进行检测：

   javascript
   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
       // 安全调用 getUserMedia
   } else {
       // 提示用户浏览器不支持或使用Polyfill
   }

4. 权限处理: 需要妥善处理用户权限请求。getUserMedia() 需要用户显式允许网页访问摄像头和麦克风。应当在用户界面中清晰地提示权限请求的原因，并处理用户拒绝权限请求的情况。

5. 错误处理: 对 getUserMedia() 的调用可能因多种原因失败（例如用户拒绝权限、硬件问题等），因此需要实现错误处理机制。例如：

   javascript
   navigator.mediaDevices.getUserMedia({ video: true, audio: true })
       .then(stream => {
           // 使用媒体流
       })
       .catch(error => {
           console.error('获取媒体流失败:', error);
           // 根据错误类型给用户合适的反馈
       });

6. 测试: 在不同的浏览器和设备上进行测试，确保 getUserMedia() 在各种环境下都能稳定工作。这包括桌面浏览器和移动设备的浏览器等。

7. 更新和维护: 随着浏览器和Web标准的更新，定期检查和更新使用 getUserMedia() 相关代码，确保与新技术标准的兼容性。

示例

假设我们要在网页上捕获视频，以下是一个简单的实现示例：

javascript
// 检查浏览器是否支持 getUserMedia
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // 请求视频和音频
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(function(stream) {
            var video = document.querySelector('video');
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in video) {
                video.srcObject = stream;
            } else {
                // 避免使用createObjectURL
                video.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function(err) {
            console.log("捕获失败: " + err.name);
        });
} else {
    console.log('您的浏览器不支持 getUserMedia');
}

这段代码首先检查浏览器是否支持getUserMedia()，如果支持，则尝试获取用户的视频和音频流，并显示在一个<video>元素中。如果失败，则在控制台输出错误信息。