Tutorial: 浏览器与应用环境信息

浏览器与应用环境信息

本文介绍 Web SDK 对浏览器的支持情况，以及访问协议限制和防火墙限制的处理建议。

浏览器兼容表

如下兼容性表仅供参考，实际以 TRTC.isSupported 检测结果为准。您也可以使用 TRTC 检测页面 快速验证浏览器的兼容性。

PC 端

操作系统 浏览器 浏览器最低版本要求 拉流 推流 屏幕分享 备注
Windows Chrome 56+ ✅ ✅ Chrome 72+
Windows Edge 80+ ✅ ✅ Edge 80+
Windows Firefox 56+ ✅ ✅ Firefox 66+
Windows 其他 Chromium 56+ ✅ ✅ Chromium 72+ 其他浏览器例如 QQ 浏览器、Opera 等基本都是基于 Chromium 内核开发的，所以关注 Chromium 版本即可
Mac Safari 11+ ✅ ✅ Safari 13+
Mac Chrome 56+ ✅ ✅ Chrome 72+
Mac Edge 80+ ✅ ✅ Edge 80+
Mac Firefox 56+ ✅ ✅ Firefox 66+
ChromeOS Chrome - ✅ ✅ Chrome 72+

移动端

操作系统 浏览器 浏览器最低版本要求 拉流 推流 屏幕分享 备注
Android Chrome 85+ ✅ ✅ ❌ 85 以下的版本 chrome 已知缺陷可能会导致推拉流失败，建议使用 Chrome 85+ 版本
Android Edge 85+ ✅ ✅ ❌
Android Firefox 56+ ✅ ✅ ❌
Android 微信内嵌浏览器 - ✅ ✅ ❌
Android 小米浏览器 - ❌ ❌ ❌
Android 其他 Chromium 85+ ✅ ✅ ❌ 其他浏览器例如 QQ 浏览器、UC 浏览器等基本都是基于 Chromium 内核开发的，所以关注 Chromium 版本即可
iOS Safari 11+ ✅ ✅ ❌
iOS Chrome 11+ ✅ 支持（iOS 14.3+） ❌ iOS 中非 Safari 浏览器都是基于 WKWebview 实现的，WKWebview 在 iOS 14.3+ 才支持采集摄像头、麦克风能力。
HarmonyOS 华为浏览器 - ✅ ✅ ❌

注意事项

  • Mac Firefox 屏幕分享可能会出现视频部分区域错位，Firefox bug。暂无法规避，建议使用 Chrome or Safari 浏览器进行屏幕分享。
  • WebRTC 已知问题及规避方案。
  • 由于 H.264 版权限制，华为 Chrome 88 以下版本，无法使用 H264 编码（即无法推流）。如果您希望在华为设备 Chrome 浏览器中，使用 TRTC Web SDK 推流，请提交 腾讯云实时音视频 Web SDK 用户能力支持申请 开通 VP8 编解码能力。
  • 建议您及时将 TRTC Web SDK 更新至最新版本，以便获得更好的产品稳定性及在线支持。版本升级注意事项请参见：升级指引。

页面访问协议说明

浏览器厂商出于对用户安全、隐私等问题的考虑，限制网页在 https 协议下才能正常使用 TRTC Web SDK（WebRTC）的全部功能。为确保生产环境用户顺畅接入和体验 TRTC Web SDK 的全部功能，请使用 https 协议访问音视频应用页面。

注：本地开发可以通过 http://localhost 或者 file:// 协议进行访问。

URL域名及协议支持情况请参考如下表格：

应用场景 协议 接收（拉流） 发送（推流） 屏幕分享 备注
生产环境 https协议 ✅ ✅ ✅ 推荐
生产环境 http协议 ✅ ❌ ❌
本地开发环境 http://localhost ✅ ✅ ✅ 推荐
本地开发环境 http://127.0.0.1 ✅ ✅ ✅
本地开发环境 http://[本机IP] ✅ ❌ ❌
本地开发环境 file:// ✅ ✅ ✅

注意：

  • 如果您的开发环境无法通过localhost访问，也没有 https 协议，建议您使用反向代理工具，将某个 https 域名的访问请求代理到您的开发环境，例如：whistle，fiddler

应对防火墙策略

若用户处于受限网络（例如带有防火墙的企业内网），使用 TRTC Web SDK 可能会受防火墙限制导致无法正常通话。 请参考：应对防火墙策略限制。

设备授权说明

由于操作系统和浏览器的隐私保护策略规定，在浏览器里进行音视频通话，需要在浏览器里获得摄像头、麦克风对授权。设备授权分为两部分：

步骤 1: 操作系统允许浏览器使用摄像头、麦克风设备

Windows 和 Mac 的设置路径如下：

Windows： Windows设置 -> 隐私 -> 摄像头（或者麦克风）-> 允许桌面应用访问你的相机（或者麦克风）

Mac：系统偏好设置 -> 安全性与隐私 -> 隐私 -> 摄像头（或者麦克风、屏幕录制）-> 允许您的浏览器访问您的摄像头（或者麦克风、屏幕录制）

步骤2: 浏览器允许应用页面使用摄像头、麦克风设备

浏览器会根据域名进行授权设备的使用权，当 SDK 获取采集设备时，如果没有授权就会弹出授权对话框，需要点击允许才可以进行音视频通话。

  • 不同浏览器的对话框是不一样的，这是浏览器内置对话框，目前不支持定制，已知的部分浏览器对话框如下：

桌面端 chrome：

桌面端 Safari：

Android 微信、Chrome：

iOS 微信、Safari：

  • iOS 的浏览器每次都会询问是否授权，目前不支持设置默认授权。
  • 在移动端如果选择了禁止授权，通常情况下刷新页面不会重新弹出授权对话框，需要关闭页面，甚至关闭浏览器重新打开页面才能弹出授权对话框。
  • 在桌面端如果选择了禁止授权，则需要进入浏览器的设置窗口进行设置，设置路径如下：

Chrome：点击 URL 前面的安全锁会看到以下界面，按提示设置即可

Safari：偏好设置 -> 网站 -> 找到摄像头、麦克风、屏幕共享 -> 按提示设置即可