Banuba WebAR SDK

This is JavaScript API Reference for Banuba WebAR SDK.

See here for JavaScript API Reference version <= 0.31.

Quickstart

import { Webcam, Player, Effect, Dom } from "./BanubaSDK.js"

const run = async () => {
  const player = await Player.create({ clientToken: "xxx-xxx-xxx" })
  player.use(new Webcam())
  player.applyEffect(new Effect("octopus.zip"))
  player.play()

  Dom.render(player, "#webar-app")
}

run()

Image capture

import { Webcam, Player, Effect, ImageCapture } from "./BanubaSDK.js"

const run = async () => {
  const player = await Player.create({ clientToken: "xxx-xxx-xxx" })
  player.use(new Webcam())
  player.applyEffect(new Effect("octopus.zip"))
  player.play()

  const capture = new ImageCapture(player)
  const photo = await capture.takePhoto()
}

run()

Video recording

import { Webcam, Player, Effect, VideoRecorder } from "./BanubaSDK.js"

const run = async () => {
  const player = await Player.create({ clientToken: "xxx-xxx-xxx" })
  player.use(new Webcam())
  player.applyEffect(new Effect("octopus.zip"))
  player.play()

  const recorder = new VideoRecorder(player)
  recorder.start()
  await new Promise(r => setTimeout(r, 5000)) // wait for 5 sec
  const video = await recorder.stop()
}

run()

Video call (via Agora)

import "./AgoraRTC_N-4.1.0.js"
import { Webcam, Player, Effect, MediaStreamCapture } from "./BanubaSDK.js"

const run = async () => {
  const player = await Player.create({ clientToken: "xxx-xxx-xxx" })
  player.use(new Webcam())
  player.applyEffect(new Effect("octopus.zip"))
  player.play()

  const stream = new MediaStreamCapture(player)
  const video = stream.getVideoTrack()

  const client = AgoraRTC.createClient({ mode: "live", role: "host", codec: "h264" })
  await client.join("AGORA APP ID", "CHANNEL NAME", null)
  await client.publish(video)
}

run()