是否可以检查用户是否有相机和麦克风,并且是否已经通过Javascript授予权限?

前端之家收集整理的这篇文章主要介绍了是否可以检查用户是否有相机和麦克风,并且是否已经通过Javascript授予权限?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道用户的设备是否具有连接的相机和麦克风,如果是,则授予使用 Javascript获取音频和视频流的权限.我想将此检查至少在Chrome和Firefox上进行.什么是一致的API?

解决方法

现场演示:

> https://www.webrtc-experiment.com/DetectRTC/

如果用户没有允许网络摄像头和/或麦克风,则媒体设备的“label”属性将具有“NULL”值.以上页面显示此消息:“请调用getUserMedia一次”.

PS.您可以在Chrome控制台开发人员工具中输入“DetectRTC.MediaDevices”.

注意:它仅适用于Chrome. Firefox还不支持类似的API. (更新:Firefox支持)

于2015年12月16日更新

注意:以下代码段在Chrome和Firefox中都可用.

  1. if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
  2. // Firefox 38+ seems having support of enumerateDevicesx
  3. navigator.enumerateDevices = function(callback) {
  4. navigator.mediaDevices.enumerateDevices().then(callback);
  5. };
  6. }
  7.  
  8. var MediaDevices = [];
  9. var isHTTPs = location.protocol === 'https:';
  10. var canEnumerate = false;
  11.  
  12. if (typeof MediaStreamTrack !== 'undefined' && 'getSources' in MediaStreamTrack) {
  13. canEnumerate = true;
  14. } else if (navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices) {
  15. canEnumerate = true;
  16. }
  17.  
  18. var hasMicrophone = false;
  19. var hasSpeakers = false;
  20. var hasWebcam = false;
  21.  
  22. var isMicrophoneAlreadyCaptured = false;
  23. var isWebcamAlreadyCaptured = false;
  24.  
  25. function checkDeviceSupport(callback) {
  26. if (!canEnumerate) {
  27. return;
  28. }
  29.  
  30. if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
  31. navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
  32. }
  33.  
  34. if (!navigator.enumerateDevices && navigator.enumerateDevices) {
  35. navigator.enumerateDevices = navigator.enumerateDevices.bind(navigator);
  36. }
  37.  
  38. if (!navigator.enumerateDevices) {
  39. if (callback) {
  40. callback();
  41. }
  42. return;
  43. }
  44.  
  45. MediaDevices = [];
  46. navigator.enumerateDevices(function(devices) {
  47. devices.forEach(function(_device) {
  48. var device = {};
  49. for (var d in _device) {
  50. device[d] = _device[d];
  51. }
  52.  
  53. if (device.kind === 'audio') {
  54. device.kind = 'audioinput';
  55. }
  56.  
  57. if (device.kind === 'video') {
  58. device.kind = 'videoinput';
  59. }
  60.  
  61. var skip;
  62. MediaDevices.forEach(function(d) {
  63. if (d.id === device.id && d.kind === device.kind) {
  64. skip = true;
  65. }
  66. });
  67.  
  68. if (skip) {
  69. return;
  70. }
  71.  
  72. if (!device.deviceId) {
  73. device.deviceId = device.id;
  74. }
  75.  
  76. if (!device.id) {
  77. device.id = device.deviceId;
  78. }
  79.  
  80. if (!device.label) {
  81. device.label = 'Please invoke getUserMedia once.';
  82. if (!isHTTPs) {
  83. device.label = 'HTTPs is required to get label of this ' + device.kind + ' device.';
  84. }
  85. } else {
  86. if (device.kind === 'videoinput' && !isWebcamAlreadyCaptured) {
  87. isWebcamAlreadyCaptured = true;
  88. }
  89.  
  90. if (device.kind === 'audioinput' && !isMicrophoneAlreadyCaptured) {
  91. isMicrophoneAlreadyCaptured = true;
  92. }
  93. }
  94.  
  95. if (device.kind === 'audioinput') {
  96. hasMicrophone = true;
  97. }
  98.  
  99. if (device.kind === 'audiooutput') {
  100. hasSpeakers = true;
  101. }
  102.  
  103. if (device.kind === 'videoinput') {
  104. hasWebcam = true;
  105. }
  106.  
  107. // there is no 'videoouput' in the spec.
  108.  
  109. MediaDevices.push(device);
  110. });
  111.  
  112. if (callback) {
  113. callback();
  114. }
  115. });
  116. }
  117.  
  118. // check for microphone/camera support!
  119. checkDeviceSupport(function() {
  120. document.write('hasWebCam: ',hasWebcam,'<br>');
  121. document.write('hasMicrophone: ',hasMicrophone,'<br>');
  122. document.write('isMicrophoneAlreadyCaptured: ',isMicrophoneAlreadyCaptured,'<br>');
  123. document.write('isWebcamAlreadyCaptured: ',isWebcamAlreadyCaptured,'<br>');
  124. });

猜你在找的JavaScript相关文章