解决苹果手机通过getUserMedia唤起摄像头出现黑屏问题

苹果手机通过getUserMedia唤起摄像头出现黑屏问题，解题思路如下：

思路

1. 检查浏览器支持

首先，确保你正在使用的浏览器支持getUserMedia API。虽然大多数现代浏览器（包括Safari）都支持这一API，但最好还是在Can I use上检查最新的兼容性信息。

2. 确保用户已授权

在iOS设备上，用户必须明确授权网站或应用访问摄像头。如果用户在首次请求时没有授权，或者之后更改了权限设置，那么摄像头将无法正常工作。确保在调用getUserMedia之前，用户已经授权了摄像头访问权限。

3. 检查HTTPS

getUserMedia API 要求在安全的上下文中使用，即你的网页必须通过HTTPS协议提供。如果你的网站还在使用HTTP，那么你需要将其升级到HTTPS。

4. 检查代码实现

修改前：

 <video  id="video" width="100%" height="400" autoplay></video>

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {  
    // 约束条件  
    const constraints = {  
        video: true,  
        audio: false  
    };  
  
    // 尝试获取媒体流  
    navigator.mediaDevices.getUserMedia(constraints)  
        .then(function(stream) {  
            // 成功获取媒体流，可以在这里将流附加到video元素  
            let videoElement= document.getElementById("video") ;
            videoElement.srcObject = stream;  
            videoElement.play();  
        })  
        .catch(function(error) {  
            console.error('访问媒体设备失败：', error);  
            // 处理错误，比如显示错误信息给用户  
        });  
} else {  
    // getUserMedia API 不支持  
    console.error('浏览器不支持 getUserMedia API');  
}

修改后

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {  
    // 约束条件  
    const constraints = {  
        video: true,  
        audio: false  
    };  
  
    // 尝试获取媒体流  
    navigator.mediaDevices.getUserMedia(constraints)  
        .then(function(stream) {  
                let videoElement= document.getElementById("video") ;
                    videoElement.setAttribute('autoplay', '');
                    videoElement.setAttribute('muted', ''); /*静音播放属性，微信环境中可删除*/
                    videoElement.setAttribute('playsinline', 'true');/*IOS微信浏览器支持小窗内播放*/
                    videoElement.setAttribute('preload', 'auto'); /*是否自动播放*/
                    videoElement.setAttribute('webkit-playsinline', 'true'); /*这个属性是ios 10中设置可以让视频在小窗内播放，即不全屏播放*/ 
                    videoElement.srcObject = stream;
                    videoElement.play();
        })  
        .catch(function(error) {  
            console.error('访问媒体设备失败：', error);  
            // 处理错误，比如显示错误信息给用户  
        });  
} else {  
    // getUserMedia API 不支持  
    console.error('浏览器不支持 getUserMedia API');  
}