> For the complete documentation index, see [llms.txt](https://safenetwork.gitbook.io/safe-dev-tutorials/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://safenetwork.gitbook.io/safe-dev-tutorials/webrtc-video-chat-app/initialization.md).

# Initialization

First, you need to select a room, authorize the app and give it access to your webcam.

#### Contents

![Enter room ID](/files/-M2iQgTmjENsunp0sukD)

## Select a room

If you haven't selected a room yet, the app will prompt you to enter a room name. Alternatively, if you access a link that contains a [fragment identifier](https://en.wikipedia.org/wiki/Fragment_identifier) (e.g. `safe://mediawebrtc.ben#example`), the app will use it as the room name.

**App.js**

```javascript
this.state = {
  'room': location.hash.length > 1 ? location.hash.slice(1) : null,
  'randomRoom': roomNameGenerator()
}
```

## Authorize the app

Once the app knows what room you want to connect to, it sends an [authorization request](https://api.safedev.org/auth/) to SAFE Launcher.

#### [Authorize app](https://api.safedev.org/auth/authorize-app.html)

```
POST /auth
```

**store.js**

```javascript
safeAuth.authorise({
  'name': 'SAFE Signaling Demo',
  'id': APP_ID,
  'version': version,
  'vendor': 'MaidSafe Ltd.',
  'permissions': ['LOW_LEVEL_API']
},
  APP_ID)
```

For this example app, `APP_ID` has been set to `example.signaling.v1`.

**store.js**

```javascript
export const APP_ID = 'example.signaling.v1'
```

SAFE Launcher displays a prompt with basic information about the app along with the requested permission (`LOW_LEVEL_API`). You can authorize this request by clicking on "ALLOW".

![Authorization](/files/-M2iQgToM9HkLrQ4PvQY)

After you authorize the request, the app receives an authorization token.

## Check if an offer is present

If you are the first user to join a room (the person initiating the call), the app [creates an offer](/safe-dev-tutorials/webrtc-video-chat-app/create-an-offer.md) and tries to store it inside a structured data with an ID based on the name of the room. This offer includes a session description in [SDP](https://en.wikipedia.org/wiki/Session_Description_Protocol) format, and it needs to be [delivered to the call recipient](/safe-dev-tutorials/webrtc-video-chat-app/receive-an-offer.md) (the person receiving the call).

If you are joining a room where another user is waiting for you, the app needs to [receive an offer](/safe-dev-tutorials/webrtc-video-chat-app/receive-an-offer.md) from the caller (the person initiating the call). The app expects this offer to be stored inside a structured data with an ID based on the name of the room. The call recipient then [responds with an answer message](/safe-dev-tutorials/webrtc-video-chat-app/create-an-answer.md), which also contains an SDP description.

**Room.js**

```javascript
readData(this.props.room)
  .then((payload) => {
    this.setState({'peerPayload': payload, 'authorised': true})
  }).catch((err) => {
    console.log(err)
    this.setState({'peerPayload': false, 'authorised': true})
  })
```

### If an offer is found

The app [creates an answer](/safe-dev-tutorials/webrtc-video-chat-app/create-an-answer.md) and stores it inside a structured data with an ID based on the random ID provided by the caller.

### If an offer is not found

The app [creates an offer](/safe-dev-tutorials/webrtc-video-chat-app/create-an-offer.md) and tries to store it inside a structured data with an ID based on the name of the room.

## Request access to video devices

The app also prompts you for permission to use one video and one audio input device using the [MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method.

**VideoBlock.js**

```javascript
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    facingMode: 'user'
    // frameRate: { ideal: 10, max: 15 }
  }
})
```

![Requesting access to video devices](/files/-M2iQgTqoY1WVHEcqCRi)

After you click on "Allow", the app starts showing a video stream of your webcam.

![Waiting for another peer](/files/-M2iQgTsUfYjnANBIAJC)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://safenetwork.gitbook.io/safe-dev-tutorials/webrtc-video-chat-app/initialization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.