Browser Voice | Realsee Developer Platform

Tip

This chapter uses the BrowserRTC implementation exported by @realsee/live@0.7.6 to enable co-viewing voice in a browser. Native App, WebView, and Mini Program integrations use different RTC implementations; see RTC and Environment.

Install Dependencies

Important

Browser voice uses the Live package's TRTC implementation and its declared peer dependencies.

npm install @realsee/live@0.7.6 @realsee/jsbridge-x@^0.2.6 trtc-js-sdk@^4.15.3

React Example

Initialize the RTC Instance

Add the code that initializes the RTC instance to the file where you create the co-viewing instance.

import { BrowserRTC, createLiveReact } from "@realsee/live";
import request from "../utils/request";

/*
 * Callback method for obtaining the voice signature: getVoiceSign
 * This method is invoked by the SDK internally with parameters; you only need to implement the method in this form.
 * [Special note]: The opts here is a formal parameter that the SDK injects automatically when it calls the voice signature method. Just write its reference as shown in the example; there is no need to inject the parameter yourself.
 * */
// highlight-start
const getVoiceSign = async (opts) => {
  // The opts here is a formal parameter that the SDK injects automatically when calling the voice signature method; the business side does not need to handle it.
  // highlight-end
  // Request your backend interface here. The request method below merely wraps fetch in a simple way, with no special handling.
  return await request("getRtcSign", {
    voice_id: opts.voiceId,
    room_id: opts.roomId,
    user_id: opts.userId,
  })
    .then((res) => {
      // Once you have the voice signature and other information returned by the backend, return it as required by the SDK.
      return {
        sdkAppId: Number(res.voice_app_id),
        userId: res.user_identifier,
        userSig: res.sign,
      };
    })
    .catch((error) => {
      throw Error(error.message);
    });
};

// Initialize the RTC instance
const rtcInstance = new BrowserRTC({ getVoiceSign });

const liveInstance = createLiveReact({
  __debug__: true,
  rtc: rtcInstance,
});

export default liveInstance;

Use VRWebViewRTC for native App or WebView containers, or provide an object that satisfies RTCProtocol for another environment. Both are exported from the package root.

Listening for Successful Voice Join

Info

Use the useRTCEventCallback hook provided by the co-viewing instance to listen for the voice-join-success event.

import LiveReact from "./LiveReact";

const { useRTCEventCallback } = LiveReact;

useRTCEventCallback("joined", () => {
  console.log("rtc -- joined");
});

Listening for Voice Errors

Info

Use the useRTCEventCallback hook provided by the co-viewing instance to listen for voice error messages.

import LiveReact from "./LiveReact";

const { useRTCEventCallback } = LiveReact;

useRTCEventCallback("error", (error) => {
  console.log("rtc -- error: ", error.message);
});