@volcengine/veplayer 2.0.0-rc.2 → 2.1.0-rc.0

package/README.md

@@ -1,5 +1,18 @@
 # VePlayer
 
 ## 简介
+视频云播放器（VePlayer）是一款 Web 端的点直播播放 SDK，结合火山引擎点直播服务，为您提供流畅、稳定、高品质的点直播解决方案，支持便捷接入、跨端兼容。帮助您一站式快速搭建自己的点直播播放器。
+
+## 安装
+```node
+npm install @volcengine/veplayer
+```
+
+## 直播 API 文档
+[接入指引](https://www.volcengine.com/docs/6469/127528) <br>
+[功能接入](https://www.volcengine.com/docs/6469/138655)<br>
+[配置](https://www.volcengine.com/docs/6469/1155423)<br>
+[方法及属性](https://www.volcengine.com/docs/6469/1156178)<br>
+[事件](https://www.volcengine.com/docs/6469/1158676)<br>
+[错误码](https://www.volcengine.com/docs/6469/1158675)
 
-这是 VePlayer 的导出包，本身不包含任何实现。

package/esm/index.d.ts

@@ -79,7 +79,7 @@ declare class VeI18n<T extends string = TextKey> {
             texts?: Record<Lang, Record<string, string>>;
         };
     });
-    static get langKeys(): any;
+    static get langKeys(): string[];
     static isLangValid(lang: Lang): boolean;
     static extend(i18nTextList: Array<IXGI18nText>, i18nLangs?: IXGI18n): void;
     setLang(lang: string): void;
@@ -106,6 +106,7 @@ declare class Definition implements XGDefinition {
         fallbackUrls?: string[];
     });
     get url(): string;
+    set url(url: string);
     next(): DefinitionUrl;
 }
 /**
@@ -1162,11 +1163,11 @@ declare class VePlayerBase {
      * @brief 获取和设置当前语言。
      */
     // eslint-disable-next-line @typescript-eslint/member-ordering
-    get lang(): "zh-cn" | "zh-hk" | string;
+    get lang(): "zh-cn" | "en" | string;
     /**
      * @brief 获取和设置当前语言。
      */
-    set lang(lang: "zh-cn" | "zh-hk" | string);
+    set lang(lang: "zh-cn" | "en" | string);
     // eslint-disable-next-line @typescript-eslint/member-ordering
     protected get _src(): string;
     /**
@@ -1296,7 +1297,7 @@ declare class VePlayerBase {
      * @brief 调用此方法进入系统全屏状态。如果该方法调用的时候处于网页全屏状态会自动退出网页全屏，下发事件 `Events.FULLSCREEN_CHANGE`。
      * @param el 全屏作用的 DOM 节点。
      */
-    getFullscreen(el?: HTMLElement): Promise<void>;
+    requestFullscreen(el?: HTMLElement): Promise<void>;
     /**
      * @brief 调用此方法退出系统全屏状态，调用该方法 `veplayer.isFullscreen` 将会变为 `false`，并触发 `Events.FULLSCREEN_CHANGE` 事件。
      * @param el 全屏作用的 DOM 节点。
@@ -1306,7 +1307,7 @@ declare class VePlayerBase {
      * @brief 调用此方法进入网页样式全屏状态，播放器进入网页全屏，利用 CSS 模拟实现全屏效果。如果该接口调用的时候处于全屏状态，会自动退出全屏，下发事件 `Events.CSS_FULLSCREEN_CHANGE`。
      * @param el 全屏作用的 DOM 节点。
      */
-    getCssFullscreen(el?: HTMLElement): void;
+    requestCssFullscreen(el?: HTMLElement): void;
     /**
      * @brief 调用此方法退出网页样式全屏状态。 调用该方法 `veplayer.isFullscreen` 将会变为 `false`，并触发 `Events.CSS_FULLSCREEN_CHANGE` 事件。
      */
@@ -1355,7 +1356,10 @@ declare class VePlayerBase {
     /**
      * @hidden
      */
-    prepare(url: string): Promise<any[]>;
+    prepare(url: string): Promise<{
+        plugins: any[];
+        options: Partial<VePlayerBaseOptions> | undefined;
+    }>;
     private _handleFallback;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private _transformEvent;
@@ -1542,7 +1546,7 @@ declare namespace strategy {
                 texts?: Record<Lang, Record<string, string>>;
             };
         });
-        static get langKeys(): any;
+        static get langKeys(): string[];
         static isLangValid(lang: Lang): boolean;
         static extend(i18nTextList: Array<IXGI18nText>, i18nLangs?: IXGI18n): void;
         setLang(lang: string): void;
@@ -1570,6 +1574,7 @@ declare namespace strategy {
             fallbackUrls?: string[];
         });
         get url(): string;
