您好我这边遇到了同样的问题，请问解决了么？
微信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>
2024-01-03您好我这边遇到了同样的问题，请问解决了么？
iOS微信浏览器无法使用navigator.mediaDevices吗？navigator.mediaDevices 在iOS的内置浏览器中无法使用，这个有什么解决方法吗？
2024-01-03直接在video标签中加 playsinline和webkit-playsinline="true" 这两个就行
小程序调H5，navigator.mediaDevices.getUserMedia在IOS不能用?微信小程序web-view调用H5页面，H5页面navigator.mediaDevices.getUserMedia调用摄像头在ios手机微信上不能用，有没有已经搞定的，或者其他解决方法的
2023-01-12
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