***
id: 267f0b37-bacc-480b-a4e9-b2b297b2afe4
title: The SignalWire Client
sidebar-title: Client
slug: /js/reference/signalwire/client
max-toc-depth: 3
----------------
The SignalWire Client provides access to SignalWire's services on the browser. It provides methods to handle incoming calls, dial to addresses, and register devices for notifications.
## Instantiation \[#instantiation]
The SignalWire client is instantiated using the `SignalWire` function.
If you're including the `@signalwire/js` dependency as a script in HTML, the `SignalWire` function is a property of the `SignalWire` global variable that the script sets:
```html
```
If you installed `@signalwire/js` from npm:
```javascript
import { SignalWire } from "@signalwire/js";
async function main() {
const client = await SignalWire({
token: "",
});
}
```
For React or React Native projects, use the community library:
```jsx
import { useSignalWire } from "@signalwire-community/react";
export default function App() {
const client = useSignalWire({
token: "",
});
}
```
### Parameters
The [access token](/docs/browser-sdk/v3/js/reference/signalwire#authentication) for the subscriber.
The HTML container element where the SDK will display the video stream.
Callback functions for when a call is received. See [IncomingCallHandlers](#incomingcallhandlers).
Arbitrary variables that are transparent to FreeSWITCH.
You can manage the DOM yourself by not specifying a `rootElement` here and using the [`buildVideoElement`](/docs/browser-sdk/v3/js/reference/signalwire/utils#buildvideoelement) function instead.
### Example
```html
```
```jsx
import { useSignalWire } from "@signalwire-community/react";
// If you were using React Native, you'd import the same hook from
// the package `@signalwire-community/react-native`. Like so:
// import { useSignalWire } from "@signalwire-community/react-native";
import { useEffect } from "react";
export default function App() {
const client = useSignalWire({
token: "",
});
useEffect(() => {
if (!client) return; // client is not initialized yet
async function log() {
const conversations = await client.conversation.getConversations();
console.log(conversations);
const addresses = await client.address.getAddresses();
console.log(addresses);
}
log(); //useEffect doesn't directly support async effects; thus a subfunction
}, [client]);
return <>;
}
```
## Properties
Returns the URL of the host that the client will use to make HTTP requests (like querying the list of addresses or conversations). *Read-only.*
```javascript
console.log(client.httpHost());
// fabric.signalwire.com
```
## Methods
Dial to an address
Go online to receive call invites
Go offline to stop receiving call invites
Get info about the current subscriber
Connect the WebSocket client
Disconnect the WebSocket client
Update the auth token
## Namespaces
Certain methods and properties are organized into namespaces for clarity. They can be accessed as follows:
```js
client.address.getAddresses();
client.chat.getMessages();
client.conversation.getConversations();
```
Methods for working with addresses
Methods for chat functionality
Methods for conversations
## Type aliases
### IncomingCallHandlers \[#incomingcallhandlers]
Use this object to assign callback functions which get invoked when a call is received.
| Name | Type | Required? | Description |
| :---------- | :----------------------------------- | :-------- | :------------------------------------------------------------ |
| `all` | `(IncomingCallNotification) => void` | Optional | Since push support has been removed, identical to `websocket` |
| `websocket` | `(IncomingCallNotification) => void` | Optional | Callback for calls received via websocket (overrides `all`) |
***
### IncomingCallNotification \[#incomingcallnotification]
The object passed into the [IncomingCallHandlers](#incomingcallhandlers) callback with the call description and controls.
| Name | Type | Description |
| :--------------- | :------------------------------------------------ | :----------------------------------------------- |
| `invite` | `object` | - |
| `invite.details` | [IncomingInvite](#incominginvite) | The details of the invite. |
| `invite.accept` | `(CallOptions) => Promise` | Invoke this function to accept the incoming call |
| `invite.reject` | `() => Promise` | Invoke this function to reject the incoming call |
***
### IncomingInvite \[#incominginvite]
| Name | Type | Description |
| :------------------ | :------------ | :---------------------------------------- |
| `source` | `"websocket"` | |
| `callID` | `string` | Unique ID of the incoming call |
| `sdp` | `string` | *Deprecated* |
| `caller_id_name` | `string` | Name of the caller |
| `caller_id_number` | `string` | ID or number of the caller |
| `callee_id_name` | `string` | Name of the callee |
| `callee_id_number` | `string` | ID or number of the callee |
| `display_direction` | `string` | Direction of the call |
| `nodeId` | `string` | The node from where the call was received |
***
### CallOptions \[#calloptions]
| Name | Type | Required? | Description |
| :--------------------- | :--------------------------------- | :-------- | :--------------------------------------------------------------------------------------------------- |
| `rootElement` | `HTMLElement` | Optional | The HTML container element where the SDK will display the video stream. |
| `audio` | `boolean \| MediaTrackConstraints` | Optional | Media track constraints for audio. Passing `true` uses browser defaults, and `false` disables audio. |
| `video` | `boolean \| MediaTrackConstraints` | Optional | Media track constraints for video. Passing `true` uses browser defaults, and `false` disables video. |
| `disableUdpIceServers` | `boolean` | Optional | Disables the ICE UDP transport policy. |
| `userVariables` | `Record` | Optional | Arbitrary variables that are transparent to FreeSWITCH. |
***
### MediaStreamConstraints \[#mediastreamconstraints]
| Name | Type | Required? | Description |
| :----------------- | :--------------------------------- | :-------- | :--------------------------------------------------------------------------------------------------- |
| `audio` | `boolean \| MediaTrackConstraints` | Optional | Media track constraints for audio. Passing `true` uses browser defaults, and `false` disables audio. |
| `video` | `boolean \| MediaTrackConstraints` | Optional | Media track constraints for video. Passing `true` uses browser defaults, and `false` disables video. |
| `peerIdentity` | `string` | Optional | Peer identity. |
| `preferCurrentTab` | `boolean` | Optional | Whether to prefer current tab for the call. |
***
### CallFabricRoomSession \[#callfabricroomsession]
Extends [`RoomSession`](/docs/browser-sdk/v3/js/reference/video/room-session).
| Name | Type | Description |
| :------- | :--------------------------------- | :---------------------------------------------------------------------------------------------- |
| `start` | `() => void` | Starts the call. |
| `answer` | `boolean \| MediaTrackConstraints` | Answers the call (only works if the `CallFabricRoomSession` was a result of an incoming call). |
| `hangup` | `(id?) => void` | Ends the ongoing call by default. If the id of an `RTCPeer` is passed, hangs up that `RTCPeer`. |