Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Bandwidth Samples
Copyright (c) 2023 Bandwidth Samples

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
Binary file removed Logo Icon.png
Binary file not shown.
40 changes: 5 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,14 @@
* [Pre-Requisites](#pre-requisites)
* [Running the Application](#running-the-application)
* [Environmental Variables](#environmental-variables)
* [Callback URLs](#callback-urls)
* [Ngrok](#ngrok)

# Description

A short description of your sample app and its capabilities.
A simple dial pad application used to create calls using our WebRTC SDK.

# Pre-Requisites

In order to use the Bandwidth API users need to set up the appropriate application at the [Bandwidth Dashboard](https://dashboard.bandwidth.com/) and create API tokens.

To create an application log into the [Bandwidth Dashboard](https://dashboard.bandwidth.com/) and navigate to the `Applications` tab. Fill out the **New Application** form selecting the service (Messaging or Voice) that the application will be used for. All Bandwidth services require publicly accessible Callback URLs, for more information on how to set one up see [Callback URLs](#callback-urls).
In order to use this sample app, your account must have In-App Calling enabled. You will also have to generate an auth token using our Identity API.

For more information about API credentials see our [Account Credentials](https://dev.bandwidth.com/docs/account/credentials) page.

Expand All @@ -26,40 +22,14 @@ For more information about API credentials see our [Account Credentials](https:/
Use the following command/s to run the application:

```sh
# start command here
yarn start
```

# Environmental Variables

The sample app uses the below environmental variables.

```sh
BW_ACCOUNT_ID # Your Bandwidth Account Id
BW_USERNAME # Your Bandwidth API Username
BW_PASSWORD # Your Bandwidth API Password
BW_NUMBER # The Bandwidth phone number involved with this application
USER_NUMBER # The user's phone number involved with this application
BW_VOICE_APPLICATION_ID # Your Voice Application Id created in the dashboard
BW_MESSAGING_APPLICATION_ID # Your Messaging Application Id created in the dashboard
BASE_CALLBACK_URL # Your public base url to receive Bandwidth Webhooks. No trailing '/'
LOCAL_PORT # The port number you wish to run the sample on
```

# Callback URLs

For a detailed introduction, check out our [Bandwidth Product Specific Callbacks](https://dev.bandwidth.com/docs/messaging/webhooks) page.

Below are the callback paths:
* **Should follow `/callbacks/{direction}/{service}` conventions**
* `<add other callbacks>`

## Ngrok

A simple way to set up a local callback URL for testing is to use the free tool [ngrok](https://ngrok.com/).
After you have downloaded and installed `ngrok` run the following command to open a public tunnel to your port (`$LOCAL_PORT`)

```sh
ngrok http $LOCAL_PORT
REACT_APP_IN_APP_CALLING_TOKEN # You Identity Token
REACT_APP_IN_APP_CALLING_NUMBER # A valid phone number on your account
```

You can view your public URL at `http://127.0.0.1:{LOCAL_PORT}` after ngrok is running. You can also view the status of the tunnel and requests/responses here.
1 change: 0 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
name="In-App Calling Dialpad Sample App"
content=""
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet">
<!--
Expand Down
12 changes: 4 additions & 8 deletions src/components/DialPad.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ import { BandwidthUA } from "@bandwidth/bw-webrtc-sdk";
import { useStopwatch } from 'react-timer-hook';

export default function DialPad() {
const authToken = process.env.REACT_APP_IDENTITY_TOKEN;
const defaultSourceNumber = process.env.BW_NUMBER; //?.replace(/\D/g, "");
console.log(defaultSourceNumber)
const authToken = process.env.REACT_APP_IN_APP_CALLING_TOKEN;
const defaultSourceNumber = process.env.REACT_APP_IN_APP_CALLING_NUMBER;
const destinationNumberNote = "Call international or domestic. Include area code and country code, but don't add the '+'";
const sourceNumberNote = "Enter a number on your BW account. Include area code and country code, but don't add the '+'";
const {
Expand All @@ -26,7 +25,7 @@ export default function DialPad() {
} = useStopwatch({ autoStart: false });

const [destNumber, setDestNumber] = useState('');
const [sourceNumber, setSourceNumber] = useState(`${defaultSourceNumber}`); // TODO: grab this from an env variable
const [sourceNumber, setSourceNumber] = useState(`${defaultSourceNumber}`);
const [destNumberValid, setDestNumberValid] = useState(false);
const [allowHangup, setAllowHangup] = useState(false);
const [phone, setPhone] = useState(new BandwidthUA());
Expand All @@ -51,7 +50,7 @@ export default function DialPad() {
serverConfig.iceServers
);

newPhone.setOAuthToken(authToken); // TODO: get this from the identity api
newPhone.setOAuthToken(authToken);
setPhone(newPhone);
},[authToken]);

Expand All @@ -62,10 +61,7 @@ export default function DialPad() {
switch ('cause' + cause) {
case "connected":
console.log("phone>>> loginStateChanged: connected");

setWebrtcStatus({ color: 'var(--green50)', text: "Connected to WebRTC Service" });


break;
case "disconnected":
console.log("phone>>> loginStateChanged: disconnected");
Expand Down
3 changes: 0 additions & 3 deletions src/logo.svg

This file was deleted.