苹果手机通过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');
}