@tellescope/react-components 1.249.1 → 1.249.2

package/src/TwilioVideo/TwilioControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, IconButton, Button } from '@mui/material'
+import { Box, IconButton, Button, CircularProgress } from '@mui/material'
 import {
   Mic as MicIcon,
   MicOff as MicOffIcon,
@@ -8,6 +8,8 @@ import {
   CallEnd as CallEndIcon,
   ScreenShare as ScreenShareIcon,
   StopScreenShare as StopScreenShareIcon,
+  BlurOn as BlurOnIcon,
+  BlurOff as BlurOffIcon,
 } from '@mui/icons-material'
 import { useTwilioVideo } from './TwilioVideoContext'
 
@@ -29,9 +31,13 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
     isVideoEnabled,
     isAudioEnabled,
     isScreenSharing,
+    isBlurSupported,
+    isBlurEnabled,
+    isBlurLoading,
     toggleVideo,
     toggleAudio,
     toggleScreenShare,
+    toggleBlur,
     disconnect,
     isHost,
     room,
@@ -87,6 +93,26 @@ export const TwilioControlBar: React.FC<TwilioControlBarProps> = ({
         {isVideoEnabled ? <VideocamIcon /> : <VideocamOffIcon />}
       </IconButton>
 
+      {isBlurSupported && (
+        <IconButton
+          onClick={toggleBlur}
+          disabled={isBlurLoading}
+          sx={{
+            color: isBlurEnabled ? '#4caf50' : 'white',
+            '&:hover': {
+              backgroundColor: 'rgba(255,255,255,0.1)',
+            },
+            '&.Mui-disabled': {
+              color: 'rgba(255,255,255,0.5)',
+            },
+          }}
+        >
+          {isBlurLoading
+            ? <CircularProgress size={20} sx={{ color: 'white' }} />
+            : isBlurEnabled ? <BlurOnIcon /> : <BlurOffIcon />}
+        </IconButton>
+      )}
+
       {showScreenShareProp && supportsScreenShare && (
         <IconButton
           onClick={toggleScreenShare}

package/src/TwilioVideo/TwilioLocalPreview.tsx

@@ -1,6 +1,30 @@
 import { useEffect, useRef, useState } from 'react'
 import Video, { LocalVideoTrack } from 'twilio-video'
-import { Box, Typography, CircularProgress, FormControl, InputLabel, Select, MenuItem } from '@mui/material'
+import type { GaussianBlurBackgroundProcessor as GaussianBlurBackgroundProcessorType } from '@twilio/video-processors'
+import { Box, Typography, CircularProgress, FormControl, InputLabel, Select, MenuItem, IconButton } from '@mui/material'
+import { BlurOn as BlurOnIcon, BlurOff as BlurOffIcon } from '@mui/icons-material'
+import {
+  loadTwilioVideoProcessorsModule,
+  BLUR_BACKGROUND_ASSETS_PATH,
+  BLUR_BACKGROUND_STORAGE_KEY,
+} from './TwilioVideoContext'
+
+const readBlurPreference = (): boolean => {
+  try {
+    return typeof localStorage !== 'undefined'
+      && localStorage.getItem(BLUR_BACKGROUND_STORAGE_KEY) === 'true'
+  } catch {
+    return false
+  }
+}
+
+const writeBlurPreference = (enabled: boolean) => {
+  try {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(BLUR_BACKGROUND_STORAGE_KEY, enabled ? 'true' : 'false')
+    }
+  } catch { /* ignore */ }
+}
 
 export interface TwilioLocalPreviewProps {
   style?: React.CSSProperties
@@ -9,10 +33,33 @@ export interface TwilioLocalPreviewProps {
 export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const trackRef = useRef<LocalVideoTrack | null>(null)
+  const blurProcessorRef = useRef<GaussianBlurBackgroundProcessorType | null>(null)
+  const blurAttachedTrackRef = useRef<LocalVideoTrack | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
   const [devices, setDevices] = useState<MediaDeviceInfo[]>([])
   const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
+  const [isBlurSupported, setIsBlurSupported] = useState(false)
+  const [isBlurEnabled, setIsBlurEnabled] = useState<boolean>(readBlurPreference)
+  const [isBlurLoading, setIsBlurLoading] = useState(false)
+  const [trackVersion, setTrackVersion] = useState(0)
+
+  // Probe video-processors support once on mount
+  useEffect(() => {
+    let mounted = true
+    loadTwilioVideoProcessorsModule()
+      .then(({ isSupported }) => { if (mounted) setIsBlurSupported(!!isSupported) })
+      .catch(() => { /* leave unsupported */ })
+    return () => { mounted = false }
+  }, [])
+
+  const toggleBlur = () => {
+    setIsBlurEnabled(prev => {
+      const next = !prev
+      writeBlurPreference(next)
+      return next
+    })
+  }
 
   // Enumerate video devices
   useEffect(() => {
@@ -43,6 +90,11 @@ export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style })
     let mounted = true
 
     const getVideoTrack = async () => {
+      // Detach blur from previous track, if attached
+      if (blurAttachedTrackRef.current && blurProcessorRef.current) {
+        try { blurAttachedTrackRef.current.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+        blurAttachedTrackRef.current = null
+      }
       // Stop existing track
       if (trackRef.current) {
         trackRef.current.stop()
@@ -71,6 +123,7 @@ export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style })
           videoElement.style.transform = 'scaleX(-1)'
           containerRef.current.appendChild(videoElement)
           setLoading(false)
+          setTrackVersion(v => v + 1)
         } else if (!mounted) {
           track.stop()
         }
@@ -86,6 +139,10 @@ export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style })
 
     return () => {
       mounted = false
+      if (blurAttachedTrackRef.current && blurProcessorRef.current) {
+        try { blurAttachedTrackRef.current.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+        blurAttachedTrackRef.current = null
+      }
       if (trackRef.current) {
         trackRef.current.stop()
         trackRef.current = null
@@ -96,6 +153,63 @@ export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style })
     }
   }, [selectedDeviceId])
 
+  // Sync blur processor with the current preview track + enabled state
+  useEffect(() => {
+    if (!isBlurSupported) return
+    const track = trackRef.current
+    if (!track) return
+
+    let cancelled = false
+    const apply = async () => {
+      const previouslyAttached = blurAttachedTrackRef.current
+      if (previouslyAttached && previouslyAttached !== track && blurProcessorRef.current) {
+        try { previouslyAttached.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+        blurAttachedTrackRef.current = null
+      }
+
+      if (isBlurEnabled) {
+        if (!blurProcessorRef.current) {
+          setIsBlurLoading(true)
+          try {
+            const { GaussianBlurBackgroundProcessor } = await loadTwilioVideoProcessorsModule()
+            if (cancelled) return
+            const processor = new GaussianBlurBackgroundProcessor({
+              assetsPath: BLUR_BACKGROUND_ASSETS_PATH,
+            })
+            await processor.loadModel()
+            if (cancelled) return
+            blurProcessorRef.current = processor
+          } catch (err) {
+            console.error('Failed to load Twilio video blur processor:', err)
+            if (!cancelled) setIsBlurEnabled(false)
+            return
+          } finally {
+            if (!cancelled) setIsBlurLoading(false)
+          }
+        }
+
+        if (blurAttachedTrackRef.current !== track && blurProcessorRef.current) {
+          try {
+            track.addProcessor(blurProcessorRef.current, {
+              inputFrameBufferType: 'videoframe',
+              outputFrameBufferContextType: 'bitmaprenderer',
+            })
+            blurAttachedTrackRef.current = track
+          } catch (err) {
+            console.error('Failed to attach blur processor to track:', err)
+          }
+        }
+      } else if (blurAttachedTrackRef.current === track && blurProcessorRef.current) {
+        try { track.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+        blurAttachedTrackRef.current = null
+      }
+    }
+
+    apply()
+
+    return () => { cancelled = true }
+  }, [trackVersion, isBlurEnabled, isBlurSupported])
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
       {/* Camera selector */}
@@ -128,6 +242,7 @@ export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style })
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
+          position: 'relative',
           ...style,
         }}
       >
