tian-test404 v1.0.2

WLive

WLive项目是58直播服务，为业务线接入直播功能提供一站式解决方案。 可以选择单独接入SDK,也可以连同UI一起接入,根据业务方的需求而定。

SDK

SDK层主要由WLive类构成。 除此之外,还提供一个判断是否支持的方法：isSupport。

1.具体引入可以参考: http://igit.58corp.com/teg-app-fe/H5live/blob/master/dist/index.html

2.体验地址: http://static.58.com/git/teg-app-fe/wlive/index.html?chld=1186909548292608000

接入方式

全局引用

 <script src="//j1.58cdn.com.cn/git/teg-app-fe/wlive/js/xgplayer/xgplayer-browser.js" charset="utf-8"></script>
 <script src="//j1.58cdn.com.cn/git/teg-app-fe/wlive/js/xgplayer/xgplayer-hls.js" charset="utf-8"></script>
 <script src="//j1.58cdn.com.cn/git/teg-app-fe/wlive/js/xgplayer/xgplayer-flv.js" charset="utf-8"></script>
 <script src="//j1.58cdn.com.cn/git/teg-app-fe/wlive/js/jquery/jquery-3.4.1.slim.min.js"></script>

全局引用（推荐）脚本引入需要添加版本号(时间戳,可以参考体验地址引入方式)

  <link rel="stylesheet" href="//j1.58cdn.com.cn/git/teg-app-fe/wlive/css/style.css">
  <script src="//j1.58cdn.com.cn/git/teg-app-fe/wlive/sdk.min.js"></script>
  <script src="//j1.58cdn.com.cn/git/teg-app-fe/wlive/js/ui_wap-1.0.1.js"></script>

NPM包引用（不推荐）

  # 安装模块
  npm i -S wlive --registry http://ires.58corp.com/repository/npm/
  # or
  yarn add wlive --registry http://ires.58corp.com/repository/npm/

  // ES6 使用方式
  import wbWLiveSDK from 'wlive';

  // cmd 使用方式
  // let wbWLiveSDK = require('wlive');

模块加载器引用

  // cmd 使用方式（如seajs）
  let wbWLiveSDK = require('dist/sdk.min.js');

  // amd 使用方式(如requirejs)
  requirejs(['dist/sdk/sdk.min.js'], function(wbWLiveSDK) {
    // TODO
  });

API

   直播浏览器兼容性:

   //判断浏览器是否支持直播功能
   if (!wbWLiveSDK.isSupport) {
      console.log("当前浏览器不支持直播功能");
   }

  /**
   * 设置使用环境(QA测试环境:qa,线上环境：online)
   * 集成环境和qa只能在58集团内网访问,不验证imToken;
   * 线上环境需要验证imToken,且可以在4G环境下访问
   * @param env  {REQUIRED, string}
   */
   WLiveSDK.setEnv(env);

 /**
   * 是否开启Debug模式,默认关闭
   * @param {OPTIONAL, Boolean} isOn
   * true            开启
   * false           关闭
   */
  WLiveSDK.enableDebug(isOn);

调用方法

  // 获取实例
  /**
   * 初始化SDK，所提供的配置信息用户服务器端做用户有效性检测及身份标识
   * @param {Object} options
   * options.channelId      {REQUIRED, string}  视频直播频道ID
   * options.biz            {REQUIRED, string}  业务线表标识
   * options.appID          {REQUIRED, string}  标识业务线的appid
   * options.token          {REQUIRED, string}  业务方token,用户鉴权
   * options.userID         {REQUIRED, string}  用户ID
   * options.headPic        {REQUIRED, string}  用户头像url
   * options.nickname       {REQUIRED, string}  用户昵称
   * options.userSource     {OPTIONAL, Number}  用户来源
   * options.extJson        {REQUIRED, string}  JSON字符串,业务透传字段,包含用户头像和昵称
   */
  const wlive = new WLiveSDK.WLive(options);
 /**
   * 设置业务透传字段规则
   * @param {Object} options
   * options.nickname    {REQUIRED, string}  业务方昵称字段名称
   * options.headPic     {REQUIRED, string}  业务方头像字段名称
   */
  wlive.setExtJsonRule(options);
  /**
   * 是否开启评论模块,默认允许 true;
   */
  wlive.enableShowComment(false);
  /**
   * 是否开启拉取用户接口,默认允许 true;
   */
  wlive.enablePullUsers(false);
 /**
   * 建立长连接,建立连接后自动进入直播
   */
  wlive.connectSocket();

  /**
   * 发评论
   * @param {String} msg 评论信息
   */
  wlive.pushComment(msg);

