You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

BrowserCapabilities.js 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. import { getLogger } from 'jitsi-meet-logger';
  2. import { BrowserDetection } from 'js-utils';
  3. const logger = getLogger(__filename);
  4. // TODO: Move this code to js-utils.
  5. // NOTE: Now we are extending BrowserDetection in order to preserve
  6. // RTCBrowserType interface but maybe it worth exporting BrowserCapabilities
  7. // and BrowserDetection as separate objects in future.
  8. /**
  9. * Implements browser capabilities for lib-jitsi-meet.
  10. */
  11. export default class BrowserCapabilities extends BrowserDetection {
  12. /**
  13. * Creates new BrowserCapabilities instance.
  14. */
  15. constructor() {
  16. super();
  17. logger.info(
  18. `This appears to be ${this.getName()}, ver: ${this.getVersion()}`);
  19. }
  20. /**
  21. * Tells whether or not the <tt>MediaStream/tt> is removed from
  22. * the <tt>PeerConnection</tt> and disposed on video mute (in order to turn
  23. * off the camera device).
  24. * @return {boolean} <tt>true</tt> if the current browser supports this
  25. * strategy or <tt>false</tt> otherwise.
  26. */
  27. doesVideoMuteByStreamRemove() {
  28. return this.isChromiumBased();
  29. }
  30. /**
  31. * Check whether or not the current browser support peer to peer connections
  32. * @return {boolean} <tt>true</tt> if p2p is supported or <tt>false</tt>
  33. * otherwise.
  34. */
  35. supportsP2P() {
  36. return !this.usesUnifiedPlan();
  37. }
  38. /**
  39. * Checks if the current browser is Chromium based, that is, it's either
  40. * Chrome / Chromium or uses it as its engine, but doesn't identify as
  41. * Chrome.
  42. *
  43. * This includes the following browsers:
  44. * - Chrome and Chromium
  45. * - Other browsers which use the Chrome engine, but are detected as Chrome,
  46. * such as Brave and Vivaldi
  47. * - Browsers which are NOT Chrome but use it as their engine, and have
  48. * custom detection code: Opera, Electron and NW.JS
  49. */
  50. isChromiumBased() {
  51. return this.isChrome()
  52. || this.isElectron()
  53. || this.isNWJS()
  54. || this.isOpera();
  55. }
  56. /**
  57. * Checks if current browser is a Safari and a version of Safari that
  58. * supports native webrtc.
  59. *
  60. * @returns {boolean}
  61. */
  62. isSafariWithWebrtc() {
  63. return this.isSafari()
  64. && !this.isVersionLessThan('11');
  65. }
  66. /**
  67. * Checks if current browser is a Safari and a version of Safari that
  68. * supports VP8.
  69. *
  70. * @returns {boolean}
  71. */
  72. isSafariWithVP8() {
  73. return this.isSafari()
  74. && !this.isVersionLessThan('12.1');
  75. }
  76. /**
  77. * Checks if the current browser is supported.
  78. *
  79. * @returns {boolean} true if the browser is supported, false otherwise.
  80. */
  81. isSupported() {
  82. return this.isChromiumBased()
  83. || this.isFirefox()
  84. || this.isReactNative()
  85. || this.isSafariWithWebrtc();
  86. }
  87. /**
  88. * Returns whether or not the current environment needs a user interaction
  89. * with the page before any unmute can occur.
  90. *
  91. * @returns {boolean}
  92. */
  93. isUserInteractionRequiredForUnmute() {
  94. return (this.isFirefox() && this.isVersionLessThan('68')) || this.isSafari();
  95. }
  96. /**
  97. * Checks if the current browser triggers 'onmute'/'onunmute' events when
  98. * user's connection is interrupted and the video stops playback.
  99. * @returns {*|boolean} 'true' if the event is supported or 'false'
  100. * otherwise.
  101. */
  102. supportsVideoMuteOnConnInterrupted() {
  103. return this.isChromiumBased() || this.isReactNative()
  104. || this.isSafariWithVP8();
  105. }
  106. /**
  107. * Checks if the current browser reports upload and download bandwidth
  108. * statistics.
  109. * @return {boolean}
  110. */
  111. supportsBandwidthStatistics() {
  112. // FIXME bandwidth stats are currently not implemented for FF on our
  113. // side, but not sure if not possible ?
  114. return !this.isFirefox() && !this.isSafariWithWebrtc();
  115. }
  116. /**
  117. * Checks if the current browser support the device change event.
  118. * @return {boolean}
  119. */
  120. supportsDeviceChangeEvent() {
  121. return navigator.mediaDevices
  122. && typeof navigator.mediaDevices.ondevicechange !== 'undefined'
  123. && typeof navigator.mediaDevices.addEventListener !== 'undefined';
  124. }
  125. /**
  126. * Checks if the current browser supports RTT statistics for srflx local
  127. * candidates through the legacy getStats() API.
  128. */
  129. supportsLocalCandidateRttStatistics() {
  130. return this.isChromiumBased() || this.isReactNative()
  131. || this.isSafariWithVP8();
  132. }
  133. /**
  134. * Checks if the current browser reports round trip time statistics for
  135. * the ICE candidate pair.
  136. * @return {boolean}
  137. */
  138. supportsRTTStatistics() {
  139. // Firefox does not seem to report RTT for ICE candidate pair:
  140. // eslint-disable-next-line max-len
  141. // https://www.w3.org/TR/webrtc-stats/#dom-rtcicecandidatepairstats-currentroundtriptime
  142. // It does report mozRTT for RTP streams, but at the time of this
  143. // writing it's value does not make sense most of the time
  144. // (is reported as 1):
  145. // https://bugzilla.mozilla.org/show_bug.cgi?id=1241066
  146. // For Chrome and others we rely on 'googRtt'.
  147. return !this.isFirefox();
  148. }
  149. /**
  150. * Checks whether the browser supports RTPSender.
  151. *
  152. * @returns {boolean}
  153. */
  154. supportsRtpSender() {
  155. return this.isFirefox() || this.isSafariWithVP8();
  156. }
  157. /**
  158. * Checks whether the browser supports RTX.
  159. *
  160. * @returns {boolean}
  161. */
  162. supportsRtx() {
  163. return !this.isFirefox() && !this.usesUnifiedPlan();
  164. }
  165. /**
  166. * Returns whether or not the current browser can support capturing video,
  167. * be it camera or desktop, and displaying received video.
  168. *
  169. * @returns {boolean}
  170. */
  171. supportsVideo() {
  172. // FIXME: Check if we can use supportsVideoOut and supportsVideoIn. I
  173. // leave the old implementation here in order not to brake something.
  174. // Older versions of Safari using webrtc/adapter do not support video
  175. // due in part to Safari only supporting H264 and the bridge sending VP8
  176. // Newer Safari support VP8 and other WebRTC features.
  177. return !this.isSafariWithWebrtc()
  178. || (this.isSafariWithVP8() && this.usesPlanB());
  179. }
  180. /**
  181. * Checks if the browser uses plan B.
  182. *
  183. * @returns {boolean}
  184. */
  185. usesPlanB() {
  186. return !this.usesUnifiedPlan();
  187. }
  188. /**
  189. * Checks if the browser uses SDP munging for turning on simulcast.
  190. *
  191. * @returns {boolean}
  192. */
  193. usesSdpMungingForSimulcast() {
  194. return this.isChromiumBased() || this.isSafariWithVP8();
  195. }
  196. /**
  197. * Checks if the browser uses unified plan.
  198. *
  199. * @returns {boolean}
  200. */
  201. usesUnifiedPlan() {
  202. if (this.isFirefox()) {
  203. return true;
  204. }
  205. if (this.isSafariWithVP8() && typeof window.RTCRtpTransceiver !== 'undefined') {
  206. // eslint-disable-next-line max-len
  207. // https://trac.webkit.org/changeset/236144/webkit/trunk/LayoutTests/webrtc/video-addLegacyTransceiver.html
  208. // eslint-disable-next-line no-undef
  209. return Object.keys(RTCRtpTransceiver.prototype)
  210. .indexOf('currentDirection') > -1;
  211. }
  212. return false;
  213. }
  214. /**
  215. * Returns whether or not the current browser should be using the new
  216. * getUserMedia flow, which utilizes the adapter shim. This method should
  217. * be temporary and used while migrating all browsers to use adapter and
  218. * the new getUserMedia.
  219. *
  220. * @returns {boolean}
  221. */
  222. usesNewGumFlow() {
  223. const REQUIRED_CHROME_VERSION = 61;
  224. if (this.isChrome()) {
  225. return !this.isVersionLessThan(REQUIRED_CHROME_VERSION);
  226. }
  227. if (this.isFirefox() || this.isSafariWithWebrtc()) {
  228. return true;
  229. }
  230. if (this.isChromiumBased()) {
  231. return this._getChromiumBasedVersion() >= REQUIRED_CHROME_VERSION;
  232. }
  233. return false;
  234. }
  235. /**
  236. * Checks if the browser uses webrtc-adapter. All browsers using the new
  237. * getUserMedia flow and Edge.
  238. *
  239. * @returns {boolean}
  240. */
  241. usesAdapter() {
  242. return this.usesNewGumFlow();
  243. }
  244. /**
  245. * Checks if the browser uses RIDs/MIDs for siganling the simulcast streams
  246. * to the bridge instead of the ssrcs.
  247. */
  248. usesRidsForSimulcast() {
  249. return false;
  250. }
  251. /**
  252. * Checks if the browser supports getDisplayMedia.
  253. * @returns {boolean} {@code true} if the browser supports getDisplayMedia.
  254. */
  255. supportsGetDisplayMedia() {
  256. return typeof navigator.getDisplayMedia !== 'undefined'
  257. || (typeof navigator.mediaDevices !== 'undefined'
  258. && typeof navigator.mediaDevices.getDisplayMedia
  259. !== 'undefined');
  260. }
  261. /**
  262. * Checks if the browser supports insertable streams, needed for E2EE.
  263. * @returns {boolean} {@code true} if the browser supports insertable streams.
  264. */
  265. supportsInsertableStreams() {
  266. return Boolean(typeof window.RTCRtpSender !== 'undefined'
  267. && window.RTCRtpSender.prototype.createEncodedVideoStreams);
  268. }
  269. /**
  270. * Checks if the browser supports the "sdpSemantics" configuration option.
  271. * https://webrtc.org/web-apis/chrome/unified-plan/
  272. *
  273. * @returns {boolean}
  274. */
  275. supportsSdpSemantics() {
  276. return this.isChromiumBased() && this._getChromiumBasedVersion() >= 65;
  277. }
  278. /**
  279. * Returns the version of a Chromium based browser.
  280. *
  281. * @returns {Number}
  282. */
  283. _getChromiumBasedVersion() {
  284. if (this.isChromiumBased()) {
  285. // NW.JS doesn't expose the Chrome version in the UA string.
  286. if (this.isNWJS()) {
  287. // eslint-disable-next-line no-undef
  288. return Number.parseInt(process.versions.chromium, 10);
  289. }
  290. // Here we process all browsers which use the Chrome engine but
  291. // don't necessarily identify as Chrome. We cannot use the version
  292. // comparing functions because the Electron, Opera and NW.JS
  293. // versions are inconsequential here, as we need to know the actual
  294. // Chrome engine version.
  295. const ua = navigator.userAgent;
  296. if (ua.match(/Chrome/)) {
  297. const version
  298. = Number.parseInt(ua.match(/Chrome\/([\d.]+)/)[1], 10);
  299. return version;
  300. }
  301. }
  302. return -1;
  303. }
  304. }