接入 service worker(iOS)

/**
 * 主线程内, 如果使用message事件接收service worker消息
 * @param {MessageEvent} event
 */
self.navigator.serviceWorker.addEventListener('message', (event) => {
  // 判断xp2p消息的方法, 如果是XP2P消息, 请务必忽略, 不要处理或修改
  if (!Object.prototype.hasOwnProperty.call(event.data, 'xp2pType')) {
    return;
  }
});

/**
 *或者 如果您在主线程使用onmessage接收service worker消息
 * @param {MessageEvent} event
 */
navigator.serviceWorker.onmessage = (event) => {
  // 判断xp2p消息的方法, 如果是XP2P消息, 请务必忽略, 不要处理或修改
  if (!Object.prototype.hasOwnProperty.call(event.data, 'xp2pType')) {
    return;
  }
};

/**
 * 在service worker内如果使用message事件接收主线程消息
 * @param {MessageEvent} event
 */
self.addEventListener('message', (event) => {
  // 判断xp2p消息的方法, 如果是XP2P消息, 请务必忽略, 不要处理或修改
  if (!Object.prototype.hasOwnProperty.call(event.data, 'xp2pType')) {
    return;
  }
});
/**
 * 或者 如果您在service worker内部使用onmessage接受主线程消息
 * @param {MessageEvent} event
 */
self.onmessage = (event) => {
  // 判断xp2p消息的方法, 如果是XP2P消息, 请务必忽略, 不要处理或修改
  if (!Object.prototype.hasOwnProperty.call(event.data, 'xp2pType')) {
    return;
  }
};

// 增加一个 response header, 设置sw.js的作用域是跟路径
Service-Worker-Allowed : "/"

// 提升sw.js的拦截作用域, 虽然sw.js的路径是在/js/目录下, 但是可以拦截根路径的请求
navigator.serviceWorker.register("/js/sw.js", {scope: "/"}).then(() => {
  console.log("Install succeeded as the max allowed scope was overriden to '/'.");
});


// 判断当前浏览器环境是否支持XP2P
if (!HLSP2P.isSupportedInServiceWorker()) {
  alert('浏览器不支持');
  return;
}

// TODO 配置的详细内容请参考API文档
const config = {
  // 如下为必传参数
  enableServiceWorker: true, // 仅在service worker环境中开启, 不传默认为false
  // 如下为必传参数
  videoId: 'video_id', // 特别注意是<video>的id, 这里需要跟据实际情况修改
  url: '实际播放的m3u8 url',
  domain: '这里要根据邮件填写',
  xp2pAppId: '这里要根据邮件填写',
  cloudAppId: 您的腾讯云APPID,
  videoType: 'LIVE', // 重要!! 直播写LIVE, 点播写VOD,
};

// 创建SDK实例
const hlsp2p = HLSP2P.createCommon(config);

// 监听SDK播放失败事件
hlsp2p.on(HLSP2P.Events.Rollback, ({reason}) => {
  console.warn(`p2p 回退 destroy, reason: ${reason}`);
  // 需销毁sdk
  hlsp2p.destroy();
});
window.hlsp2p = hlsp2p;

/**
 * 当停止播放时调用销毁SDK
 */
function destroySDK() {
  if (window.hlsp2p) {
    window.hlsp2p.destroy();
    window.hlsp2p = null;
  }
}


// 在service worker内部加载XP2P_SW_SDK
var xp2pswUrl = '这里写XP2P_SW_SDK的url'
importScripts(xp2pswUrl);

// 创建sw内的XP2P SDK实例, 并绑定在self作用域
// 此处create函数返回单例
self.xp2pIns = XP2PSW.XP2PSWLib.create();

/**
 * TODO 这里您可以自行实现, 请仅拦截视频正片的ts和m3u8
 * @param url
 * @return {boolean}
 */
function isTsOrM3u8Url(url) {
  return url.indexOf(".ts") > -1 || url.indexOf(".m3u8") > -1;
}

// 在fetch事件中, 使用XP2P处理必要的请求
self.addEventListener('fetch',
  /**
   * @param {FetchEvent} event
   */
  (event) => {
    // TODO XP2P 拦截两种请求: xp2p自身的请求和 HLS请求
    // TODO 您可以根据自己的灰度策略, 选择只开启部分资源走P2P
    if (self.xp2pIns && (self.xp2pIns.detectXP2PRequest(event) || isTsOrM3u8Url(event.request.url))) {
      return event.respondWith(
        // 调用XP2P的match方法来处理fetch event, 尝试请求
        self.xp2pIns.match(event)
          .then(response => {
            // 通过XP2P SDK请求成功, 返回response给fetch请求
            // TODO 如果需要对respone进行处理, 可以在这里做
            return response;
          })
          .catch((e) => {
            // TODO 重要! 当XP2P请求失败或者XP2P关闭了service worker功能的时候会走到这里, 需要在这里兜底请求一次
            // 注意: safari会增加pragma header,导致发出不必要的cors preflight请求, 会导致请求失败. 这里删除掉
            const r = new Request(event.request);
            r.headers.delete('pragma');
             // TODO 如果需要对respone进行处理, 可以在这里做
            return fetch(r);
          })
      );
    }
    // TODO 对于不需要XP2P处理的其他请求, 您可以在此处自行处理
  });

statusCode: 200
body: {
  code: 0
}