+        set url(url: string);
         next(): DefinitionUrl;
     }
     /**
@@ -2021,7 +2026,6 @@ declare namespace strategy {
         ext?: any;
         error?: Error;
     }
-    // 参考： https://bytedance.feishu.cn/docx/doxcnGPXIOrJk3dGE3E3YghgZke
     const ERROR_INFO: Partial<Record<ErrorCode, ErrorInfo>>;
     const ERROR_TYPE_INFO: Record<ErrorType, ErrorInfo>;
     /**
@@ -2196,7 +2200,9 @@ declare namespace strategy {
         };
         renderItemList(): void;
         onItemClick(_: never, data: {
-            to: Definition;
+            to: Definition & {
+                showText: string;
+            };
         }): void;
         fallback(options?: {
             toast: boolean;
@@ -2799,7 +2805,7 @@ declare namespace error {
                 texts?: Record<Lang, Record<string, string>>;
             };
         });
-        static get langKeys(): any;
+        static get langKeys(): string[];
         static isLangValid(lang: Lang): boolean;
         static extend(i18nTextList: Array<IXGI18nText>, i18nLangs?: IXGI18n): void;
         setLang(lang: string): void;
@@ -3027,7 +3033,6 @@ declare namespace error {
         ext?: any;
         error?: Error;
     }
-    // 参考： https://bytedance.feishu.cn/docx/doxcnGPXIOrJk3dGE3E3YghgZke
     const ERROR_INFO: Partial<Record<ErrorCode, ErrorInfo>>;
     const ERROR_TYPE_INFO: Record<ErrorType, ErrorInfo>;
     /**
@@ -3127,6 +3132,7 @@ declare namespace event {
         DURATION_CHANGE: string;
         VOLUME_CHANGE: string;
         LOADED_DATA: string;
+        LOADED_METADATA: string;
         RATE_CHANGE: string;
         PROGRESS: string;
         LOAD_START: string;

package/esm/veplayer.biz.live.development.js

@@ -28,6 +28,18 @@ const ERRORS = {
 function create(errorCode, i18n) {
   return new VeError(ERRORS[errorCode], i18n);
 }
+const DynamicModule$2 = window["VePlayer"].DynamicModule;
+const load$2 = window["VePlayer"].load;
+async function isRTMSupported() {
+  const Rtm = await load$2(DynamicModule$2.PluginRtm);
+  return Rtm.isSupported();
+}
+async function isRTMSupportCodec(codec = RTMCodec.H264) {
+  const Rtm = await load$2(DynamicModule$2.PluginRtm);
+  if (codec === RTMCodec.H264)
+    return Rtm.isSupportedH264();
+  return false;
+}
 const strategy$1 = window["VePlayer"].strategy;
 const util$3 = window["VePlayer"].util;
 const DynamicModule$1 = window["VePlayer"].DynamicModule;
@@ -38,11 +50,20 @@ const rtmStrategy = {
   options: {},
   module: DynamicModule$1.PluginRtm
 };
-const getRtmStrategy = async (options) => {
+const generateFallbackUrl = (url) => {
+  if (Sniffer$2.device === "pc") {
+    return url.replace(".sdp", ".flv");
+  } else {
+    return url.replace(".sdp", ".m3u8");
+  }
+};
+const getRtmStrategy = async (options, player) => {
   var _a;
   let backupStrategy;
-  const { fallbackUrl, ...ret } = options.rtm || {};
-  const backupType = fallbackUrl && util$3.getStreamType(fallbackUrl);
+  const { url } = options;
+  const { fallbackUrl, enableFallback = true, ...ret } = options.rtm || {};
+  const actualFallbackUrl = !enableFallback ? "" : !fallbackUrl && url ? generateFallbackUrl(url) : fallbackUrl;
+  const backupType = actualFallbackUrl && util$3.getStreamType(actualFallbackUrl);
   if (backupType === "flv" && util$3.isMseSupported(Codec$1.H264)) {
     backupStrategy = strategy$1.createFlvMseStrategy(options);
   } else if (backupType === "hls" && (Sniffer$2.device !== "mobile" || ((_a = options == null ? void 0 : options.hls) == null ? void 0 : _a.enableMSE)) && util$3.isMseSupported(Codec$1.H264)) {
@@ -52,42 +73,57 @@ const getRtmStrategy = async (options) => {
     load$1(rtmStrategy.module).catch(() => void 0),
     backupStrategy && load$1(backupStrategy.module).catch(() => void 0)
   ]);
+  const [RTMSupported, RTMSupportCodec] = await Promise.all([
+    isRTMSupported(),
+    isRTMSupportCodec()
+  ]);
+  if (!RTMSupported || !RTMSupportCodec) {
+    if (player) {
+      player.emit("degrade", {
+        url: actualFallbackUrl,
+        originRtmUrl: url,
+        code: "NOT_SUPPORT",
+        message: "not support rtm or h264",
+        isRTMSupported: RTMSupported,
+        isRTMSupportCodec: RTMSupportCodec
+      });
+    }
+    return {
+      options: {
+        ...(backupStrategy == null ? void 0 : backupStrategy.options) || {},
+        url: actualFallbackUrl,
+        _RTMdegrade: {
+          _originRtmUrl: url,
+          _isRTMSupported: RTMSupported,
+          _isRTMSupportCodec: RTMSupportCodec
+        }
+      },
+      plugins: backupCdn ? [backupCdn] : []
+    };
+  }
   return {
     options: {
       ...(backupStrategy == null ? void 0 : backupStrategy.options) || {},
+      _RTMdegrade: void 0,
       rts: {
         retryCount: 0,
         ...ret,
-        backupURL: fallbackUrl,
+        backupURL: actualFallbackUrl,
         backupConstruct: backupCdn
       }
     },
     plugins: rtmCdn ? [rtmCdn] : []
   };
 };
-var RTMCodec = /* @__PURE__ */ ((RTMCodec2) => {
-  RTMCodec2["H264"] = "h264";
-  return RTMCodec2;
-})(RTMCodec || {});
-const isRTMSupported = async () => {
-  const Rtm = await load$1(DynamicModule$1.PluginRtm);
-  return Rtm.isSupported();
-};
-const isRTMSupportCodec = async (codec = "h264") => {
-  const Rtm = await load$1(DynamicModule$1.PluginRtm);
-  if (codec === "h264")
-    return Rtm.isSupportedH264();
-  return false;
-};
 const util$2 = window["VePlayer"].util;
 const strategy = window["VePlayer"].strategy;
