Rsowald/app kit (#43)

* adding React and Vue 3 AppKit integration demos * adding Vite example
signalwire · Nov 17, 2022 · a629779 · a629779
1 parent 7bc5de7
commit a629779
Show file tree

Hide file tree

Showing 11 changed files with 1,741 additions and 0 deletions.
diff --git a/Video/AppKit-Framework-Examples/Vite/.gitignore b/Video/AppKit-Framework-Examples/Vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Video/AppKit-Framework-Examples/Vite/README.md b/Video/AppKit-Framework-Examples/Vite/README.md
@@ -0,0 +1,21 @@
+# Using the AppKit with Vite.js
+
+This is the integration example of AppKit with Vite. We used `npm create vite@latest` and selected `Vanilla` and `JavaScript` when prompted. The scaffolding started us with the external file `main.js` where we could insert our `sw-video-conference` component with `innerHTML`.
+
+```js
+import "./style.css";
+import "@signalwire/app-kit";
+
+document.querySelector("#app")!.innerHTML = `
+<sw-video-conference
+token="vpt_25e...8dd"
+user-name="Guest"
+device-picker="true"
+ref="videoComponent"
+></sw-video-conference>
+`;
+```
+
+Just these few lines of code are enough to run a fully functional video conference room. To go one step forward and use the `setupRoomSession` callback function available on the `sw-video-conference` component, we used `document.createElement` to create the element, access the callback function, and get the Room Session object before adding it to the HTML.
+
+For a full guide to this implementation, see the blog [Video Conference AppKit: Vite Integration](https://signalwire.com/blogs/developers/video-conference-appkit-with-vite).
diff --git a/Video/AppKit-Framework-Examples/Vite/index.html b/Video/AppKit-Framework-Examples/Vite/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
diff --git a/Video/AppKit-Framework-Examples/Vite/main.js b/Video/AppKit-Framework-Examples/Vite/main.js
@@ -0,0 +1,17 @@
+import "@signalwire/app-kit";
+document.body.onload = addElement;
+
+function addElement() {
+  const roomSession = document.createElement("sw-video-conference");
+  roomSession.setAttribute("token", "vpt_25e...8dd");
+  roomSession.setAttribute("user-name", "Joe");
+  roomSession.setAttribute("device-picker", "false");
+  roomSession.setupRoomSession = (rs) => {
+    console.log("Setting up Room Session", rs);
+
+    rs.on("room.joined", (e) =>
+      console.log("Joined room:", e.room.display_name)
+    );
+  };
+  document.getElementById("app").append(roomSession);
+}