# Browser Voice — Live

Connect browser-side Live voice through the built-in BrowserRTC implementation.

Canonical: https://developer.realsee.ai/docs/live/function-expansion/rtc/browser
Source: https://developer.realsee.ai/docs/live/function-expansion/rtc/browser.md
Language: en

> **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](https://developer.realsee.ai/docs/live/rtc-and-environment).

## Install Dependencies


> **important**

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

```bash npm2yarn
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.


**JavaScript**


```jsx
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.

```jsx
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.

```jsx
import LiveReact from "./LiveReact";

const { useRTCEventCallback } = LiveReact;

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