微信iOS客户端navigator.mediaDevices兼容问题
微信ios端 使用扫一扫，没法navigator.mediaDevices进行拍照，调用不了摄像头 ，android就正常使用，请问这个兼容问题怎么解决啊？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="test">
<meta name="description" content="test">
<link rel="shortcut icon" href="favicon.ico">
<style>
#camera{
float: left;
margin: 20px;
}
#contentHolder{
width: 300px;
height: 300px;
margin-bottom: 10px;
}
#btn_snap{
margin: 0 auto;
border: 1px solid #f0f0f0;
background: #5CACEE;
color: #FFF;
width: 100px;
height: 36px;
line-height: 36px;
border-radius: 8px;
text-align: center;
cursor: pointer;
cursor: pointer;
/*禁止选择*/
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
#imgBoxxx{
width: 200px;
margin: 60px 20px 20px;
}
</style>
</head>
<body>
<div id="startPhoto">
<button> 点击此处开启摄像头 </button>
</div>
<div id="camera">
<div id="contentHolder">
<video id="video" width="300" height="300" autoplay playsinline="true" webkit-playsinline="true"></video>
<canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
</div>
<div id="btn_snap">确定拍照</div>
</div>
</body>
<script>
var canvas = document.getElementById("canvas"),
pzBtn = document.getElementById("btn_snap"),
startPhoto = document.getElementById("startPhoto"),
context = canvas.getContext("2d"),
video = document.getElementById("video");
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
// 使用getUserMedia，因为它会覆盖现有的属性。
// 这里，如果缺少getUserMedia属性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先获取现存的getUserMedia(如果存在)
var getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia ||
navigator.oGetUserMedia;
// 有些浏览器不支持，会返回错误信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
//否则，使用Promise将调用包装到旧的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
var constraints = { audio: false, video: {width: 720,height:720} }
var flag = false
startPhoto.addEventListener('click', function() {
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
flag = true
var video = document.querySelector('video');
// 旧的浏览器可能没有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
//避免在新的浏览器中使用它，因为它正在被弃用。
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
})
pzBtn.addEventListener("click", function () {
if(!flag) return
// 点击，canvas画图
context.drawImage(video, 0, 0, 300, 300);
// 获取图片base64链接
var image = canvas.toDataURL('image/png');
// 定义一个img
var img = new Image();
//设置属性和src
img.id = "imgBoxxx";
img.src = image;
//将图片添加到页面中
document.body.appendChild(img);
// base64转文件
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type: mime});
}
console.log(dataURLtoFile(image, 'aa.png'));
});
</script>
<script src="//manhattan-asset-s3.didistatic.com/manhattan-fe-static-v3/static/vconsole.min.js" crossorigin="anonymous"></script><script>new VConsole()</script>
</html>
