页面加载超时检测

功能描述

页面录制场景下，网络异常等偶然因素可能会造成如下问题：

• 页面加载时间较长且加载时长不固定，无法获知真正开始有效录制的时间点，可能会丢录重要内容。
• 页面加载不成功，由于没有出错上报机制，浏览器端不会重新加载页面，从而导致录制内容与预期不一致等问题。

为了解决上述问题，页面录制支持页面加载超时检测。开始页面录制后，你需要自行调用接口通知浏览器页面加载完成，实现以下功能：

• 若在设定的时间内，浏览器收到页面加载完成的通知，则录制正常进行。
• 若在设定的时间内，浏览器未收到页面加载完成的通知，则浏览器自动重新加载页面，且以事件消息的方式及时通知开发者。如果页面再次加载超时，则录制服务停止，避免录制错误内容。

实现方法

你需要通过两个步骤实现页面加载超时检测功能：

1. 调用 start 方法时通过 readyTimeout 参数设置页面加载超时的时间限制。
2. 自行判断页面是否加载完成，页面加载完成时调用 notifyReady 方法通知浏览器。
   页面加载完成
   • 如果页面加载完成，则在设定的 readyTimeout 时间内调用 notifyReady 方法通知浏览器页面加载成功。如下图所示：
     

页面加载超时

• 如果页面加载超时，即在设定的 readyTimeout 时间内未调用 notifyReady 方法通知浏览器，则浏览器重新加载页面，并收到 web_recorder_reload 回调中 reason 字段为 page_load_timeout。
• 如果页面加载再次超时，即在设定的 readyTimeout 时间内未调用 notifyReady 方法通知浏览器，则表示页面加载失败，录制服务停止，收到 web_recorder_stopped 回调中，code 为 4，message 为 page_load_timeout。
  工作原理如下图所示：
  

1. 设置页面加载超时时间

你需要在调用 start 方法时通过 readyTimeout 参数设置页面加载超时的时间。参数设置如下：

readyTimeout：（选填）Number 类型，设置页面加载超时时间，单位为秒，取值范围 [0,60]。

• 设置为 0 或不设置，表示不检测页面加载状态。
• 设置为大于等于 1 的整数，表示页面加载超时时间。
• 如果设置为小于 0 或非整数，表示设置错误并收到错误码 2。

2. 设置页面加载完成通知接口

你需要在待录制页面中调用 notifyReady 接口，来通知浏览器页面加载成功。

示例代码如下：

<script>
function notifyReady() {
    if (typeof window.navigator.notifyReady === 'function')
        window.navigator.notifyReady();
}
</script>

API 参考

• start
• web_recorder_started
• web_recorder_reload