-const getTypeStrategy = async (options) => {
+const getTypeStrategy = async (options, player) => {
   const type = options.url ? util$2.getStreamType(options.url) : "";
   if (!type || type === "unknown") {
     return { options: {}, plugins: [] };
   }
   if (type === "rtm") {
-    return await getRtmStrategy(options);
+    return await getRtmStrategy(options, player);
   }
   if (type === "flv") {
     return await strategy.getFlvStrategy(options);
@@ -543,9 +579,9 @@ function getPlayFormat(url) {
 function isCodecSupport(codec) {
   return typeof MediaSource !== "undefined" ? +MediaSource.isTypeSupported("video/mp4; codecs=" + codec) : 0;
 }
-function getUrlQuery(url, key) {
+function getUrlQuery(url, key, key2) {
   var x2 = new URLSearchParams(url.split("?")[1]);
-  return x2.get(key);
+  return x2.get(key) || x2.get(key2);
 }
 function getDeviceInfo() {
   var res = {
@@ -572,19 +608,11 @@ function getPlayerCore(player) {
       return player.plugins.hls;
     } else if (player.plugins.rts) {
       return player.plugins.rts;
-    } else if (player.plugins.flvlive) {
-      return player.plugins.flvlive;
-    } else if (player.plugins.hlslive) {
-      return player.plugins.hlslive;
-    } else if (player.plugins.hlsvod) {
-      return player.plugins.hlsvod;
-    } else if (player.plugins.hlslivemobile) {
-      return player.plugins.hlslivemobile;
-    } else if (player.plugins.flvlivemobile) {
-      return player.plugins.flvlivemobile;
-    }
-  }
-  return player.newHls || player.newFlv || player.__core__ || player.flv;
+    } else if (player.plugins.rtm) {
+      return player.plugins.rtm;
+    }
+  }
+  return null;
 }
 function getDefaultOptions(options) {
   return {
@@ -813,7 +841,7 @@ function getCommonLog(options) {
     live_sdk_version: getPlayerCore(player) || player.hlsOps ? "2" : "-1",
     player_sdk_version: player.version,
     // eslint-disable-next-line no-undef
-    logger_version: "1.1.0-alpha.5",
+    logger_version: "1.1.0-alpha.7",
     // 由rollup 在编译时注入
     report_version: "5",
     product_line: options.product_line,
@@ -937,9 +965,13 @@ var Manage = /* @__PURE__ */ function() {
     if (this._player.video) {
       log.play_current_time = this._player.currentTime;
     }
-    log.cdn_play_url = url && url.startsWith("//") ? window.location.protocol + url : url;
-    log.live_stream_session_id = getUrlQuery(url, "session_id");
-    log.play_format = getPlayFormat(url);
+    if (this.core && this.core.loader && this.core.loader.finnalUrl) {
+      log.cdn_play_url = this.core.loader.finnalUrl;
+    } else {
+      log.cdn_play_url = url && url.startsWith("//") ? window.location.protocol + url : url;
+    }
+    log.live_stream_session_id = getUrlQuery(log.cdn_play_url, "_session_id", "session_id");
+    log.play_format = getPlayFormat(log.cdn_play_url);
     log.timestamp = getCurrentTime();
     var _getDeviceInfo = getDeviceInfo(), cpu_core_number = _getDeviceInfo.cpu_core_number, memory_usage = _getDeviceInfo.memory_usage, network_downlink = _getDeviceInfo.network_downlink;
     log.cpu_core_number = cpu_core_number;
@@ -1165,6 +1197,11 @@ var XgLiveLogger = /* @__PURE__ */ function() {
   };
   _proto2.reportStartPlay = function reportStartPlay() {
     if (!this.started) {
+      this.core = getPlayerCore(this.player);
+      if (this.core) {
+        this.commonParams.live_sdk_version = "2";
+        this.logmanager.core = this.core;
+      }
       this.started = true;
       this.log.start_play.start_play_time = this.log.start_play.timestamp = getCurrentTime();
       this.logmanager.push(this.log.start_play, true);
@@ -1429,6 +1466,7 @@ var XgLiveLogger = /* @__PURE__ */ function() {
     this.core = getPlayerCore(this.player);
     if (this.core) {
       this.commonParams.live_sdk_version = "2";
+      this.logmanager.core = this.core;
     }
     if (this.player.config.autoplay || this.player.config.videoInit) {
       this.reportStartPlay();
@@ -2681,6 +2719,45 @@ var T = 4003, C = function() {
     this.event("predefine_pageview", n2);
   }, t2;
 }(), q = new R("default");
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+  }
+  return getRandomValues(rnds8);
+}
+const byteToHex = [];
+for (let i2 = 0; i2 < 256; ++i2) {
+  byteToHex.push((i2 + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset = offset || 0;
+    for (let i2 = 0; i2 < 16; ++i2) {
+      buf[offset + i2] = rnds[i2];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
 const DEVICE_ID_KEY = "veplayer_live_device_id";
 const USER_ID_Key = "veplayer_live_user_id";
 const genRandomID2 = (length) => {
@@ -2706,6 +2783,45 @@ const getUserId2 = () => {
   localStorage.setItem(USER_ID_Key, userId);
   return userId;
 };
+const generateUrlWithSessionId = (url) => {
+  var _a, _b;
+  if (!url) {
+    return "";
+  }
+  const withoutProtocol = url.startsWith("//");
+  if (withoutProtocol) {
+    url = location.protocol + url;
+  }
+  try {
+    const urlObject = new URL(url);
+    if ((_a = urlObject == null ? void 0 : urlObject.searchParams) == null ? void 0 : _a.get("_session_id")) {
+      return url;
+    }
+    (_b = urlObject == null ? void 0 : urlObject.searchParams) == null ? void 0 : _b.append("_session_id", generateSessionId());
+    return urlObject.toString();
+  } catch (error2) {
+    return url;
+  }
+};
+const hashCode = (str) => {
+  str += "";
+  let h2 = 0;
+  let off = 0;
+  const len = str.length;
+  for (let i2 = 0; i2 < len; i2++) {
+    h2 = 31 * h2 + str.charCodeAt(off++);
+    if (h2 > 140737488355327 || h2 < -140737488355328) {
+      h2 &= 281474976710655;
+    }
+  }
+  if (h2 < 0) {
+    h2 += 2251799813685247;
+  }
+  return h2;
+};
+const generateSessionId = () => {
+  return v4().replace(/-/g, "") + "." + Date.now() + "." + hashCode(v4().replace(/-/g, ""));
+};
 const Plugin$2 = window["VePlayer"].Plugin;
 const CN_APPID = 468759;
 const CHANNEL = "cn";
@@ -2785,10 +2901,10 @@ class Logger extends Plugin$2 {
       user_id: this._userId,
       device_id: this._deviceId,
       ext: {
-        veplayer_version: "2.0.0-rc.1",
-        flv_version: "3.0.0-next.23",
-        hls_version: "3.0.0-next.36-1",
-        rts_version: "0.2.0-alpha.3"
+        veplayer_version: "2.1.0-rc.0",
+        flv_version: "3.0.10-alpha.4",
+        hls_version: "3.0.10-alpha.4",
+        rts_version: "0.2.0-alpha.5"
       }
     });
   }
@@ -3073,6 +3189,10 @@ const LIVE_DEFAULT_OPTIONS = {
   autoplay: { muted: true }
 };
 const LIVE_DEFAULT_PLUGINS = [...DEFAULT_PLUGINS, Refresh, Logger, InfoPanel];
+var RTMCodec = /* @__PURE__ */ ((RTMCodec2) => {
+  RTMCodec2["H264"] = "h264";
+  return RTMCodec2;
+})(RTMCodec || {});
 class VePlayerLive extends VePlayerBase {
   /**
    * @hidden
@@ -3112,6 +3232,8 @@ class VePlayerLive extends VePlayerBase {
   }
 }
 async function createLivePlayer(options) {
+  var _a, _b;
+  let player = void 0;
   if (!options || !options.url && !options.playlist) {
     throw create(ErrorCode.INVALID_PARAMETER, new VeI18n());
   }
@@ -3120,18 +3242,35 @@ async function createLivePlayer(options) {
     ...options,
     plugins: [...LIVE_DEFAULT_PLUGINS, ...options.plugins ?? []]
   };
-  const player = await VePlayerBase.create(
+  player = await VePlayerBase.create(
     {
       ...LIVE_DEFAULT_OPTIONS,
       ...finalOptions,
       isLive: true,
       i18nManager: i18n,
+      preProcessUrl: (url) => {
+        return {
+          url: generateUrlWithSessionId(url)
+        };
+      },
       async preparePlugins(url) {
-        return getTypeStrategy({ ...finalOptions, url });
+        return getTypeStrategy({ ...finalOptions, url }, player);
       }
     },
     VePlayerLive
   );
+  if (player) {
+    const RTMDegrade = (_b = (_a = player == null ? void 0 : player._player) == null ? void 0 : _a.config) == null ? void 0 : _b._RTMdegrade;
+    if (RTMDegrade) {
+      player.emit("degrade", {
+        originRtmUrl: RTMDegrade._originRtmUrl,
+        code: "NOT_SUPPORT",
+        message: "not support rtm or h264",
+        isRTMSupported: RTMDegrade._isRTMSupported,
+        isRTMSupportCodec: RTMDegrade._isRTMSupportCodec
+      });
+    }
+  }
   return player;
 }
 var live = /* @__PURE__ */ Object.freeze({