├── .gitignore
├── favicon.ico
├── .readme-assets
    └── janus-logo.png
├── check_curl.sh
├── package.json
├── local-webrtc-backend
    ├── run-page.js
    └── page.html
├── README.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .*.swp
3 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crisdosaygo/janus/HEAD/favicon.ico


--------------------------------------------------------------------------------
/.readme-assets/janus-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crisdosaygo/janus/HEAD/.readme-assets/janus-logo.png


--------------------------------------------------------------------------------
/check_curl.sh:
--------------------------------------------------------------------------------
1 | curl -v -H "Authorization: token $GH_ACCESS_TOKEN" \
2 |      -H "Accept: application/vnd.github.v3+json" \
3 |      "https://api.github.com/repos/00000o1/janus/issues?since=$(date --utc +%Y-%m-%dT%H:%M:%SZ)&state=open"
4 | 
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "dependencies": {
 3 |     "playwright": "^1.39.0"
 4 |   },
 5 |   "name": "janus",
 6 |   "description": "### Description:",
 7 |   "version": "1.0.0",
 8 |   "main": "local-webrtc-backend/run-page.js",
 9 |   "devDependencies": {},
10 |   "scripts": {
11 |     "test": "node local-webrtc-backend/run-page.js",
12 |     "postinstall": "npx playwright install"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/00000o1/janus.git"
17 |   },
18 |   "keywords": [
19 |     "janues",
20 |     "p2p",
21 |     "blog",
22 |     "p2p",
23 |     "chat",
24 |     "webrtc",
25 |     "github",
26 |     "develop"
27 |   ],
28 |   "author": "@dosy",
29 |   "license": "Apache-2.0",
30 |   "bugs": {
31 |     "url": "https://github.com/00000o1/janus/issues"
32 |   },
33 |   "homepage": "https://github.com/00000o1/janus#readme"
34 | }
35 | 