/**
  * 拉取历史评论,在加入直播间后调用 launch_live之后,参考示例:
  * @param {Number} count 数量,默认count = 20
  */
  wlive.pullComment(count);

  /**
   * 结束直播退出
   */
  wlive.close();

  /**
   * 直播状态
   */
  wlive.on('live_status', function (e) {
      console.log('直播状态码: ', e.code)
      switch (e.code) {
        case 100: {//长连接建立成功
          pageUI.emit('launch_live', e.msg);
          //wlive.pullComment(count);
        }
          break;
        case 101: {//加入直播
          pageUI.emit('start_live', e.msg);
        }
          break;
        case 102: {//评论信息
          pageUI.emit('load_comment', e.msg);
        }
          break;
        case 103: {//用户信息
          pageUI.emit('load_users', e.msg);
        }
          break;
        case 104: {//最新评论
          pageUI.emit('load_new_comment', e.msg);
        }
        break;
        case 105: //结束直播
          pageUI.emit('end_live', e.msg);
          break;
        case 106: //直播状态
          pageUI.emit('live_status', e.msg);
          break;
      }
      }
   });

状态码

code状态码对应msg参数示例说明：

code等于100

code等于101

{
	ext_json: "{"
	nickname ":"
	赵忠生 ","
	head_pic ":"
	http: //testv1.wos.58dns.org/UWvrQpOnMUvjW/cover/video_male.png"}"
	record: true,
	rtmpDownstreamAddress: "rtmp://wliveplay.58cdn.com.cn/live/Dbt51225402631946526720",
	source: 110112,
	valid_time: 0,
	flv_downstream_address: "http://wliveplay.58cdn.com.cn/live/Dbt51225402631946526720.flv",
	online_num: 1,
	create_time: "1580993729011",
	comment_num: 11,
	stream_status: 1,
	release_time: "0",
}

code等于103

[{
	ext_json: "{"
	head_pic ":" //wos.58cdn.com.cn/sTqPoNmLsXs/video/default_head.png","nickname":"dev101"}",
	view_time: "1581065539299",
	source: 110112,
	userid: "101",
	biz: "videoapp",
}]

code等于104

live_msg

{
	channel_id: "1225402631946526720",
	channel_state: "NORMAL",
	create_time: "1580993729011",
	info_change: 0,
	live_msg: [{
		biz: "videoapp"
		content: {
			msg: "de32",
			type: "text"
		}
		ext_json: "{"
		head_pic ":" //wos.58cdn.com.cn/sTqPoNmLsXs/video/default_head.png","nickname":"dev101"}"
		is_letter: 0,
		msg_id: "1225704481107218432",
		msg_type: 2,
		need_ack: 0,
		show_type: "text",
		source: 110112,
		time: "1581065695463",
		to_ext_json: "",
		to_id: "",
		to_source: 0,
		userid: "101"
	}],
	next_push_interval: 100,
	online_num: 1,
	stream_status: 1,
	total_num: 1
}

code等于106

UI API

TODO

  // 获取实例
    /**
     * @param {Object} options
     * options.directLive    {OPTIONAL, Boolean}  用于58视频分享播放链接,默认为false
     * options.share         {OPTIONAL, Boolean}  显示分享按钮,默认为false
     * options.fullScreen    {OPTIONAL, Boolean}  显示全屏按钮,默认为false
     * options.extJsonRule   {REQUIRED, Object}
     * extJsonRule.head_pic  {REQUIRED, string}   业务方昵称字段名称
     * extJsonRule.nickname  {REQUIRED, string}   业务方头像字段名称
     */
  var pageUI = WLiveUI.getInstance(options);
  示例:
  var pageUI = WLiveUI.getInstance({
            share: true,
            fullScreen: true,
            extJsonRule: {
              headPic: 'head_pic',
              nickname: 'nickname'
            }
   });

  /**
    * 事件监听
    * @param {Function} cb(event)
    * {Number} event.code 页面状态码, 具体参考下方
    */
  pageUI.on('page_event_code', function (e) {
    switch (e.code) {
      case 99: //校验直播状态,检查结果通过监听wlive的状态码106获取
        wlive.checkStatus();
        break;
      case 100: {//发布评论
        wlive.pushComment(e.msg);
      }
        break;
      case 101: {//退出直播
        wlive.close();
      }
        break;
      case 102: {//返回首页

      }
    }
  })
  //唤起直播页面
  pageUI.emit('launch_live', e.msg);

  //开始直播
  pageUI.emit('start_live', e.msg);

  //加载评论
  pageUI.emit('load_comment', e.msg);

  //加载用户
  pageUI.emit('load_users', e.msg);

  //加载最新评论
  pageUI.emit('load_new_comment', e.msg);

状态码

UI

TODO