腾讯云X-P2P接入 flv.js_音视频解决方案_同尘科技

此文档介绍了如何将 sdk 集成到 flv.js.

步骤1 根据 flv.js 的规范编写 loader

loader 在 flv.js 中是下载 flv 数据的模块, 我们需要实现一个类似的 loader, 从 p2p sdk 中接收数据
代码如下, 代码中 todo 需要您来实现

/**   * XP2P loader, 对接flv.js   */class QVBP2PLoader extends flvjs.BaseLoader {  /**     * 确定当前环境是否支持sdk     * @returns {boolean}     */  static isSupported() {    return window.QVBP2P && window.QVBP2P.isSupported();  }
  constructor(seekHander, config) {    super();    this._qvbp2p = null;    // flv.js成员,非sdk必须    this._receivedLength = 0;    this._config = config;  }
  /**     * @public     */  destroy() {    this._destroyQVBP2P();    super.destroy();  }
  /**     * 通过p2p sdk播放一个url     * @public     * @param {object} dataSource     * @param {string} dataSource.url     */  open(dataSource) {    // 初始化sdk实例    this._createQVBP2P();
    // 监听sdk事件    this._qvbp2p.listen(      window.QVBP2P.ComEvents.STATE_CHANGE,      this._onQVBP2PStateChange.bind(this),    );
    // 绑定video元素到sdk, 需要替换为客户实际的videoEl    const videoEl = document.getElementById(this._config.videoId);    this._qvbp2p.setMediaElement(videoEl);
    // 开始拉流, 注意对于一个sdk实例,loadSource不能重复调用    const config = {      src: dataSource.url,    };    this._qvbp2p.loadSource(config);  }
  /**     * @public     */  abort() {    this._destroyQVBP2P();  }
  /**     * 接收sdk抛出的事件,针对不同事件类型有不同的处理     *     * 详细事件名称见 `QVBP2P.ComCodes`     * @param {string} event 事件名称     * @param {*} data     */  _onQVBP2PStateChange(event, data) {    const { ComCodes } = window.QVBP2P;    const { code } = data;    switch (code) {      case ComCodes.RECEIVE_BUFFER:        this._receiveBuffer_need_to_implement(data.payload);        break;      case ComCodes.ROLLBACK:        this._rollback_need_to_implement();        break;      default:        break;    }  }
  /**     * 接收sdk下载回来的flv chunk数据, 送给播放器     *     * @todo 如果您使用的不是flv.js, 则此处需要客户根据播放器情况自行实现     *     * @param {ArrayBuffer} chunk flv chunk     */  _receiveBuffer_need_to_implement(chunk) {    const byteStart = this._receivedLength;    this._receivedLength += chunk.byteLength;    if (this._onDataArrival) {      this._onDataArrival(chunk, byteStart, this._receivedLength);    }  }
  /**     * 当sdk发生错误或不能继续播放时, 会抛出此事件, 需要客户使用原来的flv流程重新播放     *     * @todo 此处需要客户根据播放器情况自行实现     */  _rollback_need_to_implement() {    window.player.loadWithoutQVBP2P();  }
  /**     * 创建sdk实例     */  _createQVBP2P() {    if (this._qvbp2p) {      this._destroyQVBP2P();    }    this._qvbp2p = new window.QVBP2P.create(this._config.xp2pConfig);    window.qvbp2p = this._qvbp2p;  }
  /**     * 销毁sdk实例     */  _destroyQVBP2P() {    if (this._qvbp2p) {      this._qvbp2p.destroy();      this._qvbp2p = null;      window.qvbp2p = null;    }  }}

步骤2 在flv.js中使用P2P

此步骤需要您根据播放器实际情况来实现, 此处为示例

/**   * 封装了flv.js的调用, 根据配置选择是否开启XP2P   */class Player {  constructor() {    this.flvjsPlayer = null;  }
  config({ useP2P, url, xp2pConfig }) {    this.flvjsConfig = {      mediaDataSource: {        type: 'flv',        url,        isLive: true,      },      optionalConfig: {        enableWorker: false,        videoId: 'videoId', // 必填, 





对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案