SDK接入

接入参考

1、快速启动

  • 以公有化启动流程为例
import { Launcher } from 'live-cat'
const appKey = 'xxxxxxxxxxxxxxxxxxx'
const address = 'https://app.3dcat.live'
const startType = 1 		//	1:普通链接 | 3:投屏链接
const appSecret = 'xxxx' 	//	密钥
const bootstrap = async () => {
  try {
    const launch = new Launcher({
      address,
      appKey,
      startType,
    })
    const player = document.querySelector('body')
    document.querySelector('body').style.width = '100vw'
    document.querySelector('body').style.height = '100vh'
    await launch.automata(player)
  } catch (error) {
    console.error(error)
  }
}

window.addEventListener('DOMContentLoaded', () => {
  if (
    navigator.userAgent.includes('miniProgram') ||
    navigator.userAgent.includes('MicroMessenger')
  ) {
    //微信浏览器/微信小程序环境
    document.addEventListener('WeixinJSBridgeReady', bootstrap, false)
  } else {
    bootstrap()
  }
})

2、启动器(Launcher)

2.1、构造属性(Constructors)

属性说明类型是否必填
address连接地址string必填
appKeyappKeystring必填
startType1:普通连接 3:投屏连接number必填
appSecret密钥string-
ueMultiTouch是否开启UE4应用多点触控boolean-
onPlay开始播放回调() => void-
minBitrate初始化最小码率(默认为:2000)number-
maxBitrate初始化最大码率(默认为:5000)number-
startBitrate初始化码率(默认为:4000)number-

2.2、方法(Methods)

方法名说明参数回调参数
getConnection获取连接实例-连接实例(Connection)
getPlayer获取播放实例-播放实例(LivePlayer)
report获取实时连接状态(详细参考示例)-object
toggleStatistics控制连接状态显示状态(详细参考示例)-object
changeBandwidth调节码率(详细参考示例)numbervoid
toggleFullscreen切换全屏(横屏)支持情况参考-void
destory断开全部连接[errMsg]void

2.3、示例(Examples)

2.3.1、调节码率

launcher.changeBandwidth(
  8000, // start bitrate kbps
  10000, // max bitrate kbps
  5000, // min bitrate kbps
)
launcher.changeBandwidth(
  10000, // medians bitrate kbps
)

2.3.2、 获取实时连接各种状态

launcher.toggleStatistics()
window.setInterval(() => {
  const { fps, bitrate, packetLossRate, latency, averageJitterBufferDelay } = launcher.report()
  console.log(`
    FPS: ${fps}
    biterate: ${bitrate}kbps
    latency: ${latency}ms
    averageJitterBufferDelay: ${averageJitterBufferDelay}ms
    packetLossRate: ${(packetLossRate * 100).toFixed(3)}%
  `)
}, 1000)

3、连接管理(Connection)

3.1、属性(Attributes)

属性名说明类型默认值
dc获取 RTCDataChannel 实例RTCDataChannel-
eventConnection 事件(参考 3.3 事件(Events))object-
pc获取 RTCPeerConnection 实例RTCPeerConnection-

3.2、方法(Methods)

方法名说明参数回调参数
emitUIInteraction发送消息到应用程序stringPromise<boolean>
send发送消息(第二个参数为true可重置超时时间)(string|Blob|ArrayBuffer,boolean)void

3.3、事件(Events)

事件名说明回调参数
connect可视化服务连接中-
dataChannelConnected连接成功,资源加载中-
close连接中断回调CloseEvent
disconnect信令断开回调string
interaction接收应用端返回数据string
afk超时断开-

4、播放管理(LivePlayer)

4.1、属性(Attributes)

属性名说明类型默认值
videoElement播放实例节点HTMLVideoElement-
playerElement播放实例父级容器HTMLDivElement-

4.2、方法(Methods)

方法名说明参数回调参数
handleChangeCanResize设置播放实例显示模式自适应(详细看示例)booleanvoid
resizePlayer初始化播放实例显示模式-void
showLoadingText设置加载中文字string-
showTextOverlay设置播放页遮盖文字string-

4.3、示例(Examples)

4.3.1、调节播放实例显示模式

默认为自适应模式,如需初始化其他显示模式,建议写在 Launcher->onPlay 钩子

4.3.1.1、拉伸模式

livePlayer.handleChangeCanResize(false)
livePlayer.playerElement.style.top = '0'
livePlayer.playerElement.style.left = '0'
livePlayer.playerElement.style.width = '100%'
livePlayer.playerElement.style.height = '100%'
livePlayer.videoElement.style.objectFit = 'fill'

4.3.1.2、裁剪模式

livePlayer.handleChangeCanResize(false)
livePlayer.playerElement.style.top = '0'
livePlayer.playerElement.style.left = '0'
livePlayer.playerElement.style.width = '100%'
livePlayer.playerElement.style.height = '100%'
livePlayer.videoElement.style.objectFit = 'cover'

4.3.1.3、 自适应模式

livePlayer.handleChangeCanResize(true)
livePlayer.videoElement.style.objectFit = 'contain'
livePlayer.resizePlayer()

5、鼠标键盘控制相关接口(可选扩展)

5.1、示例

import { Keyboard, MouseMove, MouseButton, WheelScroll, TouchSet, TextInput } from 'ray-streaming'

//键盘事件
connection.send(new Keyboard(27, false, false, false, false, false, false, true).dumps())
//鼠标移动事件
connection.send(new MouseMove(100, 300, 3, 4).dumps())

//鼠标按钮事件
connection.send(new MouseButton(1, true).dumps())

//缩放事件
connection.send(new WheelScroll(10, true).dumps())

//触控事件
connection.send(new TouchSet(0, [{ x: 10, y: 10, id: 1 }]).dumps())

//文本传输事件
connection.send(new TextInput('test text').dumps())

5.2、键盘事件(Keyboard)

5.2.1、构造属性(Constructors)

属性说明类型
keycode键码number
alt按下 altboolean
shift按下 shiftboolean
ctrl按下 ctrlboolean
nlock按下 nlockboolean
clock按下 clockboolean
slock按下 slockboolean
down按下boolean

5.3、鼠标移动事件(MouseMove)

5.3.1、构造属性(Constructors)

属性说明类型
xxnumber
yynumber
dxdxnumber
dydynumber

5.4、鼠标按钮事件(MouseButton)

5.4.1、构造属性(Constructors)

属性说明类型
mouseButtonTypeleft = 1,middle=2, right=3number
down按下boolean

5.5、缩放事件(WheelScroll)

5.5.1、构造属性(Constructors)

属性说明类型
stepstepnumber
forwardforwardboolean

5.6、触控事件(TouchSet)

5.6.1、构造属性(Constructors)

属性说明类型
touchTypedown = 0,update=1, up=2number
touchListTouchPoint:{x: number y: number id: number} //id:touch identifierTouchPoint[]

5.7、文本传输事件(TextInput)

5.7.1、构造属性(Constructors)

属性说明类型
text聚焦应用输入框时能够快速发送内容,比如实现复制粘贴功能string
业务咨询:400-8037-298