Magnify is an open video conferencing application that illustrates how to create a basic multi-user video conferencing service that runs on the Internet Computer.
Before you build, deploy, and run the Magnify application, verify the following:
-
You have an internet connection and access to a shell terminal on your local macOS or Linux computer.
-
You have
+node.js+
installed if you want to include the files for front-end development in your project. -
You have the supported version of the DFINITY Canister SDK installed locally on your computer.
To download and install the supported version of the DFINITY Canister SDK, run the following command:
DFX_VERSION=0.5.8 sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"
To experiment with the Magnify sample application:
-
Open a terminal shell and change to the folder you are using for your Internet Computer sample projects.
-
Clone the
Magnify
repository.git clone https://github.com/Dfinity-Bjoern/Magnify
-
Change to the local working directory for the
Magnify
repository.cd Magnify
-
Install node modules by running the following command:
npm install
If necessary, run
npm audit fix
to fix any issues before continuing.
Before you can build the Magnify application, you need to connect to the Internet Computer network.
To connect to the network running locally:
-
Open a new terminal window or tab on your local computer and navigate to the Magnify directory.
You should have two terminals open with your project directory as your current working directory.
-
In the first terminal, start the Internet Computer locally by running the following command:
dfx start
-
Leave the terminal that displays network operations open and switch your focus to the second terminal.
To build and deploy Magnify:
-
In the second terminal, build the executable by running the following command:
dfx build
-
Deploy Msgnify on the local network by running the following command:
dfx canister install --all
You should see output similar to the following:
Installing code for canister magnify, with canister_id ic:05000000000000000000000000000000000185 Installing code for canister magnify_assets, with canister_id ic:060000000000000000000000000000000001FB
-
Copy the canister identifier for the
+magnify_assets+
canister to the clipboard or a notepad application.
To open Magnify in a browser:
-
Open a browser tab and navigate to the default host name and port, localhost:8000 or 127.0.0.1:8000.
-
Add
+/?canisterId=+
and paste the canister identifier for+magnify_assets+
to complete the URL.For example, the full URL should look similar to the following:
http://localhost:8000/?canisterId=ic:060000000000000000000000000000000001FB
-
Create a room and invite others to join you in the conference.
There are really only four files that an application developer would touch:
-
Backend:
a. The backend logic is in the Motoko-language file of the Canister
src/magnify/main.mo
b. There is a Motoko file with utility functions
src/magnify/Utils.mo
used bysrc/magnify/main.mo
-
Frontend:
a. The frontend (UX) is in the JavaScript file
src/manify_assets/public/index.js
b. The Styling of the UX is in the CSS file
src/manify_assets/public/styles.css
Magnify is based on two key technologies:
Magnify was created by a multi-national group of rebels called "Team Phantomias."