@@ -145,6 +260,26 @@ export const TwilioLocalPreview: React.FC<TwilioLocalPreviewProps> = ({ style })
             display: loading || error ? 'none' : 'block',
           }}
         />
+        {isBlurSupported && !error && (
+          <IconButton
+            onClick={toggleBlur}
+            disabled={isBlurLoading || loading}
+            size="small"
+            sx={{
+              position: 'absolute',
+              bottom: 8,
+              right: 8,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              color: isBlurEnabled ? '#4caf50' : 'white',
+              '&:hover': { backgroundColor: 'rgba(0,0,0,0.7)' },
+              '&.Mui-disabled': { color: 'rgba(255,255,255,0.5)' },
+            }}
+          >
+            {isBlurLoading
+              ? <CircularProgress size={16} sx={{ color: 'white' }} />
+              : isBlurEnabled ? <BlurOnIcon fontSize="small" /> : <BlurOffIcon fontSize="small" />}
+          </IconButton>
+        )}
       </Box>
     </Box>
   )

package/src/TwilioVideo/TwilioVideoContext.tsx

@@ -8,9 +8,38 @@ import Video, {
   RemoteTrack,
   LocalParticipant,
 } from 'twilio-video'
+import type { GaussianBlurBackgroundProcessor as GaussianBlurBackgroundProcessorType } from '@twilio/video-processors'
 
 export const SCREEN_SHARE_TRACK_NAME = 'screen-share'
 
