Update js-sdk

src/otel/OTelGroupCallMembership.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import opentelemetry, { Span, Attributes } from "@opentelemetry/api";
+import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
 import {
   GroupCall,
   MatrixClient,
@@ -23,7 +24,7 @@ import {
 } from "matrix-js-sdk";
 import { VoipEvent } from "matrix-js-sdk/src/webrtc/call";
 
-import { tracer } from "./otel";
+import { provider, tracer } from "./otel";
 
 /**
  * Flattens out an object into a single layer with components
@@ -78,15 +79,15 @@ export class OTelGroupCallMembership {
   constructor(private groupCall: GroupCall, client: MatrixClient) {
     this.myUserId = client.getUserId();
     this.myMember = groupCall.room.getMember(client.getUserId());
+
+    provider.resource.attributes[
+      SemanticResourceAttributes.SERVICE_NAME
+    ] = `element-call-${this.myUserId}-${client.getDeviceId()}`;
   }
 
   public onJoinCall() {
-    // Create a new call based on the callIdContext. This context also has a span assigned to it.
-    // Other spans can use this context to extract the parent span.
-    // (When passing this context to startSpan the started span will use the span set in the context (in this case the callSpan) as the parent)
-
     // Create the main span that tracks the time we intend to be in the call
-    this.callMembershipSpan = tracer.startSpan("otel_groupCallMembershipSpan");
+    this.callMembershipSpan = tracer.startSpan("matrix.groupCallMembership");
     this.callMembershipSpan.setAttribute(
       "matrix.confId",
       this.groupCall.groupCallId
@@ -143,4 +144,34 @@ export class OTelGroupCallMembership {
       );
     }
   }
+
+  public onToggleMicrophoneMuted(newValue: boolean) {
+    this.callMembershipSpan.addEvent("matrix.toggleMicMuted", {
+      "matrix.microphone.muted": newValue,
+    });
+  }
+
+  public onSetMicrophoneMuted(setMuted: boolean) {
+    this.callMembershipSpan.addEvent("matrix.setMicMuted", {
+      "matrix.microphone.muted": setMuted,
+    });
+  }
+
+  public onToggleLocalVideoMuted(newValue: boolean) {
+    this.callMembershipSpan.addEvent("matrix.toggleVidMuted", {
+      "matrix.video.muted": newValue,
+    });
+  }
+
+  public onSetLocalVideoMuted(setMuted: boolean) {
+    this.callMembershipSpan.addEvent("matrix.setVidMuted", {
+      "matrix.video.muted": setMuted,
+    });
+  }
+
+  public onToggleScreensharing(newValue: boolean) {
+    this.callMembershipSpan.addEvent("matrix.setVidMuted", {
+      "matrix.screensharing.enabled": newValue,
+    });
+  }
 }

src/otel/otel.ts

@@ -38,7 +38,7 @@ const providerConfig = {
     [SemanticResourceAttributes.SERVICE_NAME]: SERVICE_NAME,
   }),
 };
-const provider = new WebTracerProvider(providerConfig);
+export const provider = new WebTracerProvider(providerConfig);
 
 provider.addSpanProcessor(new SimpleSpanProcessor(otlpExporter));
 provider.addSpanProcessor(new SimpleSpanProcessor(posthogExporter));
@@ -49,65 +49,3 @@ opentelemetry.trace.setGlobalTracerProvider(provider);
 export const tracer = opentelemetry.trace.getTracer(
   "my-element-call-otl-tracer"
 );
-
-/*
-class CallTracer {
-  // We create one tracer class for each main context.
-  // Even if differnt tracer classes overlap in time space, we might want to visulaize them seperately.
-  // The Call Tracer should only contain spans/events that are relevant to understand the procedure of the individual candidates.
-  // Another Tracer Class (for example a ConnectionTracer) can contain a very granular list of all steps to connect to a call.
-
-  private callSpan;
-  private callContext;
-  private muteSpan?;
-
-  public startGroupCall(groupCallId: string) {}
-
-  public startCall(callId: string) {
-    // The main context will be set when initiating the main/parent span.
-
-    // Create an initial context with the callId param
-    const callIdContext = opentelemetry.context
-      .active()
-      .setValue(Symbol("callId"), callId);
-
-    // Create the main span that tracks the whole call
-    this.callSpan = tracer.startSpan("otel_callSpan", undefined, callIdContext);
-
-    // Create a new call based on the callIdContext. This context also has a span assigned to it.
-    // Other spans can use this context to extract the parent span.
-    // (When passing this context to startSpan the started span will use the span set in the context (in this case the callSpan) as the parent)
-    this.callContext = opentelemetry.trace.setSpan(
-      opentelemetry.context.active(),
-      this.callSpan
-    );
-
-    // Here we start a very short span. This is a hack to trigger the posthog exporter.
-    // Only ended spans are processed by the exporter.
-    // We want the exporter to know that a call has started
-    const startCallSpan = tracer.startSpan(
-      "otel_startCallSpan",
-      undefined,
-      this.callContext
-    );
-    startCallSpan.end();
-  }
-  public muteMic(muteState: boolean) {
-    if (muteState) {
-      this.muteSpan = tracer.startSpan(
-        "otel_muteSpan",
-        undefined,
-        this.callContext
-      );
-    } else if (this.muteSpan) {
-      this.muteSpan.end();
-      this.muteSpan = null;
-    }
-  }
-  public endCall() {
-    this.callSpan?.end();
-  }
-}
-
-export const callTracer = new CallTracer();
-*/

src/room/useGroupCall.ts

@@ -413,6 +413,8 @@ export function useGroupCall(
   const toggleLocalVideoMuted = useCallback(() => {
     const toggleToMute = !groupCall.isLocalVideoMuted();
     groupCall.setLocalVideoMuted(toggleToMute);
+    groupCallOTelMembership.onToggleLocalVideoMuted(toggleToMute);
+    // TODO: These explict posthog calls should be unnecessary now with the posthog otel exporter?
     PosthogAnalytics.instance.eventMuteCamera.track(
       toggleToMute,
       groupCall.groupCallId
@@ -422,6 +424,7 @@ export function useGroupCall(
   const setMicrophoneMuted = useCallback(
     (setMuted) => {
       groupCall.setMicrophoneMuted(setMuted);
+      groupCallOTelMembership.onSetMicrophoneMuted(setMuted);
       PosthogAnalytics.instance.eventMuteMicrophone.track(
         setMuted,
         groupCall.groupCallId
@@ -432,10 +435,13 @@ export function useGroupCall(
 
   const toggleMicrophoneMuted = useCallback(() => {
     const toggleToMute = !groupCall.isMicrophoneMuted();
+    groupCallOTelMembership.onToggleMicrophoneMuted(toggleToMute);
     setMicrophoneMuted(toggleToMute);
   }, [groupCall, setMicrophoneMuted]);
 
   const toggleScreensharing = useCallback(async () => {
+    groupCallOTelMembership.onToggleScreensharing(!groupCall.isScreensharing);
+
     if (!groupCall.isScreensharing()) {
       // toggling on
       updateState({ requestingScreenshare: true });