ray-streaming-extra-ue4

RayStreaming SDK for Web

Guides

Quick start

import { Launcher } from 'ray-streaming-extra-ue4'

// NOTE: provided by the operating environment
const appId = 'xxxxxxxxxxxxxxxxxxx'
const address = 'http://xxx.xxx.xxx.xxx:xxxx'

new Launcher({ address, appId }).automata()

Manual

import { Client, Connection } from 'ray-streaming-extra-ue4'

// 1. bootstrap app by use Client instance
const client = new Client('TARGET_ENVIRONMENT_ADDRESS')
// ...
client
  .getSessionInfo()
  .then((res) => res.data)
  .then(({ token, signaling }) => {
    // NOTE: obtain token, signaling
  })
// NOTE: start app
client.start({ appId: 'THE_APP_WHICH_WANT_TO_RUN', token })
// NOTE: POLLING request
client.status(appId, token).then((res) => {
  if (res.data.status === 'running') {
    // NOTE: use res.data.coturns as ICE server config˝
  }
})

// 2. setup Connection
const connection = new Connection(
  `${signaling}/clientWebsocket/${token}`,
  iceConfig, // NOTE: obtain above
)
connection.event.receivedVideo.on((media) => {
  // NOTE: received media stream, set to any video element
})

// 3. attach listener
connection.attachListener(video)

API reference

Connection

Manage the Signaling and PeerConnection connection with node machine

new Connection(url, iceServers[, iceTransportPolicy])

• url<string> signaling endpoint
• iceServers <RTCIceServer[]> RTCIceServer
• iceTransportPolicy <RTCIceTransportPolicy> iceTransportPolicy Default: 'all'

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.destory()

Close all connect, off event listener

Player

Provide the container to play the remote stream,

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

• hostElement <HTMLElement> any block element with fixed size
• onPlay <() => void> invoke when video play
• loadingBgImage <string> customize background loading image in app's loading stage
• 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.showLoadingText(msg)

• msg <string>

show message on loading element, append loading overlay element to player overlay element at first time

player.destory()

Remove created elementsh

Launcher

Automate start-up application by the HTTP request, setup Player and Connection instance, then attach listener and Instantiate Virtual Control after DataChannel open

new Launcher(option).automata([hostElement])

• hostElement <HTMLElement> any block element with fixed size

• option

| Field | Type | Description | | ---------------- | ----------------------------------- | --------------------------------------------------- | | appId | string | App ID | | token | string | room secret | | bitrate | number(optional) | append x-google-max-bitrate in creact offer | | minBitrate | number(optional) | x-google-min-bitrate(same as bitrate field) | | startBitrate | number(optional) | x-google-start-bitrate(same as bitrate field) | | virtualComponent | VirtualControlDisplayType(optional) | 1: display all;2:display fullscreen only;3:hide all |

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
  })
}

• If you use with cjs or esm module system, need to provide process.env.NODE_NEV at runtime