+export const BLUR_BACKGROUND_STORAGE_KEY = 'tellescope.twilio.blurBackground'
+export const BLUR_BACKGROUND_ASSETS_PATH = '/twilio-video-processors'
+
+let videoProcessorsModulePromise: Promise<typeof import('@twilio/video-processors')> | null = null
+export const loadTwilioVideoProcessorsModule = () => {
+  if (!videoProcessorsModulePromise) {
+    videoProcessorsModulePromise = import('@twilio/video-processors')
+  }
+  return videoProcessorsModulePromise
+}
+
+const readBlurPreference = (): boolean => {
+  try {
+    return typeof localStorage !== 'undefined'
+      && localStorage.getItem(BLUR_BACKGROUND_STORAGE_KEY) === 'true'
+  } catch {
+    return false
+  }
+}
+
+const writeBlurPreference = (enabled: boolean) => {
+  try {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(BLUR_BACKGROUND_STORAGE_KEY, enabled ? 'true' : 'false')
+    }
+  } catch { /* ignore */ }
+}
+
 export interface TwilioVideoState {
   room: Room | null
   isConnecting: boolean
@@ -25,6 +54,9 @@ export interface TwilioVideoState {
   isHost: boolean
   isVideoEnabled: boolean
   isAudioEnabled: boolean
+  isBlurSupported: boolean
+  isBlurEnabled: boolean
+  isBlurLoading: boolean
 }
 
 export interface TwilioVideoActions {
@@ -33,6 +65,7 @@ export interface TwilioVideoActions {
   toggleVideo: () => Promise<void>
   toggleAudio: () => void
   toggleScreenShare: () => Promise<void>
+  toggleBlur: () => void
   setIsHost: (isHost: boolean) => void
 }
 
@@ -65,13 +98,22 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
   const [localScreenTrack, setLocalScreenTrack] = useState<LocalVideoTrack | null>(null)
   const [isScreenSharing, setIsScreenSharing] = useState(false)
   const [screenSharingParticipantSid, setScreenSharingParticipantSid] = useState<string | null>(null)
+  const [isBlurSupported, setIsBlurSupported] = useState(false)
+  const [isBlurEnabled, setIsBlurEnabled] = useState<boolean>(readBlurPreference)
+  const [isBlurLoading, setIsBlurLoading] = useState(false)
 
   const localTracksRef = useRef<(LocalVideoTrack | LocalAudioTrack)[]>([])
+  const blurProcessorRef = useRef<GaussianBlurBackgroundProcessorType | null>(null)
+  const blurAttachedTrackRef = useRef<LocalVideoTrack | null>(null)
 
   const connect = useCallback(async (token: string, roomName: string) => {
     setIsConnecting(true)
     setError(null)
 
+    // Pick up any preference set by the pre-call preview, which lives outside
+    // this provider and only persists via localStorage.
+    setIsBlurEnabled(readBlurPreference())
+
     try {
       // Create local tracks
       const tracks = await Video.createLocalTracks({
@@ -234,9 +276,89 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
     }
   }, [isScreenSharing, stopScreenShare, room])
 
+  const toggleBlur = useCallback(() => {
+    setIsBlurEnabled(prev => {
+      const next = !prev
+      writeBlurPreference(next)
+      return next
+    })
+  }, [])
+
+  // Probe video-processors support once on mount
+  useEffect(() => {
+    let mounted = true
+    loadTwilioVideoProcessorsModule()
+      .then(({ isSupported }) => { if (mounted) setIsBlurSupported(!!isSupported) })
+      .catch(() => { /* leave unsupported */ })
+    return () => { mounted = false }
+  }, [])
+
+  // Sync blur processor with the current local video track + enabled state
+  useEffect(() => {
+    if (!isBlurSupported) return
+    const track = localVideoTrack
+
+    let cancelled = false
+    const apply = async () => {
+      // Detach from any previously-attached track if it differs from the current one
+      const previouslyAttached = blurAttachedTrackRef.current
+      if (previouslyAttached && previouslyAttached !== track && blurProcessorRef.current) {
+        try { previouslyAttached.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+        blurAttachedTrackRef.current = null
+      }
+
+      if (!track) return
+
+      if (isBlurEnabled) {
+        if (!blurProcessorRef.current) {
+          setIsBlurLoading(true)
+          try {
+            const { GaussianBlurBackgroundProcessor } = await loadTwilioVideoProcessorsModule()
+            if (cancelled) return
+            const processor = new GaussianBlurBackgroundProcessor({
+              assetsPath: BLUR_BACKGROUND_ASSETS_PATH,
+            })
+            await processor.loadModel()
+            if (cancelled) return
+            blurProcessorRef.current = processor
+          } catch (err) {
+            console.error('Failed to load Twilio video blur processor:', err)
+            if (!cancelled) setIsBlurEnabled(false)
+            return
+          } finally {
+            if (!cancelled) setIsBlurLoading(false)
+          }
+        }
+
+        if (blurAttachedTrackRef.current !== track && blurProcessorRef.current) {
+          try {
+            track.addProcessor(blurProcessorRef.current, {
+              inputFrameBufferType: 'videoframe',
+              outputFrameBufferContextType: 'bitmaprenderer',
+            })
+            blurAttachedTrackRef.current = track
+          } catch (err) {
+            console.error('Failed to attach blur processor to track:', err)
+          }
+        }
+      } else if (blurAttachedTrackRef.current === track && blurProcessorRef.current) {
+        try { track.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+        blurAttachedTrackRef.current = null
+      }
+    }
+
+    apply()
+
+    return () => { cancelled = true }
+  }, [localVideoTrack, isBlurEnabled, isBlurSupported])
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
+      if (blurAttachedTrackRef.current && blurProcessorRef.current) {
+        try { blurAttachedTrackRef.current.removeProcessor(blurProcessorRef.current) } catch { /* ignore */ }
+      }
+      blurAttachedTrackRef.current = null
       if (room) {
         room.disconnect()
       }
@@ -260,11 +382,15 @@ export const TwilioVideoProvider: React.FC<TwilioVideoProviderProps> = ({ childr
     isHost,
     isVideoEnabled,
     isAudioEnabled,
+    isBlurSupported,
+    isBlurEnabled,
+    isBlurLoading,
     connect,
     disconnect,
     toggleVideo,
     toggleAudio,
     toggleScreenShare,
+    toggleBlur,
     setIsHost,
   }