--------------------------------------------------------------------------------
/local-webrtc-backend/run-page.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | const os = require('os');
  4 | const fs = require('fs').promises;
  5 | const path = require('path');
  6 | const { chromium } = require('playwright');
  7 | const readline = require('readline');
  8 | 
  9 | // Set up readline interface
 10 | const rl = readline.createInterface({
 11 |   input: process.stdin,
 12 |   output: process.stdout,
 13 |   prompt: 'chat> '
 14 | });
 15 | 
 16 | (async () => {
 17 |   if ( ! process.env.GH_ACCESS_TOKEN || ! process.env.REPO_URL ) {
 18 |     console.error(`You need to set GH_ACCESS_TOKEN and REPO_URL environment variables so this script can poll for and write comments at your repo.`);
 19 |     return process.exit(1);
 20 |   }
 21 | 
 22 |   const tempDir = await createTempDir();
 23 |   const browser = await chromium.launchPersistentContext(tempDir, { 
 24 |     headless: true,
 25 |     args: [
 26 |       `--disable-web-security`, // disable CORS to make requests to GH API to poll
 27 |       `--enable-local-file-access`, // enable file access to blog files
 28 |     ]
 29 |   });
 30 |   const page = await browser.newPage();
 31 | 
 32 |   page.on('console', message => {
 33 |     const text = message.text();
 34 |     if (text.startsWith('CHAT_MSG')) {
 35 |       // Extracts the username and message from the formatted string
 36 |       const chatMessage = text.match(/^CHAT_MSG \[(.*?)\]: (.*)$/);
 37 |       if (chatMessage && chatMessage.length >= 3) {
 38 |         console.log(`${chatMessage[1]} says: ${chatMessage[2]}`);
 39 |       }
 40 |     } else {
 41 |       console.log('PAGE LOG:', text);
 42 |     }
 43 |     rl.prompt();
 44 |   });
 45 |   page.on('pageerror', error => {
 46 |     console.warn(`PAGE ERROR: `, error);
 47 |   });
 48 | 
 49 |   const {
 50 |     GH_ACCESS_TOKEN, 
 51 |     REPO_URL
 52 |   } = process.env;
 53 |   const filePath = path.resolve(process.cwd(), 'local-webrtc-backend', 'page.html');
 54 |   const creds = JSON.stringify({GH_ACCESS_TOKEN, REPO_URL});
 55 |   const fileUrl = `file://${filePath}?ghCreds=${encodeURIComponent(creds)}`;
 56 |   await page.goto(fileUrl);
 57 | 
 58 |   rl.prompt();
 59 | 
 60 |   process.on('SIGINT', cleanupNow);
 61 | 
 62 |   // Listen to command line input
 63 |   rl.on('line', async (line) => {
 64 |     const trimmedLine = line.trim();
 65 |     if (trimmedLine.startsWith('reply ') || trimmedLine.startsWith('@')) {
 66 |       const [command, ...messageParts] = trimmedLine.split(' ');
 67 |       let ghUsername;
 68 |       if ( command.startsWith('@') ) {
 69 |         ghUsername = command.slice(1);
 70 |       } else {
 71 |         ghUsername = messageParts.shift();
 72 |       }
 73 |       const message = messageParts.join(' ');
 74 |       await page.evaluate(({ghUsername, message}) => globalThis.sendMessageToClient(ghUsername, message), {ghUsername, message});
 75 |     } else if (trimmedLine === 'list') {
 76 |       const handles = await page.evaluate(() => Object.keys(clients));
 77 |       console.log(`Connected clients: ${handles}`);
 78 |     } else if ( trimmedLine == 'quit' ) {
 79 |       await cleanupNow();
 80 |       return;
 81 |     } else if ( trimmedLine.startsWith('kick') ) {
 82 |       const [command, handle] = trimmedLine.split(' ');
 83 |       await page.evaluate(handle => clients?.[handle]?.destroy?.(), handle);
 84 |     } else if ( trimmedLine.startsWith('ban') ) {
 85 |       const [command, handle] = trimmedLine.split(' ');
 86 |       await page.evaluate(handle => banList.add(handle), handle);
 87 |       await page.evaluate(handle => clients?.[handle]?.destroy?.(), handle);
 88 |     } else if ( trimmedLine == 'help' ) {
 89 |       console.log(`Available commands: help, reply | @<username>, list, quit, kick, ban`);
 90 |     } else {
 91 |       console.log('Unknown command.');
 92 |     }
 93 |     rl.prompt();
 94 |   });
 95 | 
 96 |   return await new Promise(resolve => 0); // Keep the script running
 97 | 
 98 |   async function cleanupNow() {
 99 |     console.log('Closing browser due to Ctrl+C');
100 |     setTimeout(() => rl.close(), 0);
101 |     await browser.close();
102 |     await cleanupTempUserDataDir(tempDir);
103 |     process.exit(0);
104 |   }
105 | })();
106 | 
107 | async function cleanupTempUserDataDir(tempDir) {
108 |   await fs.rm(tempDir, {
109 |     recursive: true,
110 |     force: true
111 |   });
112 | }
113 | 
114 | async function createTempDir() {
115 |   const tmpBaseDir = os.tmpdir();
116 |   const prefix = 'dosyago.janus_';  // Replace 'yourPrefix_' with your desired prefix
117 | 
118 |   try {
119 |     const tmpDir = await fs.mkdtemp(path.join(tmpBaseDir, prefix));
120 |     return tmpDir;
121 |   } catch (err) {
122 |     console.error('Failed to create temporary directory:', err);
123 |     throw err;  // Re-throw the error if necessary
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | **💎 Demo of WebRTC signalling occuring on GH comments:** https://github.com/00000o1/janus/issues/68 
  2 | 
  3 | <img src=.readme-assets/janus-logo.png alt="Janus Logo" width=500>
  4 | 
  5 | ## Janus - Simple P2P Blog and Developer P2P Chat on GitHub
  6 | 
  7 | Janus combines WebRTC's peer-to-peer capabilities with GitHub's API to create a unique platform for developer collaboration. This tool allows developers to host a P2P blog and chat from their terminal and engage in chat sessions directly from GitHub, offering a new approach to collaboration and real-time communication.
  8 | 
  9 | It began as a crazy experiment to answer the question: *What about a P2P blog?*
 10 | 
 11 | As it developed, interest also grew in the question: *How much can the friction of a human-mediated signaling channel in WebRTC be reduced?*
 12 | 
 13 | Check it out. Many simple affordances have been provided to make establishing a P2P connection using issue comments as the signaling method as friction-free as possible.
 14 | 
 15 | ### What is Janus?
 16 | 
 17 | Apart from being [a Roman God associated with doors, gates, transitions, beginnings, time, duality, passages, frames, and endings](https://en.wikipedia.org/wiki/Janus), Janus serves blog content, and chat, over a P2P connection. You can add blog content to the blog section in `./local-webrtc-backend/page.html`
 18 | 
 19 | Janus is all about facilitating direct, real-time interactions between developers. By running a simple HTML page (`page.html`) as a WebRTC server that handles a blog and chat, you can establish live chats with other developers who initiate contact through GitHub issues. 
 20 | 
 21 | If you run a Janus back-end chat messages reach you in the terminal and that's where you respond to them. For connecting clients, they chat through a static web interface on GitHub pages.
 22 | 
 23 | This seamless integration with GitHub issues makes Janus a unique tool for developers looking for a decentralized, in-band method of collaboration.
 24 | 
 25 | ### Features at a Glance:
 26 | 
 27 | - **P2P Blog**: Share your thoughts and updates directly from your machine to your audience's browser.
 28 | - **Developer Chat**: Engage in real-time chat with anyone who opens (or re-opens) an issue in your Janus-enabled repository when you're running the backend.
 29 | - **GitHub API Integration**: Uses GitHub issues as a novel way to initiate and manage P2P connections.
 30 | 
 31 | ### Getting Started with Janus:
 32 | 
 33 | #### Setup
 34 | 
 35 | 1. Clone the Janus repository, and switch on GitHub pages. 
 36 | 2. Locally set up environment variables `GH_ACCESS_TOKEN` and `REPO_URL`.
 37 | 3. **[optional]** Add an **Office Hours: ** line to the top of your README (or to a pinned issue) indicating when you'll be online to chat (erm, unless it's always :laughing:)
 38 | 
 39 | Please note, the access token should be a GitHub Personal Access Token scoped to the specific repo of your Janus fork and provided with repository read, and issues read & write access. You can create such tokens under the Developer Settings tab in your GitHub profile settings.
 40 | 
 41 | #### Running Janus
 42 | 
 43 | 1. Start the `./local-webrtc-backend/run-page.js` script.
 44 | 2. The script polls your repository for new issues, facilitating P2P connections for chat and blog content sharing. Every open issue is treated as a chat request when you are running the janus backend.
 45 | 
 46 | #### Interacting with Janus
 47 | 
 48 | - **Blog Content**: Write and serve your blog content through `./local-webrtc-backend/page.html`.
 49 | - **Chat Interface**: Access the chat through the command line interface provided by `run-page.js`.
 50 | 
 51 | ### Chat Interface Commands
 52 | 
 53 | - **`list`**: list connected clients
 54 | - **`reply <username> <... your message...>`**: reply to a connected user
 55 | - **`@<username> <... your message...>`**: alias for reply
 56 | - **`quit`**: exit and shutdown janus back-end. *Please note: sometimes you might need to combine `quit` with `Ctrl-C`*
 57 | - **`help`**: display commands
 58 | - **`kick <username>`**: disconnect a user
 59 | - **`ban <username>`**: ban a user for this session
 60 | 
 61 | *Note: for perma-bans we suggest using GitHub's block capability. That will prevent users from opening issues in your repository.*
 62 | 
 63 | ### Hot Tips & Info: Maximizing Janus
 64 | 
 65 | To help you make the most of Janus, here's a quick executive summary of key points:
 66 | 
 67 | 1. **Running Janus**: As a project maintainer, simply run the backend following the instructions provided here. It's been tested on MacOS and Debian. It's basically just single file node app, check out the code to learn mode. For other developers seeking to chat with the maintainer, open (or re-open) an issue when the maintainer is available for chat. A chat post link will be generated in the issue, which, when clicked, opens the chat in your browser, connecting you with the maintainer.
 68 | 
 69 | 2. **Practical Applications of Janus**:
 70 |    - **Project Office Hours**: Schedule regular times for open discussion, creating a personal and private environment for project-related conversations.
 71 |    - **Project Support Chat**: Offer an alternative to traditional issue tracking for private, ephemeral conversations regarding project support.
 72 |    - **Remote Pairing and GitHub Socializing**: Leverage Janus for remote collaboration or to connect with inspiring GitHub community members in a more personal and instantaneous manner.
 73 |    - **Secure, Non-cloud Hosted Communication**: Ideal for sensitive information exchange, like API keys or banking details, providing a secure channel beyond the reach of traditional cloud services.
 74 |    - **Anonymous Chat**: For those requiring a level of anonymity, Janus offers a platform where users can chat without revealing personal or organizational identities, while still tied to their GitHub accounts.
 75 | 
 76 | 3. **Authentication and Security**: Janus is designed with security at its core. The connection is initiated exclusively by the account that opens the issue, preventing impersonation. Additionally, GitHub's blocking features are integrated, allowing repository owners to prevent unwanted chat requests.
 77 | 
 78 | 4. **Troubleshooting**: Becuase of the nature of WebRTC in some cases (some networks, devices, OSes) it may not be possible to establish a P2P connection. In those cases Janus will not work!
 79 | 
 80 | ### Exciting New Features on the Horizon for Janus!
 81 | 
 82 | As we continue to innovate with Janus, our focus remains on enhancing the GitHub collaboration experience. We're thrilled to share a sneak peek into some of the potential features that might find their way into future versions of Janus:
 83 | 
 84 | 1. **Namespaced Chat**: We're exploring the possibility of introducing namespaced chat. This feature would allow users to seamlessly transition into a dedicated chat namespace with another user, simplifying one-on-one communication. Just imagine, no more repetitive tagging in each message. Jump in and out of chat rooms with ease – a perfect blend of convenience and functionality.
 85 | 
 86 | 2. **Multi-User Rooms**: While Janus primarily facilitates one-on-one interactions, akin to phone calls, we recognize the value of group discussions. Hence, we're considering the addition of multi-user rooms for those occasional 'conference calls' within the GitHub ecosystem.
 87 | 
 88 | We're happy to review contributions in these areas for possible inclusion! Of course, you're free to modify your own version to suit your needs.
 89 | 
 90 | ### What is P2P ?
 91 | 
 92 | P2P means point-to-point, and it indicates a direct connection between parties, that avoids going through any intermediate servers like a regular centralized chat service. In Janus, P2P is enabled by WebRTC data channels. While there are some edge cases that go through servers that help to route the traffic, in most cases P2P via WebRTC is a direct message channel between the two parties. It's also worth remembering that WebRTC is encrypted and secure.
 93 | 
 94 | ### Why Janus? An In-Band GitHub Solution:
 95 | 
 96 | We've observed the frequent need for real-time collaboration in open-source projects, often leading developers off-site to external platforms. Janus seeks to eliminate this diversion, offering an on-site, in-band solution that's simple, empowering, and decentralized.
 97 | 
 98 | Our vision extends beyond mere chatting. Imagine sending and receiving files, collaborating on code directly through this platform, or even integrating collaborative editors. The possibilities are limitless!
 99 | 
100 | Though we're unaffiliated with GitHub, we dream of a day when GitHub embraces Janus, providing a dedicated API endpoint to streamline the user experience. Imagine P2P developer chat as a first-class citizen on GitHub - enhancing productivity, happiness, and the overall developer experience.
101 | 
102 | ### Dreaming Bigger
103 | 
104 | Our vision for Janus extends into realms yet unexplored. From file transfers, direct code collaboration, to integrating collaborative editors – the potential is limitless. Unaffiliated with GitHub, we nonetheless aspire to a future where Janus and GitHub are more closely intertwined, with dedicated API support to enhance this unique developer experience.
105 | 
106 | Stay tuned for more updates as we continue to shape the future of GitHub collaboration with Janus! 🚀💻🌐
107 | 
108 | ### Future Directions:
109 | 
110 | Janus is an evolving project with goals to expand its capabilities, including file sharing for code collaboration and broader repository support. We aim to streamline the developer experience on GitHub, making P2P interaction a natural part of the platform.
111 | 
112 | ### Contributing to Janus
113 | 
114 | Your contributions can help shape the future of Janus. Whether it's code, ideas, or feedback, we welcome your input. 
115 | 
116 | Janus is more than just a tool; it's a step towards a more connected and interactive open-source community. Join us in this exciting journey to reshape developer collaboration on GitHub.
117 | 
118 | #### Cool Unaffiliated Projects also called Janus
119 | 
120 | Serendipitously there is another pre-existing WebRTC project called Janus: [Janus-Gatway WebRTC Server is an open source, general purpose, WebRTC server designed and developed by Meetecho - the RTC experts.](https://github.com/meetecho/janus-gateway). While we don't know anything about them, they're popular and it's cool they use the same name. You should check them out! :)
121 | 
122 | -----
123 | 
124 | **Like WebRTC? You might be interested in another project I work on that uses it: [BrowserBox/BrowserBox - a remote browser](https://github.com/BrowserBox/BrowserBox)** Reach out: [Email us](mailto:cris@dosyago.com)
125 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name=viewport content=width=device-width,initial-scale=1,user-scalable=no>
  6 |   <link rel=icon href=./favicon.ico>
  7 |   <title>Janus - P2P Blog & Chat</title>
  8 |   <script src="https://cdn.jsdelivr.net/npm/latent-peer@10.1/build.js"></script>
  9 |   <style>
 10 |     body {
 11 |       font-family: Arial, sans-serif;
 12 |       background-color: #f4f4f4;
 13 |       color: #333;
 14 |     }
 15 |     #chat {
 16 |       max-width: 600px;
 17 |       margin: 20px auto;
 18 |       background-color: #fff;
 19 |       border: 1px solid #ddd;
 20 |       border-radius: 4px;
 21 |       padding: 10px;
 22 |       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 23 |       display: flex;
 24 |       flex-direction: column;
 25 |     }
 26 |     .input-line {
 27 |       display: flex;
 28 |     }
 29 |     .input-line > * {
 30 |       margin: 0;
 31 |     }
 32 |     #chat-window {
 33 |       box-sizing: border-box;
 34 |       width: 100%;
 35 |       height: 300px;
 36 |       font-size: 1rem;
 37 |       background-color: #eaeaea;
 38 |       border: none;
 39 |       padding: 10px;
 40 |       overflow-y: auto;
 41 |       overflow-x: hidden;
 42 |       resize: none;
 43 |       border-radius: 0.25rem;
 44 |     }
 45 |     #chat-input {
 46 |       flex-grow: 1;
 47 |       padding: 10px;
 48 |       border: 1px solid #ddd;
 49 |       border-radius: 4px;
 50 |     }
 51 |     #send-button {
 52 |       background-color: #007bff;
 53 |       color: white;
 54 |       border-radius: 4px;
 55 |       cursor: pointer;
 56 |     }
 57 |     #send-button:hover {
 58 |       background-color: #0056b3;
 59 |     }
 60 |     #blog {
 61 |       max-width: 600px;
 62 |       margin: 20px auto;
 63 |     }
 64 |     :is(input, button):active {
 65 |       outline: 1px solid blue;
 66 |     }
 67 |     .connection-status {
 68 |       text-align: center;
 69 |       margin-top: 20px;
 70 |     }
 71 |     .progress-bar {
 72 |       width: 100%;
 73 |       background-color: #e0e0e0;
 74 |       border-radius: 4px;
 75 |       overflow: hidden;
 76 |     }
 77 | 
 78 |     .progress-indeterminate {
 79 |       width: 30%;
 80 |       height: 5px;
 81 |       background-color: #007bff;
 82 |       animation: progress-indeterminate 2s linear infinite;
 83 |     }
 84 | 
 85 |     @keyframes progress-indeterminate {
 86 |       0% {
 87 |         margin-left: -30%;
 88 |         margin-right: 100%;
 89 |       }
 90 |       50% {
 91 |         margin-left: 100%;
 92 |         margin-right: -30%;
 93 |       }
 94 |       100% {
 95 |         margin-left: 100%;
 96 |         margin-right: -30%;
 97 |       }
 98 |     }
 99 |   </style>
