twilio-call-react.tsx

/** 🔴 Twilio console > Twiml App > config */

{
  voice_post_request_url: `https://my_url/api/twilio/request-url`
}


/** 🔴 ./device-context.tsx */

type OptionalTwilio = {
  device: Device | null;
};
const { Provider: ProviderBase, useValue: useDevice } =
  createSimpleContext<OptionalTwilio>("TwilioDevice");
  
const DeviceProvider = ({ children, token }: { children: React.ReactNode, token: string }) => {
  const deviceRef = useRef<Device | null>(null);
  
    useIsomorphicLayoutEffect(() => {
    if (!deviceRef.current) {
      deviceRef.current = new Device(token, {
        logLevel: "debug",
        codecPreferences: ["opus", "pcmu"],
      });

      deviceRef.current.register();
    }

  }, [deviceRef.current]);
  
  return (
    <ProviderBase value={{ device: deviceRef.current }}>
      {children}
    </ProviderBase>
  );
}

export { DeviceProvider, useDevice }


/** 🔴 ./api/twilio/request-url */
import tw from 'twilio'

const action = async (request) => {
  const form = new URLSearchParams(await request.text());
  const To = form.get('To')
  const From = form.get('From')
  
  const inbound = form.get('Direction') === 'inbound'
  
  if (inbound) {
    const twiml = new tw.twiml.VoiceResponse();
    
    const dial = _twiml.dial(
      {
        answerOnBridge: true,
        callerId: From!,
      },
-      To!
+      // To!
    );
    
    dial.number(To!);
    
    return xml(twiml.toString(), {
      status: 200,
    });
  }
  
  return json({})
}


/** 🔴 Component */
const Demo = () => {
  const { device } = useDevice()
  const [ currentCall, setCurrentCall ] = useState<Call | null>(null)
  const [ callStatus, setCallStatus ] = useState<CallStatus | 'idle'>('idle')
  
  useIsomorphicLayoutEffect(() => {
    if (!currentCall) return;

    currentCall?.on("accept", () => {
      console.log("💡 accept");
      setCallStatus("open");
    });
    currentCall?.on("cancel", () => {
      console.log("💡 cancel");
      setCurrentCall(null);
      setCallStatus("closed");
    });
    currentCall?.on("disconnect", (e) => {
      console.log("💡 disconnect");
      setCurrentCall(null);
      setCallStatus("closed");
    });
    currentCall?.on("error", () => {
      console.log("💡 error")
      setCurrentCall(null)
    });
    currentCall?.on("reconnected", () => {
      console.log("💡 reconnected");
      setCallStatus("open");
    });
    currentCall?.on("reconnecting", () => {
      console.log("💡 reconnecting");
      setCallStatus("reconnecting");
    });
    currentCall?.on("reject", () => {
      console.log("💡 reject");
      setCurrentCall(null);
      setCallStatus("closed");
    });

  }, [currentCall])
  
  const call = async () => {
    if (!device) throw new Error('❌ No device initialized')
    
    const response = await device.connect({
      params: {
+        From: `${my_twilio_phone_number}`,
        To: `${my_local_phone_number}`,
        receiverName: 'Test'
      }
    })
    
    setCurrentCall(response)
  }
  
  return (
    <div>
      <button onClick={call} disabled={!device || !!currentCall}> --Call Now-- </button>
    </div>
  )
}