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 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. import { BrowserDetection } from '@jitsi/js-utils';
  2. import { getLogger } from '@jitsi/logger';
  3. const logger = getLogger(__filename);
  4. /* Minimum required Chrome / Chromium version. This applies also to derivatives. */
  5. const MIN_REQUIRED_CHROME_VERSION = 72;
  6. const MIN_REQUIRED_SAFARI_VERSION = 14;
  7. const MIN_REQUIRED_IOS_VERSION = 14;
  8. // TODO: Move this code to js-utils.
  9. // NOTE: Now we are extending BrowserDetection in order to preserve
  10. // RTCBrowserType interface but maybe it worth exporting BrowserCapabilities
  11. // and BrowserDetection as separate objects in future.
  12. /**
  13. * Implements browser capabilities for lib-jitsi-meet.
  14. */
  15. export default class BrowserCapabilities extends BrowserDetection {
  16. /**
  17. * Creates new BrowserCapabilities instance.
  18. */
  19. constructor() {
  20. super();
  21. logger.info(`This appears to be ${this.getName()}, ver: ${this.getVersion()}`);
  22. }
  23. /**
  24. * Tells whether or not the <tt>MediaStream/tt> is removed from the <tt>PeerConnection</tt> and disposed on video
  25. * mute (in order to turn off the camera device). This is needed on Firefox because of the following bug
  26. * https://bugzilla.mozilla.org/show_bug.cgi?id=1735951
  27. *
  28. * @return {boolean} <tt>true</tt> if the current browser supports this strategy or <tt>false</tt> otherwise.
  29. */
  30. doesVideoMuteByStreamRemove() {
  31. return this.isChromiumBased() || this.isWebKitBased() || this.isFirefox();
  32. }
  33. /**
  34. * Checks if the current browser is Chromium based, i.e., it's either Chrome / Chromium or uses it as its engine,
  35. * but doesn't identify as Chrome.
  36. *
  37. * This includes the following browsers:
  38. * - Chrome and Chromium.
  39. * - Other browsers which use the Chrome engine, but are detected as Chrome, such as Brave and Vivaldi.
  40. * - Browsers which are NOT Chrome but use it as their engine, and have custom detection code: Opera, Electron
  41. * and NW.JS.
  42. * This excludes
  43. * - Chrome on iOS since it uses WKWebView.
  44. */
  45. isChromiumBased() {
  46. return (this.isChrome()
  47. || this.isElectron()
  48. || this.isNWJS()
  49. || this.isOpera())
  50. && !this.isWebKitBased();
  51. }
  52. /**
  53. * Checks if the current platform is iOS.
  54. *
  55. * @returns {boolean}
  56. */
  57. isIosBrowser() {
  58. const { userAgent, maxTouchPoints, platform } = navigator;
  59. return Boolean(userAgent.match(/iP(ad|hone|od)/i))
  60. || (maxTouchPoints && maxTouchPoints > 2 && /MacIntel/.test(platform));
  61. }
  62. /**
  63. * Checks if the current browser is WebKit based. It's either
  64. * Safari or uses WebKit as its engine.
  65. *
  66. * This includes Chrome and Firefox on iOS
  67. *
  68. * @returns {boolean}
  69. */
  70. isWebKitBased() {
  71. // https://trac.webkit.org/changeset/236144/webkit/trunk/LayoutTests/webrtc/video-addLegacyTransceiver.html
  72. return this._bowser.isEngine('webkit')
  73. && typeof navigator.mediaDevices !== 'undefined'
  74. && typeof navigator.mediaDevices.getUserMedia !== 'undefined'
  75. && typeof window.RTCRtpTransceiver !== 'undefined'
  76. // eslint-disable-next-line no-undef
  77. && Object.keys(RTCRtpTransceiver.prototype).indexOf('currentDirection') > -1;
  78. }
  79. /**
  80. * Checks whether current running context is a Trusted Web Application.
  81. *
  82. * @returns {boolean} Whether the current context is a TWA.
  83. */
  84. isTwa() {
  85. return 'matchMedia' in window && window.matchMedia('(display-mode:standalone)').matches;
  86. }
  87. /**
  88. * Checks if the current browser is supported.
  89. *
  90. * @returns {boolean} true if the browser is supported, false otherwise.
  91. */
  92. isSupported() {
  93. if (this.isSafari() && this._getSafariVersion() < MIN_REQUIRED_SAFARI_VERSION) {
  94. return false;
  95. }
  96. return (this.isChromiumBased() && this._getChromiumBasedVersion() >= MIN_REQUIRED_CHROME_VERSION)
  97. || this.isFirefox()
  98. || this.isReactNative()
  99. || this.isWebKitBased();
  100. }
  101. /**
  102. * Returns whether the browser is supported for Android
  103. * @returns {boolean} true if the browser is supported for Android devices
  104. */
  105. isSupportedAndroidBrowser() {
  106. return this.isChromiumBased() || this.isFirefox();
  107. }
  108. /**
  109. * Returns whether the browser is supported for iOS
  110. * @returns {boolean} true if the browser is supported for iOS devices
  111. */
  112. isSupportedIOSBrowser() {
  113. return this._getIOSVersion() >= MIN_REQUIRED_IOS_VERSION;
  114. }
  115. /**
  116. * Returns whether or not the current environment needs a user interaction
  117. * with the page before any unmute can occur.
  118. *
  119. * @returns {boolean}
  120. */
  121. isUserInteractionRequiredForUnmute() {
  122. return this.isFirefox() && this.isVersionLessThan('68');
  123. }
  124. /**
  125. * Checks if the current browser triggers 'onmute'/'onunmute' events when
  126. * user's connection is interrupted and the video stops playback.
  127. * @returns {*|boolean} 'true' if the event is supported or 'false'
  128. * otherwise.
  129. */
  130. supportsVideoMuteOnConnInterrupted() {
  131. return this.isChromiumBased() || this.isReactNative();
  132. }
  133. /**
  134. * Checks if the current browser reports upload and download bandwidth
  135. * statistics.
  136. * @return {boolean}
  137. */
  138. supportsBandwidthStatistics() {
  139. // FIXME bandwidth stats are currently not implemented for FF on our
  140. // side, but not sure if not possible ?
  141. return !this.isFirefox() && !this.isWebKitBased();
  142. }
  143. /**
  144. * Checks if the current browser supports setting codec preferences on the transceiver.
  145. * @returns {boolean}
  146. */
  147. supportsCodecPreferences() {
  148. return Boolean(window.RTCRtpTransceiver
  149. && 'setCodecPreferences' in window.RTCRtpTransceiver.prototype
  150. && window.RTCRtpReceiver
  151. && typeof window.RTCRtpReceiver.getCapabilities !== 'undefined')
  152. // this is not working on Safari because of the following bug
  153. // https://bugs.webkit.org/show_bug.cgi?id=215567
  154. && !this.isWebKitBased();
  155. }
  156. /**
  157. * Checks if the current browser support the device change event.
  158. * @return {boolean}
  159. */
  160. supportsDeviceChangeEvent() {
  161. return navigator.mediaDevices
  162. && typeof navigator.mediaDevices.ondevicechange !== 'undefined'
  163. && typeof navigator.mediaDevices.addEventListener !== 'undefined';
  164. }
  165. /**
  166. * Checks if the current browser supports the Long Tasks API that lets us observe
  167. * performance measurement events and be notified of tasks that take longer than
  168. * 50ms to execute on the main thread.
  169. */
  170. supportsPerformanceObserver() {
  171. return typeof window.PerformanceObserver !== 'undefined'
  172. && PerformanceObserver.supportedEntryTypes.indexOf('longtask') > -1;
  173. }
  174. /**
  175. * Checks if the current browser supports audio level stats on the receivers.
  176. */
  177. supportsReceiverStats() {
  178. return typeof window.RTCRtpReceiver !== 'undefined'
  179. && Object.keys(RTCRtpReceiver.prototype).indexOf('getSynchronizationSources') > -1;
  180. }
  181. /**
  182. * Checks if the current browser reports round trip time statistics for
  183. * the ICE candidate pair.
  184. * @return {boolean}
  185. */
  186. supportsRTTStatistics() {
  187. // Firefox does not seem to report RTT for ICE candidate pair:
  188. // eslint-disable-next-line max-len
  189. // https://www.w3.org/TR/webrtc-stats/#dom-rtcicecandidatepairstats-currentroundtriptime
  190. // It does report mozRTT for RTP streams, but at the time of this
  191. // writing it's value does not make sense most of the time
  192. // (is reported as 1):
  193. // https://bugzilla.mozilla.org/show_bug.cgi?id=1241066
  194. // For Chrome and others we rely on 'googRtt'.
  195. return !this.isFirefox();
  196. }
  197. /**
  198. * Returns true if the browser supports track based statistics for the local video track. Otherwise,
  199. * track resolution and framerate will be calculated based on the 'outbound-rtp' statistics.
  200. * @returns {boolean}
  201. */
  202. supportsTrackBasedStats() {
  203. return this.isChromiumBased() && this.isVersionLessThan(112);
  204. }
  205. /**
  206. * Returns true if VP9 is supported by the client on the browser. VP9 is currently disabled on Firefox and Safari
  207. * because of issues with rendering. Please check https://bugzilla.mozilla.org/show_bug.cgi?id=1492500,
  208. * https://bugs.webkit.org/show_bug.cgi?id=231071 and https://bugs.webkit.org/show_bug.cgi?id=231074 for details.
  209. */
  210. supportsVP9() {
  211. return this.isChromiumBased() || this.isReactNative();
  212. }
  213. /**
  214. * Checks if the browser uses SDP munging for turning on simulcast.
  215. *
  216. * @returns {boolean}
  217. */
  218. usesSdpMungingForSimulcast() {
  219. return this.isChromiumBased() || this.isReactNative() || this.isWebKitBased();
  220. }
  221. /**
  222. * Checks if the browser uses RIDs/MIDs for siganling the simulcast streams
  223. * to the bridge instead of the ssrcs.
  224. */
  225. usesRidsForSimulcast() {
  226. return false;
  227. }
  228. /**
  229. * Checks if the browser supports getDisplayMedia.
  230. * @returns {boolean} {@code true} if the browser supports getDisplayMedia.
  231. */
  232. supportsGetDisplayMedia() {
  233. return typeof navigator.getDisplayMedia !== 'undefined'
  234. || (typeof navigator.mediaDevices !== 'undefined'
  235. && typeof navigator.mediaDevices.getDisplayMedia
  236. !== 'undefined');
  237. }
  238. /**
  239. * Checks if the browser supports WebRTC Encoded Transform, an alternative
  240. * to insertable streams.
  241. *
  242. * NOTE: At the time of this writing the only browser supporting this is
  243. * Safari / WebKit, behind a flag.
  244. *
  245. * @returns {boolean} {@code true} if the browser supports it.
  246. */
  247. supportsEncodedTransform() {
  248. return Boolean(window.RTCRtpScriptTransform);
  249. }
  250. /**
  251. * Checks if the browser supports insertable streams, needed for E2EE.
  252. * @returns {boolean} {@code true} if the browser supports insertable streams.
  253. */
  254. supportsInsertableStreams() {
  255. if (!(typeof window.RTCRtpSender !== 'undefined'
  256. && window.RTCRtpSender.prototype.createEncodedStreams)) {
  257. return false;
  258. }
  259. // Feature-detect transferable streams which we need to operate in a worker.
  260. // See https://groups.google.com/a/chromium.org/g/blink-dev/c/1LStSgBt6AM/m/hj0odB8pCAAJ
  261. const stream = new ReadableStream();
  262. try {
  263. window.postMessage(stream, '*', [ stream ]);
  264. return true;
  265. } catch {
  266. return false;
  267. }
  268. }
  269. /**
  270. * Whether the browser supports the RED format for audio.
  271. */
  272. supportsAudioRed() {
  273. return Boolean(window.RTCRtpSender
  274. && window.RTCRtpSender.getCapabilities
  275. && window.RTCRtpSender.getCapabilities('audio').codecs.some(codec => codec.mimeType === 'audio/red')
  276. && window.RTCRtpReceiver
  277. && window.RTCRtpReceiver.getCapabilities
  278. && window.RTCRtpReceiver.getCapabilities('audio').codecs.some(codec => codec.mimeType === 'audio/red'));
  279. }
  280. /**
  281. * Checks if the browser supports unified plan.
  282. *
  283. * @returns {boolean}
  284. */
  285. supportsUnifiedPlan() {
  286. // We do not want to enable unified plan on Electron clients that have Chromium version < 96 because of
  287. // performance and screensharing issues.
  288. return !(this.isElectron() && (this._getChromiumBasedVersion() < 96));
  289. }
  290. /**
  291. * Checks if the browser supports voice activity detection via the @type {VADAudioAnalyser} service.
  292. *
  293. * @returns {boolean}
  294. */
  295. supportsVADDetection() {
  296. return this.isChromiumBased();
  297. }
  298. /**
  299. * Check if the browser supports the RTP RTX feature (and it is usable).
  300. *
  301. * @returns {boolean}
  302. */
  303. supportsRTX() {
  304. // Disable RTX on Firefox up to 96 because we prefer simulcast over RTX
  305. // see https://bugzilla.mozilla.org/show_bug.cgi?id=1738504
  306. return !(this.isFirefox() && this.isVersionLessThan('96'));
  307. }
  308. /**
  309. * Returns the version of a Chromium based browser.
  310. *
  311. * @returns {Number}
  312. */
  313. _getChromiumBasedVersion() {
  314. if (this.isChromiumBased()) {
  315. // NW.JS doesn't expose the Chrome version in the UA string.
  316. if (this.isNWJS()) {
  317. // eslint-disable-next-line no-undef
  318. return Number.parseInt(process.versions.chromium, 10);
  319. }
  320. // Here we process all browsers which use the Chrome engine but
  321. // don't necessarily identify as Chrome. We cannot use the version
  322. // comparing functions because the Electron, Opera and NW.JS
  323. // versions are inconsequential here, as we need to know the actual
  324. // Chrome engine version.
  325. const ua = navigator.userAgent;
  326. if (ua.match(/Chrome/)) {
  327. const version
  328. = Number.parseInt(ua.match(/Chrome\/([\d.]+)/)[1], 10);
  329. return version;
  330. }
  331. }
  332. return -1;
  333. }
  334. /**
  335. * Returns the version of a Safari browser.
  336. *
  337. * @returns {Number}
  338. */
  339. _getSafariVersion() {
  340. if (this.isSafari()) {
  341. return Number.parseInt(this.getVersion(), 10);
  342. }
  343. return -1;
  344. }
  345. /**
  346. * Returns the version of an ios browser.
  347. *
  348. * @returns {Number}
  349. */
  350. _getIOSVersion() {
  351. if (this.isWebKitBased()) {
  352. return Number.parseInt(this.getVersion(), 10);
  353. }
  354. return -1;
  355. }
  356. }