100 | </head>
101 | <body>
102 |   <div class="connection-status" style="cursor: wait;">Generating your p2p locator...</div>
103 |   <div class="progress-bar">
104 |     <div class="progress-indeterminate"></div>
105 |   </div>
106 |   <div id="chat">
107 |     <textarea id="chat-window" readonly></textarea>
108 |     <div class=input-line>
109 |       <input autofocus required type="text" id="chat-input" placeholder="" maxlength=1024>
110 |       <button id="send-button">Send</button>
111 |     </div>
112 |   </div>
113 |   <section id="blog"></section> <!-- Blog content will be inserted here -->
114 |   <script>
115 |     window.addEventListener('beforeunload', function (e) {
116 |       // Cancel the event
117 |       e.preventDefault(); 
118 |       // Chrome requires returnValue to be set
119 |       e.returnValue = 'Leaving this page will destroy the P2P connection. Are you sure?';
120 |     });
121 |   </script>
122 |   <script>
123 |     const Decoder = new TextDecoder('utf-8');
124 |     const urlParams = new URL(location).searchParams;
125 |     const signalData = urlParams.get('data');
126 |     const issueUrl = urlParams.get('issue');
127 |     const alertBoxMessage = `Your p2p locator is now in your clipboard. Paste it into the comment on the issue.\n\nWhen you close this dialog we will return you to the issue.\n\nPlease note: if you close this chat page you will end the p2p connection.`;
128 |     let peer;
129 |     let stream;
130 |     let chatWindow;
131 |     let input;
132 |     let status;
133 |     let send;
134 |     let signalWindow;
135 | 
136 |     document.addEventListener('DOMContentLoaded', async () => {
137 |       chatWindow = document.getElementById('chat-window');
138 |       input = document.getElementById('chat-input');
139 |       status = document.querySelector('.connection-status');
140 |       progressBar = document.querySelector('.progress-bar');
141 |       send = document.getElementById('send-button');
142 | 
143 |       send.addEventListener('click', () => {
144 |         const message = input.value.trim().substring(0, 1024); // Limit to 1024 chars
145 |         if (message && peer) {
146 |           peer.send(JSON.stringify({ type: 'chat', msg: message }));
147 |           chatWindow.value += `Me: ${message}\n`; // Display own messages
148 |           input.value = '';
149 |           input.focus();
150 |           scrollToBottom(chatWindow);
151 |         }
152 |       });
153 | 
154 |       input.addEventListener('keypress', pressed => {
155 |         if ( pressed.key == "Enter" ) {
156 |           send.click();
157 |         }
158 |       });
159 | 
160 |       if (signalData) {
161 |         if ( isSafariBrowser() ) {
162 |           await requestMediaAccess();
163 |         }
164 | 
165 |         let maxRetries = 1;
166 |         let i = 0;
167 |         while(! (await establishConnection())) {
168 |           console.log(`Retrying in 3 seconds...`);
169 |           await sleep(3000);
170 |           if ( i++ > maxRetries ) break;
171 |         }
172 | 
173 |         async function establishConnection() {
174 |           let resolve;
175 |           const pr = new Promise(res => resolve = res);
176 | 
177 |           peer = new SimplePeer({ 
178 |             trickle: false, 
179 |             initiator: false,
180 |           });
181 | 
182 |           peer.on('signal', async data => {
183 |             const signalData = btoa(JSON.stringify(data));
184 |             const janusLink = `janus://p2p_locator/${signalData}`;
185 |             requestAnimationFrame(() => {
186 |               status.innerText = "p2p locator ready!";
187 |               status.style.cursor = 'default';
188 |               progressBar.remove();
189 |             });
190 |             await copyToClipboard(janusLink, () => {
191 |               alert(alertBoxMessage);
192 |               signalWindow = window.open(issueUrl, '_blank');
193 |             });
194 |           });
195 | 
196 |           peer.on('connect', () => {
197 |             console.log('Connected to peer!');
198 |             status.innerText = 'Connected';
199 |             chatWindow.value = "";
200 |             window.focus();
201 |             let hasAlerted = false;
202 | 
203 |             setTimeout(() => resolve(true), 0);
204 | 
205 |             // Stop any media as it's not used
206 |             if ( stream ) {
207 |               setTimeout(() => stream.getTracks().forEach(track => track.stop()), 15000);
208 |             }
209 | 
210 |             // close the signal window
211 |             signalWindow?.close?.();
212 | 
213 |             function showAlert() {
214 |               if (!hasAlerted) {
215 |                 setTimeout(() => alert('Connected'), 500);
216 |                 hasAlerted = true;
217 |               }
218 |             }
219 | 
220 |             document.addEventListener("visibilitychange", () => {
221 |               if (document.visibilityState === 'visible') {
222 |                 showAlert();
223 |               }
224 |             }, { once: true });
225 | 
226 |             window.addEventListener("focus", showAlert, { once: true });
227 |           });
228 | 
229 |           peer.on('data', data => {
230 |             data = data.toString();
231 |             console.log('Received message:', data);
232 |             try {
233 |               const message = JSON.parse(data);
234 |               if (message.type === 'blog') {
235 |                 document.getElementById('blog').innerHTML = message.content;
236 |               } else if (message.type === 'chat') {
237 |                 chatWindow.value += `${message.handle || 'Me'}: ${message.msg}\n`;
238 |                 scrollToBottom(chatWindow);
239 |               }
240 |             } catch(e) {
241 |               console.warn(`Could not parse message:`, e, JSON.stringify(data).slice(0, 140));
242 |             }
243 |           });
244 | 
245 |           peer.on('close', () => {
246 |             console.info(`P2P closed`);
247 |             resolve(false);
248 |             setTimeout(() => stream.getTracks().forEach(track => track.stop()), 0);
249 |             status.innerText = 'Disconnected';
250 |           });
251 | 
252 |           peer.on('error', err => {
253 |             console.error('P2P Error:', err);
254 |             resolve(false); 
255 |             setTimeout(() => stream.getTracks().forEach(track => track.stop()), 0);
256 |             status.innerText = 'Disconnected';
257 |           });
258 | 
259 |           try {
260 |             const decodedData = JSON.parse(atob(signalData));
261 |             peer._pc.restartIce();
262 |             peer.signal(decodedData);
263 |           } catch (err) {
264 |             console.error('Error parsing signaling data:', err);
265 |           }
266 | 
267 |           return pr;
268 |         }
269 |       } else {
270 |         console.error('No signaling data found in URL.');
271 |       }
272 |     });
273 | 
274 |     async function copyToClipboard(text, onSuccess) {
275 |       const tryClipboardCopy = async () => {
276 |         try {
277 |           await navigator.clipboard.writeText(text);
278 |           onSuccess();
279 |         } catch (err) {
280 |           console.error('Could not copy signal data to clipboard:', err);
281 |           // Fallback to execCommand in Safari or manual copy
282 |           tryExecCommandCopy();
283 |         }
284 |       };
285 | 
286 |       const tryExecCommandCopy = () => {
287 |         const chatWindow = document.querySelector('#chat-window');
288 |         chatWindow.value = text;
289 |         chatWindow.focus();
290 |         chatWindow.select();
291 |         try {
292 |           if (document.execCommand('copy')) {
293 |             onSuccess();
294 |           } else {
295 |             throw new Error('ExecCommand failed');
296 |           }
297 |         } catch (e) {
298 |           console.error('Fallback copy method failed', e);
299 |           alert('Please manually copy the selected text in the textbox');
300 |           setupManualCopyListener();
301 |         }
302 |       };
303 | 
304 |       const setupManualCopyListener = () => {
305 |         document.addEventListener('copy', function onCopy(event) {
306 |           if (event.target === document.querySelector('#chat-window')) {
307 |             document.removeEventListener('copy', onCopy);
308 |             onSuccess();
309 |           }
310 |         });
311 |       };
312 | 
313 |       // Safari needs a user gesture to allow clipboard API
314 |       if (isSafariBrowser() || !window.isSecureContext) {
315 |         await sleep(300);
316 |         alert('When you close this dialog, please tap the screen to copy your locator to the clipboard.');
317 |         document.onclick = async () => {
318 |           document.onclick = null; // Remove this handler after the click
319 |           await tryClipboardCopy();
320 |         };
321 |       } else {
322 |         await tryClipboardCopy();
323 |       }
324 |     }
325 | 
326 |     async function sleep(ms) {
327 |       return new Promise(res => setTimeout(res, ms));
328 |     }
329 | 
330 |     function isSafariBrowser() {
331 |       return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
332 |     }
333 | 
334 |     function scrollToBottom(element) {
335 |       element.scroll({
336 |         top: element.scrollHeight,
337 |         behavior: 'smooth'
338 |       });
339 |     }
340 | 
341 |     // this func is needed due to a quirk in mobile Safari 
342 |     async function requestMediaAccess() {
343 |       try {
344 |         // Check if the device is mobile
345 |         if (deviceIsMobile()) {
346 |           // Check current permission states for microphone and camera
347 |           const micPerm = await navigator.permissions.query({ name: 'microphone' });
348 | 
349 |           if (micPerm.state !== 'granted') {
350 |             // Show explainer only if permissions haven't been granted yet
351 |             alert('Due to a quirk in iOS Safari, we need media permissions to enable P2P chat. ' +
352 |                   'We will stop the tracks immediately, as we don\'t use the stream.');
353 |           }
354 | 
355 |           // Request media access for audio on mobile devices
356 |           stream = await navigator.mediaDevices.getUserMedia({ audio: true });
357 | 
358 |           // If permissions were not already granted, inform the user they can revoke them
359 |           if (micPerm.state !== 'granted') {
360 |             alert(`Media access granted.\n\nIf you don't want to be asked again, you can click on the red mic icon, then on Website Settings, then on Audio, and click Allow.\n\nFor privacy we will shut your mic as soon as the connection is made, and the mic icon will disappear.\n\nBut for convenience, we'll give you around 10 seconds after that, in case you wish to click the icon to set Allow.`);
361 |           }
362 |         }
363 |       } catch (error) {
364 |         console.error('Media access error:', error);
365 |         alert('Unfortunately, in Mobile Safari we can not create the P2P connection without media access. You may reload to try again if you wish.');
366 |         throw new Error('Failed to get media access');
367 |       }
368 |     }
369 | 
370 |     // Utility function to determine if the device is mobile
371 |     function deviceIsMobile() {
372 |       return /iPhone|iPad|iPod/i.test(navigator.userAgent);
373 |     }
374 |   </script>
375 | </body>
376 | </html>
377 | 
378 | 


