SIP.js実践ガイド　React＋TypeScriptで作るブラウザVoIPアプリ（sip2sip.info対応版）

mkdir sipjs-app
cd sipjs-app
npm init -y
npm install sip.js react react-dom
npm install --save-dev typescript @types/react @types/react-dom

/sipjs-app
├ public/index.html
├ src/
│  ├ index.tsx
│  ├ App.tsx
│  └ sip/ua.ts
├ tsconfig.json
└ package.json

// src/sip/ua.ts
import { UserAgent } from "sip.js";

export function createUA(user: string, pass: string): UserAgent {
  const uri = UserAgent.makeURI(`sip:${user}@sip2sip.info`)!;
  return new UserAgent({
    uri,
    transportOptions: { server: "wss://sip2sip.info/ws" },
    authorizationUsername: user,
    authorizationPassword: pass,
    logLevel: "info"
  });
}

// src/App.tsx
import React, { useEffect, useRef, useState } from "react";
import { createUA } from "./sip/ua";
import { SessionState } from "sip.js";

const App: React.FC = () => {
  const [ua, setUA] = useState<any>();
  const [session, setSession] = useState<any>();
  const audioRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    const userAgent = createUA("yourUser", "yourPass");
    userAgent.start();
    userAgent.delegate.onInvite = invitation => {
      invitation.accept().then(() => {
        setSession(invitation);
        audioRef.current!.srcObject = invitation.sessionDescriptionHandler.remoteStream;
      });
    };
    setUA(userAgent);
    return () => userAgent.stop();
  }, []);

  const call = () => {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      const inviter = ua!.invite("sip:callee@sip2sip.info", {
        sessionDescriptionHandlerOptions: { constraints: { audio: true } },
        sessionDescriptionHandlerFactoryOptions: { localMedia: { stream } }
      });
      setSession(inviter);
      inviter.stateChange.addListener(state => {
        if (state === SessionState.Established) {
          audioRef.current!.srcObject = inviter.sessionDescriptionHandler.remoteStream;
        }
      });
    });
  };

  const hangup = () => session?.bye();

  return (
    <div>
      <h1>ブラウザVoIPデモ</h1>
      <button onClick={call} disabled={!!session}>発信</button>
      <button onClick={hangup} disabled={!session}>切断</button>
      <audio ref={audioRef} autoPlay />
    </div>
  );
};

export default App;