avoid comms

Author: theomonnom

livekit-rtc/jupyter-html/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   LiveKitRoom,
   BarVisualizer,
@@ -15,46 +15,16 @@ import type { SVGProps } from 'react';
 import { ConnectionState } from 'livekit-client';
 
 
-export async function fetchJoinInfo(): Promise<{ url: string; token: string }> {
-  const invoke = (window as any).google?.colab?.kernel?.invokeFunction;
-  if (invoke) {
-    const res = await invoke("get_join_token", []);
-    return res.data["application/json"];
-  }
-
-
-  // This requires that JupyterLab was started with --LabApp.expose_app_in_browser,
-  if ((window as any).jupyterapp && (window as any).jupyterapp.shell) {
-    const currentWidget = (window as any).jupyterapp.shell.currentWidget;
-    if (currentWidget && currentWidget.context?.sessionContext) {
-      const session = currentWidget.context.sessionContext.session;
-      if (session && session.kernel) {
-        try {
-          const comm = session.kernel.createComm("get_join_token_comm");
-          comm.open();
-          comm.send({ request: "token" });
-          return new Promise((resolve) => {
-            comm.onMsg = (msg: any) => {
-              resolve(msg.content.data);
-            };
-          });
-        } catch (error) {
-          throw new Error("Error creating comm channel: " + error);
-        }
-      }
-    }
-  }
-
+export function getJoinInfo(): { url: string; token: string } {
   if (import.meta.env.MODE === "development") {
     const url = import.meta.env.VITE_LIVEKIT_URL;
     const token = import.meta.env.VITE_LIVEKIT_TOKEN;
     return { url, token };
   }
 
-  throw new Error("No suitable kernel connection available");
+  return { url: "##livekit-url-placeholder##", token: "##livekit-token-placeholder##" };
 }
 
-
 const LeaveIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
     <path
@@ -107,20 +77,12 @@ const ConnectedContent: React.FC<{ onDisconnect: () => void }> = ({ onDisconnect
 };
 
 const App = () => {
-  const [joinInfo, setJoinInfo] = useState<{ url: string; token: string } | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(true);
-
-  useEffect(() => {
-    fetchJoinInfo()
-      .then((info) => setJoinInfo(info))
-      .catch((err) => setError(err.message));
-  }, []);
+  const joinInfo = getJoinInfo();
 
   if (error) return <div>Error: {error}</div>;
 
-  if (!joinInfo) return <div>Loading...</div>;
-
   if (!isConnected) {
     return (
       <div className="content">

livekit-rtc/livekit/rtc/jupyter.py

@@ -13,40 +13,41 @@
 
 
 def room_html(url: str, token: str) -> HTML:
-    IN_COLAB = "google.colab" in sys.modules
-    IN_JUPYTER = "ipykernel" in sys.modules
-
-    if IN_COLAB:
-        from google.colab import output
-
-        def get_join_token():
-            return JSON({"url": url, "token": token})
-
-        output.register_callback("get_join_token", get_join_token)
-    elif IN_JUPYTER:
-        from IPython import get_ipython
-
-        ip = get_ipython()
-        if ip and hasattr(ip, "kernel"):
+    """
+    Generate the HTML needed to embed a LiveKit room.
 
-            def token_comm_target(comm, open_msg):
-                @comm.on_msg
-                def handle_message(msg):
-                    comm.send({"url": url, "token": token})
+    Args:
+        url (str): The LiveKit room URL.
+        token (str): The LiveKit join token.
 
-            ip.kernel.comm_manager.register_target("get_join_token_comm", token_comm_target)
+    Important:
+        The returned HTML contains the provided `url` and `token` values directly.
+        Avoid using sensitive tokens in public notebooks (e.g., tokens with long expiration times).
+    """
+    token_placeholder = "##livekit-token-placeholder##"
+    url_placeholder = "##livekit-url-placeholder##"
 
     index_path = files("livekit.rtc.resources") / "jupyter-html" / "index.html"
     index_path = _resource_stack.enter_context(as_file(index_path))
-    return HTML(index_path.read_text())
+
+    # turns out that directly replacing the URL/token is necessary, as Colab or Jupyter comms become
+    # unreliable when the main thread is busy/blocked
+    html_text = index_path.read_text()
+    html_text = html_text.replace(token_placeholder, token)
+    html_text = html_text.replace(url_placeholder, url)
+    return HTML(html_text)
 
 
 def display_room(url: str, token: str) -> None:
     """
-    Display a LiveKit room in Jupyter or Google Colab.
+    Display a LiveKit room in a Jupyter notebook or Google Colab.
 
     Args:
         url (str): The LiveKit room URL.
         token (str): The LiveKit join token.
+
+    Important:
+        The rendered HTML will include the provided `url` and `token` in plain text.
+        Avoid using sensitive tokens in public notebooks (e.g., tokens with long expiration times).
     """
     display(room_html(url, token))