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

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