--------------------------------------------------------------------------------
/local-webrtc-backend/page.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>WebRTC Server Page</title>
  6 |   <script src="https://cdn.jsdelivr.net/npm/latent-peer@10.1/build.js"></script>
  7 | </head>
  8 | <body>
  9 |   <h1>WebRTC 'Server'</h1>
 10 |   <section id="blog">
 11 |     <!-- Example blog content ( this whole blog section element will be sent over the wire ) -->
 12 |     <style>
 13 |         /* Basic styles for blog */
 14 |         #blog {
 15 |             font-family: Arial, sans-serif;
 16 |             max-width: 600px;
 17 |             margin: 20px auto;
 18 |         }
 19 |         .article {
 20 |             margin-bottom: 40px;
 21 |         }
 22 |         .article h2 {
 23 |             color: #333;
 24 |         }
 25 |         .article p {
 26 |             color: #666;
 27 |         }
 28 |     </style>
 29 |     <div class="article">
 30 |         <h2>Exploring the Mysteries of UFOs</h2>
 31 |         <p>Written by AI: Unidentified Flying Objects have always stirred the curiosity of humankind. Are we alone in the universe or is there life beyond our planet?...</p>
 32 |     </div>
 33 |     <div class="article">
 34 |         <h2>The Joy of Cooking</h2>
 35 |         <p>Written by AI: Cooking is not just a necessity; it's an art. Exploring different cuisines opens up a world of flavors and experiences...</p>
 36 |     </div>
 37 |     <div class="article">
 38 |         <h2>Latest Gadgets in Tech</h2>
 39 |         <p>Written by AI: The world of technology is ever-evolving, and the latest gadgets offer a glimpse into the future. From AI-driven devices to smart home systems...</p>
 40 |     </div>
 41 |     <div class="article">
 42 |         <h2>Best Books to Read This Year</h2>
 43 |         <p>Written by AI: Whether you're into fiction, non-fiction, or anything in between, there's always a good book waiting to be read. Here are some top picks for the year...</p>
 44 |     </div>
 45 |     <div class="article">
 46 |         <h2>Traveling the World</h2>
 47 |         <p>Written by AI: Traveling opens up new horizons, offering a glimpse into diverse cultures, landscapes, and experiences. Let's explore some must-visit destinations...</p>
 48 |     </div>
 49 |     <div class="article">
 50 |         <h2>Developer Topics: Staying Ahead</h2>
 51 |         <p>Written by AI: In the ever-changing world of software development, staying updated with the latest trends and technologies is key. Let's dive into some important topics for developers...</p>
 52 |     </div>
 53 |   </section>
 54 |   <script>
 55 |     // Parse URL parameters to get GitHub credentials
 56 |     const startTime = new Date().toISOString();
 57 |     const urlParams = new URLSearchParams(window.location.search);
 58 |     const ghCreds = JSON.parse(decodeURIComponent(urlParams.get('ghCreds')));
 59 |     const ghAccessToken = ghCreds.GH_ACCESS_TOKEN;
 60 |     const repoUrl = ghCreds.REPO_URL;
 61 |     const inprocessConnections = new Map();
 62 |     const DEBUG = {
 63 |       verbose: false,
 64 |     };
 65 |     const [ username, repoName ] = new URL(repoUrl).pathname.split('/').filter(part => part.length);
 66 |     const banList = new Set();
 67 |     let clients = {}; // Map to hold ghUsername to peer mapping
 68 | 
 69 |     // Function to send message to a specific client
 70 |     window.sendMessageToClient = (ghUsername, message) => {
 71 |       const peer = clients[ghUsername];
 72 |       if (peer) {
 73 |         peer.send(JSON.stringify({type: 'chat', msg: message, handle: username}));
 74 |       } else {
 75 |         console.error('Client not found:', ghUsername);
 76 |       }
 77 |     };
 78 | 
 79 |     window.ghAccessToken = ghAccessToken;
 80 |     window.repoUrl = repoUrl;
 81 |     window.clients = clients;
 82 |     window.banList = banList;
 83 | 
 84 |     if (!ghAccessToken) {
 85 |       console.error('GitHub access token not found!');
 86 |     } else {
 87 |       DEBUG.verbose && console.log('GitHub access token retrieved.');
 88 |       pollGitHubAPI(repoUrl, ghAccessToken);
 89 |     }
 90 | 
 91 |     async function pollGitHubAPI(repoUrl, accessToken) {
 92 |       repoUrl = new URL(repoUrl.replace(/\/$/, '')).href;
 93 |       let lastChecked = new Date().toISOString();
 94 |       let commentCheckTimes = new Map(); // Map to keep track of processed issues and comment check times
 95 | 
 96 |       setInterval(async () => {
 97 |         DEBUG.verbose && console.log(`Checking issues`);
 98 |         const response = await fetch(`https://api.github.com/repos/${username}/${repoName}/issues?since=${lastChecked}&state=open`, {
 99 |           headers: {
100 |             'Authorization': `token ${accessToken}`,
101 |             'Accept': 'application/vnd.github.v3+json'
102 |           }
103 |         });
104 |         const issues = await response.json();
105 |         lastChecked = new Date().toISOString();
106 | 
107 |         if (issues.length > 0) {
108 |           DEBUG.verbose && console.log('Updated issues:', issues.map(issue => `#${issue.number}`));
109 |           for (const issue of issues) {
110 |             const ghUsername = issue.user.login; // Extract GitHub username
111 |             let lastCheckedForComments = commentCheckTimes.get(issue.number) || startTime;
112 |             DEBUG.verbose && console.log(`Checking comments for issue #${issue.number}`);
113 | 
114 |             const commentsResponse = await fetch(`${issue.comments_url}?since=${lastCheckedForComments}`, {
115 |               headers: {
116 |                 'Authorization': `token ${accessToken}`,
117 |                 'Accept': 'application/vnd.github.v3+json'
118 |               }
119 |             });
120 | 
121 |             lastCheckedForComments = new Date().toISOString();
122 |             commentCheckTimes.set(issue.number, lastCheckedForComments);
123 |             const comments = await commentsResponse.json();
124 |             const webrtcResponseComment = comments.find(comment => isResponseComment(comment));
125 |             const ownComment = comments.find(comment => comment.user.login === username && comment.body.includes('janus://my_p2p_locator_for'));
126 | 
127 |             if (webrtcResponseComment) {
128 |               DEBUG.verbose && console.log('found webrtc response comment', webrtcResponseComment);
129 |               await processResponseComment(webrtcResponseComment, ghUsername);
130 |               await closeIssue(issue.number, repoUrl, accessToken,  `Alright you should be p2p connected now! It's safe to close this tab now and return to your p2p chat room.`); // Close the issue after processing the comment
131 |             } else if (ownComment) {
132 |               DEBUG.verbose && console.log(`Already responded to issue #${issue.number}.`);
133 |               continue; // Skip this issue as we've already posted a comment
134 |             } else if ( ! inprocessConnections.has(issue.number) ) {
135 |               DEBUG.verbose && console.log(`Posting a connection link`);
136 |               if ( !banList.has(ghUsername) ) {
137 |                 inprocessConnections.set(issue.number, true);
138 |                 const postComment = createCommentPoster(issue.number, repoUrl, accessToken, ghUsername);
139 |                 await beginConnectionProcess(postComment, ghUsername, issue.number); // Open new connection
140 |               } else {
141 |                 console.log(`Not accepting a chat from banned user: ${ghUsername}`);
142 |                 closeIssue(issue.number, repoUrl, accessToken, 'Sorry we can\'t serve your request right now');
143 |               }
144 |             } else {
145 |               DEBUG.verbose && console.log(`Connection is already in process via #${issue.number}`);
146 |               continue;
147 |             }
148 | 
149 |             await sleep(333);
150 |           }
151 |         }
152 |       }, 15051);
153 |     }
154 | 
155 |     function isResponseComment(comment) {
156 |       // Determine if the comment is a WebRTC response
157 |       return comment.body.startsWith('janus://p2p_locator/');
158 |     }
159 | 
160 |     function processResponseComment(comment, expectedUsername) {
161 |       if (comment.user.login !== expectedUsername) {
162 |         console.error(`Response from unexpected user: ${comment.user.login}. Expected: ${expectedUsername}`);
163 |         return; // Stop processing if the user is not the one expected
164 |       }
165 | 
166 |       const signalData = extractSignalDataFromComment(comment.body);
167 |       const peer = clients[expectedUsername];
168 |       if (peer) {
169 |         peer.signal(signalData);
170 |       } else {
171 |         console.error('No peer connection found for username:', expectedUsername);
172 |       }
173 |     }
174 | 
175 |     function extractSignalDataFromComment(commentBody) {
176 |       const signalDataString = commentBody.replace('janus://p2p_locator/', '').trim();
177 |       return JSON.parse(atob(signalDataString));
178 |     }
179 | 
180 |     async function closeIssue(issueNumber, repoUrl, accessToken, message = 'Closing issue') {
181 |       DEBUG.verbose && console.log(`Posting connected comment and closing issue`);
182 |       await postCommentToIssue(issueNumber, accessToken, message);
183 |       setTimeout(async () => {
184 |         const closeIssueUrl = `https://api.github.com/repos/${username}/${repoName}/issues/${issueNumber}`;
185 |         const body = {
186 |           state: 'closed'
187 |         };
188 | 
189 |         try {
190 |           const response = await fetch(closeIssueUrl, {
191 |             method: 'PATCH',
192 |             headers: {
193 |               'Authorization': `token ${accessToken}`,
194 |               'Accept': 'application/vnd.github.v3+json',
195 |               'Content-Type': 'application/json'
196 |             },
197 |             body: JSON.stringify(body)
198 |           });
199 | 
200 |           if (!response.ok) {
201 |             console.error('Failed to close issue:', await response.text());
202 |           } else {
203 |             DEBUG.verbose && console.log(`Issue #${issueNumber} closed successfully.`);
204 |           }
205 |         } catch (error) {
206 |           console.error('Error closing issue:', error);
207 |         }
208 |       }, 70000);
209 |       DEBUG.verbose && console.log(`Scheduled issue to close 70 seconds later.`);
210 |     }
211 | 
212 |     function createCommentPoster(issueNumber, repoUrl, accessToken, ghUsername) {
213 |       return async (signalData) => {
214 |         const staticSiteUrl = formatStaticSiteUrl(repoUrl, signalData, `${repoUrl}/issues/${issueNumber}#new_comment_form`);
215 |         const commentText = `Hey @${ghUsername}! I might be available now. So we can start our p2p chat, please post your p2p locator in a comment below.\nDon't worry, you'll get your locator in the next step.\n\nClick this link now to go to the next step and get your p2p locator: [janus://my_p2p_locator_for/${username}](${staticSiteUrl})\n\nPlease paste your locator in the new comment box below.`;
216 |         await postCommentToIssue(issueNumber, accessToken, commentText);
217 |       };
218 |     }
219 | 
220 |     function formatStaticSiteUrl(repoUrl, signalData, issueUrl) {
221 |       const [ userName, repoName ] = new URL(repoUrl).pathname.split('/').filter(part => part.length);
222 |       const encodedSignalData = encodeURIComponent(btoa(JSON.stringify(signalData)));
223 |       const encodedIssueUrl = encodeURIComponent(issueUrl);
224 |       return `https://${userName}.github.io/${repoName}?data=${encodedSignalData}&issue=${encodedIssueUrl}`;
225 |     }
226 | 
227 |     async function postCommentToIssue(issueNumber, accessToken, commentText) {
228 |       try {
229 |         const commentResponse = await fetch(`https://api.github.com/repos/${username}/${repoName}/issues/${issueNumber}/comments`, {
230 |           method: 'POST',
231 |           headers: {
232 |             'Authorization': `token ${accessToken}`,
233 |             'Accept': 'application/vnd.github.v3+json',
234 |             'Content-Type': 'application/json'
235 |           },
236 |           body: JSON.stringify({ body: commentText })
237 |         });
238 | 
239 |         if (!commentResponse.ok) {
240 |           console.error('Failed to post comment:', await commentResponse.text());
241 |         } else {
242 |           DEBUG.verbose && console.log('Comment posted successfully.');
243 |         }
244 |       } catch(e) {
245 |         console.warn(`Error posting comment`, e);
246 |       }
247 |     }
248 | 
249 |     async function beginConnectionProcess(postComment, ghUsername, issueNumber) {
250 |       // Create a new peer as the initiator
251 |       if ( inprocessConnections.has(issueNumber) && clients[ghUsername] && !clients[ghUsername].destroyed ) {
252 |         DEBUG.verbose && console.log(`Not creating a new connection because we already have one for ${ghUsername}`);
253 |       }
254 |       inprocessConnections.set(issueNumber, ghUsername);
255 |       let resolve;
256 |       const pr = new Promise(res => resolve = res);
257 |       try {
258 |         DEBUG.verbose && console.log(`Creating peer`);
259 |         let maxRetries = 5;
260 |         let i = 0;
261 |         while(! (await establishConnection())) {
262 |           console.log(`Retrying connection in 3 seconds...`);
263 |           await sleep(3000);
264 |           if ( i++ > maxRetries ) {
265 |             throw new Error(`Could not connect peer`);
266 |           }
267 |         }
268 |       } catch(e) {
269 |         console.warn(`Error creating peer`, e);
270 |         resolve();
271 |       }
272 | 
273 |       async function establishConnection() {
274 |         let cresolve;
275 |         const cpr = new Promise(res => cresolve = res);
276 |         peer = new SimplePeer({ 
277 |           initiator: true, 
278 |           trickle: false,
279 |           channelConfig: {
280 |             ordered: true,
281 |             maxRetransmits: 0,
282 |           }
283 |         });
284 |         peer._pc.restartIce();
285 |         clients[ghUsername] = peer;
286 | 
287 |         let dataChannel;
288 | 
289 |         // When the peer generates a signaling data (offer), log it
290 |         peer.on('signal', data => {
291 |           DEBUG.verbose && console.log('Signal data:', JSON.stringify(data));
292 |           // Send this data back to your server or GitHub as needed
293 |           postComment(data).then(resolve);
294 |         });
295 | 
296 |         // When peer connection is established
297 |         peer.on('connect', async () => {
298 |           console.log('New client connected!', ghUsername);
299 |           dataChannel = peer; // In SimplePeer, peer itself acts as a data channel
300 |           cresolve(true);
301 |           await sleep(50);
302 |           dataChannel.send(JSON.stringify({type:'chat', msg:'Connected', handle: '<janus p2p>'}));
303 |           await sleep(500);
304 |           dataChannel.send(JSON.stringify({type: 'chat', msg: `Hello @${ghUsername}! Welcome to my personal P2P "server"! My blog content should have loaded below.`, handle: username}));
305 |           await sleep(500);
306 |           dataChannel.send(JSON.stringify({type: 'blog', content: document.querySelector('section#blog').outerHTML }));
307 |         });
308 | 
309 |         // Receiving messages on the data channel
310 |         peer.on('data', data => {
311 |           try {
312 |             DEBUG.verbose && console.log(`Message received`);
313 |             const message = JSON.parse(data.toString());
314 |             if (message.type === 'chat') {
315 |               // Format the chat message for better readability in the console
316 |               console.log(`CHAT_MSG [${ghUsername}]: ${message.msg.slice(0, 1024)}`);
317 |             } else {
318 |               // For other types of messages, log them as is
319 |               DEBUG.verbose && console.log('Received message:', message);
320 |             }
321 |           } catch (e) {
322 |             console.error('Error parsing received message:', e);
323 |           }
324 |         });
325 | 
326 |         // Handling errors
327 |         peer.on('close', () => {
328 |           console.log(`Peer disconnected: ${ghUsername}`);
329 |           delete clients[ghUsername];
330 |           inprocessConnections.delete(issueNumber);
331 |           cresolve(false);
332 |           resolve();
333 |         });
334 | 
335 |         peer.on('error', err => {
336 |           console.error('WebRTC Error:', err);
337 |           delete clients[ghUsername];
338 |           inprocessConnections.delete(issueNumber);
339 |           cresolve(false);
340 |           resolve();
341 |         });
342 | 
343 |         return cpr;
344 |       }
345 |       
346 |       return pr;
347 |     }
348 | 
349 |     async function sleep(ms) {
350 |       return new Promise(res => setTimeout(res, ms));
351 |     }
352 |   </script>
353 | </body>
354 | </html>
355 | 
356 | 


--------------------------------------------------------------------------------