ray-streaming

ray-streaming

RayStreaming SDK for Web

Guides

Quick start

see live-cat or live-dragon

API reference

Connection

Manage the Signaling and PeerConnection connection with node machine

new Connection(url, iceServers[, iceTransportPolicy][, minBitrate][, maxBitrate][, startBitrate][, enableAFK]))

• url<string> signaling endpoint
• iceServers <RTCIceServer[]> RTCIceServer
• iceTransportPolicy <RTCIceTransportPolicy> iceTransportPolicy Default: 'all'
• minBitrate <number> append x-google-min-bitrate in creact offer Default: 2000
• maxBitrate <number> x-google-max-bitrate Default: 5000
• startBitrate <number> x-google-start-bitrate Default: 4000
• enableAFK <boolean> disconnect when detecting afk Default: true

connection.emitUIInteraction(msg)

• msg <string>

Send UI interaction message to remote application

connection.emitUIInteraction(JSON.stringify({ eventName: 'A' })).then((result) => {
  if (result) {
    console.log('execute success') // NOTE: only promise send to appliction
  }
})

connection.screenshot(params)

• params: <Object>
  • index: <number> screen index
  • left: <number> x coordinate origin
  • top: <number> y coordinate origin
  • width: <number> width of screenshot
  • height: <number> height of screenshot

screenshot of origin stream

connection.changeBandwidth(bandwidth)

• bandwidth <number> kbps

change bandwidth with fixed bitrate

connection.clipboard(text)

• text <string> string from clipboard

sync clipboard text to node

connection.changeBandwidth(startBitrate, maxBitrate, minBitrate)

• startBitrate <number> kbps
• maxBitrate <number> kbps
• minBitrate <number> kbps

change bandwidth with bitrate range

connection.destory()

Close all connect, off event listener

Player

Provide the container to play the remote stream,

new Player(hostElement[, onPlay][, voicedAtPlay])

• hostElement <HTMLElement> any block element with fixed size
• onPlay <() => void> invoke when video play
• voicedAtPlay <boolean> remove muted attribute when play if set true Default: true

player.resizePlayer()

Resize player style to fill host element if host element size is smaller than player or resize player style to actual size

player.showTextOverlay(text)

• text <string>

Show prompt with specify text and mask video stream

player.destory()

Remove created elements

RunningState

State of the remote node or front-end widget, manager by laucher or execution context

// NOTE: Usually do not need to be modified
const runningInfo = new RunningState()

Helper

Helper.createDefaultEventStream(target, runningInfo)

• target <HTMLVideoElement> the video element
• runningInfo <RunningState> RunningState instance

Create default stream for basic interaction, transform to ArrayBuffer from the event-adapter definition

Helper.createGamepadStream()

Create stream for gamepad, transform to ArrayBuffer from the event-adapter definition

Helper.createKeyboardStream(target)

• target <HTMLVideoElement> the video element

Create stream for keyboard, transform to ArrayBuffer from the event-adapter definition

Helper.createClipboardStream(target)

• target <HTMLVideoElement> the video element

linten target's focus event and transform to clipboard text

Helper.attachListener(target, runningInfo, connection[, options])

• target <HTMLVideoElement>
• runningInfo <RunningState>
• connection <Connection>
• options: <Object>
  • enableGamepad: <boolean> create gamepad event by default Default: false
  • enableClipboard: <boolean> create clipboard event by default Default: false

the default behavior for consuming the event stream

Rivatuner

use getStats to gather statistics from provided Connection

new Rivatuner()

rivatuner.offer(connection)

• connection <Connection> Connection instance

Provide Connection

rivatuner.scan()

Start timer

rivatuner.stop()

Stop timer

rivatuner.toggle()

Toggle scan or stop

rivatuner.report()

• Returns: <Object>
  • fps: <number>
  • latency: <number> ms
  • bitrate: <number> kbs
  • packetLossRate: <number>
  • averageJitterBufferDelay: <number> ms
  • framesReceived <number>
  • framesDecoded <number>
  • keyFramesDecoded <number>
  • framesDropped <number>
  • framesPerSecond <number>

Report current statistics

rivatuner.destory()

Release listener

Caveat

• Need to initialize Player after WeixinJSBridgeReady event fired if use in WeChat web-view

if (navigator.userAgent.includes('miniProgram') || navigator.userAgent.includes('MicroMessenger')) {
  document.addEventListener('WeixinJSBridgeReady', () => {
    // initialize here
  })
}