MediaDevices.getUserMedia()对ios的支持

Question

我试图在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浏览器中。如何解决此问题。

Answer 1

getUserMedia((在最新版本的iOS上正常工作。一般11.1及以上都可以。

要解决这些问题，您需要将iOS设备连接到Mac，并使用Safari远程调试设置。通过这种方式，您可以获得控制台和javascript调试器。

如果您已经使用getUserMedia((请求用户允许使用相机和/或麦克风，则enumerateDevice((有效。如果没有该权限，emumerateDevices((的结果是模糊的或丢失的。这是为了防止浏览器指纹识别。因为网络犯罪。

在getUserMedia实际工作的iOS版本中，您不需要在各种命名空间中查找它。navigator.mediaDevices.getUserMedia()就足够了。

这是我用来列举各种不同浏览器平台上媒体来源的代码，包括iOS、Android和各种台式机。我之所以使用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')
}

Answer 2

新的API与类似

navigator.mediaDevices.getUserMedia()

我建议您添加到您的支持逻辑声明中，以取代所有其他旧的API。

然后，您需要使用promise解析的流。您可以在DOM中有一个video元素，并使用流设置其srcObj属性。

navigator.getMedia(
{ video: true },
(stream) => {
video.srcObj = stream;
setCamera(true);
console.log("Permission_", "camera ON");
},
() => {
console.log("Permission_", "Camera OFF");
}
);