支持ios的MediaDevices.getUserMedia()
我正在尝试获取ReactJS项目中的浏览器设置详细信息(摄像头、麦克风权限)。在此基础上，如果它被阻止，我将在UI中显示一些错误消息。我使用以下代码。
useEffect(()=>{
collectUserLogData();
},[]);
const collectUserLogData = () => {
navigator.getMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia(
{ video: true },
() => {
setCamera(true);
console.log("Permission_", "camera ON");
},
() => {
console.log("Permission_", "Camera OFF");
}
);
navigator.getMedia(
{ audio: true },
() => {
setMic(true);
console.log("Permission_", "Mic ON");
},
() => {
console.log("Permission_", "Mic OFF");
}
);
navigator.geolocation.getCurrentPosition(
() => {
setLocation(true);
console.log("Permission_", "Geo ON");
},
() => {
console.log("Permission_", "Geo OFF");
}
);
};这在windows和android浏览器中有效，但在ios浏览器中不起作用。我没有在mac ios上测试它。ios浏览器中未显示弹出窗口。如何解决这个问题。
回答 2
Stack Overflow用户
发布于 2020-08-13 21:14:26
getUserMedia()在最新版本的iOS上工作正常。一般来说，11.1和更高版本都是可以的。
要解决这个问题，您需要将iOS设备连接到Mac，并使用Safari远程调试设置。这样你就可以得到一个控制台和javascript调试器。
如果您已经使用getUserMedia()向用户请求使用摄像机和/或麦克风的权限，则enumerateDevices()会起作用。如果没有该权限，emumerateDevices()结果将不明确或丢失。这是为了防止浏览器指纹识别。因为网络蠕动。
在getUserMedia实际工作的iOS版本中，您不需要查看各种名称空间就能找到它。navigator.mediaDevices.getUserMedia()就足够了。
下面的代码类似于我用来枚举各种不同浏览器平台上的媒体源的代码。iOS、安卓和各种台式机。我之所以使用async / await，是因为它是处理getUserMedia()返回的Promise的一种简单方法。但如果您愿意，您可以直接使用Promise。(请注意，我已经编辑了这段代码，删除了特定于应用程序的内容，但还没有对其进行调试。)
async function enumerateSources() {
if( navigator
&& navigator.mediaDevices
&& typeof navigator.mediaDevices.enumerateDevices === 'function' ) {
try {
/* open a generic stream to get permission to see devices;
* Mobile Safari insists */
const stream = await navigator.mediaDevices.getUserMedia(
{ video: true, audio: true} )
let devices = await navigator.mediaDevices.enumerateDevices()
const cameras = devices.filter( device => {
return device.kind === 'videoinput'
})
if (cameras.length >= 1) console.log ('cameras avail')
const mics = devices.filter( device => {
return device.kind === 'audioinput'
})
if (mics.length >= 1) console.log ('mics avail')
/* release stream */
const tracks = stream.getTracks()
if( tracks ) {
for( let t = 0; t < tracks.length; t++ ) tracks[t].stop()
}
return ({cameras, mics})
} catch(error) {
/* user refused permission, or media busy, or some other problem */
console.error(error.name, error.message)
return {cameras:[], mics:[]})
}
}
else throw ('media device stuff not available in this browser')
}Stack Overflow用户
发布于 2020-08-08 00:35:37
新的API的工作原理如下
navigator.mediaDevices.getUserMedia()我建议您添加到您的支持逻辑语句，以取代所有其他是旧的API。
然后，您需要使用promise resolve的流。您可以在DOM中有一个video元素，并用流设置它的srcObj属性。
navigator.getMedia(
{ video: true },
(stream) => {
video.srcObj = stream;
setCamera(true);
console.log("Permission_", "camera ON");
},
() => {
console.log("Permission_", "Camera OFF");
}
);https://stackoverflow.com/questions/63303001
复制相似问题
腾讯云开发者
