webrtc-streaming

webrtc-streaming Launcher

webrtc-streaming launcher

Quick start

import { Launcher } from "webrtc-streaming";

const address = "xxxxxx";
const replaceWs = "xxxxxx";
const appKey = "xxxxxxx";
let appSecret;
let launcher;

async function bootstrap() {
  const data = await handleShareInfo();
  const { temporaryCredentials } = data;
  const baseOptionsType = {
    address,
    replaceWs,
    appKey,
    appSecret,
    startType: 1,
    temporaryCredentials
  };

  const container = document.querySelector("body");
  document.querySelector("body").style.width = "100%";
  document.querySelector("body").style.height = "100%";

  const uiOptions = {
    onPlay: () => {
      console.log('出现了有效画面')
      //web端->应用
      launcher.launcherBase.connection.emitUIInteraction('发给应用的数据').then(res => {
        console.log(res ? '发送成功' : '发送失败')
      })
    },
    onChange: (cb) => {
      const { phase,fakePercent } = cb;
      console.log('百分比：',fakePercent)
      if (phase === "signaling-connected") {
        //应用->web端
        launcher.launcherBase.connection.interaction.on((res)=>{
          console.log('收到应用的数据：',res)
        })
      }
    };
  };
  launcher = new Launcher(baseOptionsType, container, uiOptions);
}
async function handleShareInfo() {
  const params = {
    appKey,
    appSecret,
  };
  var url = new URL(`${address}/api/front/share/info`);
  Object.keys(params).forEach(
    (key) => params[key] && url.searchParams.append(key, params[key])
  );
  return fetch(url)
    .then((response) => response.json())
    .then((res) => {
    if (res.result) {
      return res.data;
    }
  });
}
window.addEventListener('DOMContentLoaded', () => {
  if (
    navigator.userAgent.includes('miniProgram') ||
    navigator.userAgent.includes('MicroMessenger')
  ) {
    new Promise((resolve, reject) => {
      document.addEventListener('WeixinJSBridgeReady', resolve)
    }).then(bootstrap)
  } else {
    bootstrap()
  }
})

Play callback

// call when video element start to play
extendOptions: {
  onPlay: () => {
    //do something
  },
}

Adjust bandwidth

launcher.changeBandwidthByRenegotiation(
  10000, // medians bitrate kbps
)

Statistics

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)

ToggleFullscreen

/* NOTE: fullscreen need user activation gesture
 * @see https://html.spec.whatwg.org/multipage/interaction.html#user-activation-processing-model
 */
someTriggerElement.addEventListener('click', () => launcher.toggleFullscreen())

Destory

launcher.destory([errMsg])