This repository provides a quick start project implemented with PlanetKit for Web.
This quick start project is based on WebPlanetKit 5.2.x.
PlanetKit is a client SDK for LINE Planet, which is a cloud-based real-time communications platform as a service (CPaaS) that helps you build a voice and video call environment. With LINE Planet, you can integrate call features into your service at minimum cost.
The system requirements of PlanetKit for Web are as follows.
- Node
- npm or yarn
- Supported browser
- Chromium 72+ based browser
- Safari 14.5+ (beta)
- Browser's device permission
This quick start project provides basic functionality of a group audio call.
- This guide uses Visual Studio Code (VS Code).
- You only need to install Node.js, as it includes npm.
- To generate an access token, you need a supported version of Python 3.x, currently 3.8 or higher.
In the actual implementation of your app, you have to ask us to register the domain you will serve.
-
To avoid CORS issues, you should use our domain registered for quick start.
-
This involves modifying the
hosts
file on your system. Follow the instructions below based on your operating system: -
For Windows users
-
Open Notepad as an Administrator. You can do this by searching for Notepad in the Start menu, right-clicking on it, and selecting "Run as administrator".
-
In Notepad, open the
hosts
file located atC:\Windows\System32\drivers\etc\hosts
. -
Scroll to the bottom of the file and add the following line:
127.0.0.1 planet-kit-quick-start.linecorp.com
-
Save the file and close Notepad.
-
-
For macOS users
-
Open Terminal.
-
Type the following command to open the
hosts
file in the nano editor (you can use any other text editor if you prefer):$ sudo nano /etc/hosts
-
You might be prompted to enter your password. Type it in, and then press Enter.
-
Scroll to the bottom of the file and add the following line:
127.0.0.1 planet-kit-quick-start.linecorp.com
-
Press
Ctrl + O
to save the file, thenEnter
to confirm, andCtrl + X
to exit nano.
-
After completing these steps, you will have successfully mapped the quick start domain (planet-kit-quick-start.linecorp.com
) to your localhost (127.0.0.1
).
Clone this repository, or download this repository and unzip the files.
In VS Code, open the directory of the repository you downloaded.
In this quick start project, we provide a script that generates an access token for your convenience. However, during the actual implementation of your app, the access token must be created in the AppServer. For more information, refer to Access token.
Generate an access token using generate_access_token.py
.
- The script requires a valid user ID as an argument. For the naming restrictions of a user ID, see User ID.
- Python package requirement for
generate_access_token.py
can be found inrequirements.txt
.- You can use the command
pip3 install -r requirements.txt
to install required packages.
- You can use the command
We recommend using a virtual environment for this step. For more information, see how to use venv.
$ python3 generate_access_token.py <YOUR_USER_ID>
access token: <GENERATED_ACCESS_TOKEN>
Copy and paste the user ID and access token into your code.
// GroupAudioCall/src/Constant.js
export const USER_ID = "<YOUR_USER_ID>";
export const ACCESS_TOKEN = "<GENERATED_ACCESS_TOKEN>";
To run the quick start project, ensure you are in the planet-kit-quickstart-web
directory. Follow these steps:
-
Open a terminal: Open a terminal app and navigate to the project directory.
$ cd /PATH/TO/planet-kit-quickstart-web
Alternatively, you can use the VS Code terminal.
-
Install dependencies: Before running the application, you must install the necessary dependencies. On the terminal, execute the following command:
$ npm install
This command will install all required dependencies listed in the
package.json
file into thenode_modules
folder. -
Start the application: After installing the dependencies, you can start the application by running:
$ npm run start:group-audio-call
Note: If you're using the VS Code terminal and encounter a pop-up requesting access to control your browser, select "Allow" to proceed. This permission enables the application to launch.
-
Open the web page: After starting the application, you can use the quick start app at
https://planet-kit-quick-start.linecorp.com:3000
.
Enter a room ID and click the JOIN button.
To join the call successfully, you must enter a valid room ID. For the naming restrictions of a room ID, see Room ID.
When you first run the app in your browser, you'll be prompted to grant permission to use your microphone. Click the "Allow" button to enable the call.
Once you're connected to the call, you can communicate with other participants.
If the group call cannot be connected, please check PlanetKitDisconnectReason.
You can use your browser's Developer Tools to check error messages and logs. Here's how to access them based on your operating system and browser:
-
For Chrome users (Windows)
- Open Chrome.
- Press
F12
orCtrl + Shift + I
on your keyboard. - Then, click on the "Console" tab.
-
For Chrome users (macOS)
- Open Chrome.
- Press
Cmd + Option + I
on your keyboard. - Then, click on the "Console" tab.
-
For Safari users
- Open Safari.
- Go to "Settings > Advanced" and check "Show features for web developers". Or, depending on your version of Safari, it could be "Show Develop menu in menu bar.
- Press
Cmd + Option + I
on your keyboard or select "Develop > Show Web Inspector" in the menu bar.
When running the app in a local environment, you might encounter a NET::ERR_CERT_AUTHORITY_INVALID
warning in your browser, indicating the site's security certificate is not trusted. This warning is common in local environments because the test domain specified in your hosts file (planet-kit-quick-start.linecorp.com
) does not have a corresponding valid SSL certificate recognized by your browser.
Since the warning occurs in a controlled local environment targeting planet-kit-quick-start.linecorp.com
mapped to 127.0.0.1
, it's safe to proceed because the connection is for local
.
- For Chrome users
- Click "Advanced" and select "Proceed to
planet-kit-quick-start.linecorp.com
(unsafe)".
- Click "Advanced" and select "Proceed to
- For Safari users
- Click "Show Details", then "visit this website".
If you've accidentally denied microphone access for the app, you can follow these steps to reset the permission and allow access:
-
For Chrome users
- Click the lock icon in the address bar near the website URL.
- Find the "Microphone" permission in the dropdown menu.
- Change the setting to "Allow".
- Refresh the webpage to apply the changes.
-
For Safari users
- Go to "Safari > Settings" in the menu bar.
- Click on the "Websites" tab and select "Microphone" from the side menu.
- Find the quick start domain and change its permission to "Allow".
- Refresh the webpage to apply the changes.
Please file any issues or inquiries you have to our representative or [email protected]. Your opinions are always welcome.
You can find answers to our frequently asked questions in the FAQ section.