リソース

TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_KEY=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

npm install twilio twilio-video
# または
yarn add twilio twilio-video

// src/app/api/twilio/get-or-create-room/route.ts
import { NextRequest, NextResponse } from 'next/server';
import twilio from 'twilio';

export async function POST(req: NextRequest) {
  try {
    const body = await req.json();
    const { roomId, identity = 'user-' + Date.now() } = body;

    // 環境変数から認証情報を取得
    const twilioAccountSid = process.env.TWILIO_ACCOUNT_SID;
    const twilioApiKey = process.env.TWILIO_API_KEY;
    const twilioApiSecret = process.env.TWILIO_API_SECRET;

    // Twilioクライアントの初期化
    const client = twilio(twilioApiKey, twilioApiSecret, { accountSid: twilioAccountSid });

    // ルームが存在するか確認、なければ作成
    let room;
    try {
      room = await client.video.v1.rooms(roomId).fetch();
    } catch (error) {
      room = await client.video.v1.rooms.create({
        uniqueName: roomId,
        type: 'group',
        maxParticipants: 50,
      });
    }

    // アクセストークンの生成
    const AccessToken = twilio.jwt.AccessToken;
    const VideoGrant = AccessToken.VideoGrant;
    const videoGrant = new VideoGrant({ room: roomId });
    const token = new AccessToken(
      twilioAccountSid,
      twilioApiKey,
      twilioApiSecret,
      { identity }
    );
    token.addGrant(videoGrant);

    // トークンとルーム情報を返す
    return NextResponse.json({
      roomId,
      token: token.toJwt(),
    });
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error while creating room' },
      { status: 500 }
    );
  }
}

// src/lib/twilio.ts
import { nanoid } from 'nanoid';

// ルームを取得または作成する関数
export async function getOrCreateRoom(roomId: string): Promise<{ roomId: string, token: string }> {
  try {
    const response = await fetch('/api/twilio/get-or-create-room', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ roomId }),
    });

    if (!response.ok) {
      throw new Error('Failed to get or create room');
    }

    return await response.json();
  } catch (error) {
    console.error('Error in getOrCreateRoom:', error);
    throw error;
  }
}

// ユニークなルームIDを生成する関数
export function generateRoomId(baseName: string): string {
  const randomId = nanoid(5).toLowerCase();
  return `${baseName.toLowerCase().replace(/[^a-z0-9-]/g, '')}-${randomId}`;
}

// src/components/TwilioRoom.tsx
import React, { useEffect, useState, useRef } from 'react';
import { getOrCreateRoom } from '../lib/twilio';
import { connect, createLocalVideoTrack, createLocalAudioTrack } from 'twilio-video';

const TwilioRoom = ({ roomId, username = `user-${Date.now()}` }) => {
  const [room, setRoom] = useState(null);
  const [participants, setParticipants] = useState([]);
  const [localVideoTrack, setLocalVideoTrack] = useState(null);
  const [localAudioTrack, setLocalAudioTrack] = useState(null);
  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
  const [isVideoEnabled, setIsVideoEnabled] = useState(true);
  const [isConnecting, setIsConnecting] = useState(true);
  const [error, setError] = useState(null);

  const localVideoRef = useRef(null);
  const participantRefs = useRef({});

  // ローカルビデオを確実に接続するための関数
  const ensureLocalVideoConnection = async () => {
    // ブラウザのメディアAPIを直接使用
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { width: 640, height: 480 }
    });

    // ビデオ要素に直接接続
    if (localVideoRef.current) {
      localVideoRef.current.srcObject = stream;
      localVideoRef.current.play().catch(err => {
        console.warn('Direct video play error:', err);
      });
    }

    // Twilioのビデオトラックを作成
    const videoTrack = await createLocalVideoTrack({
      width: 640, height: 480
    });

    return videoTrack;
  };

  useEffect(() => {
    // Twilioルームに接続する処理
    const connectToRoom = async () => {
      try {
        // ルームを取得または作成してトークンを取得
        const { token } = await getOrCreateRoom(roomId);

        // カメラとマイクの接続を確保
        const videoTrack = await ensureLocalVideoConnection();
        const audioTrack = await createLocalAudioTrack();

        setLocalVideoTrack(videoTrack);
        setLocalAudioTrack(audioTrack);

        // トークンでTwilioルームに接続
        const twilioRoom = await connect(token, {
          name: roomId,
          tracks: [videoTrack, audioTrack],
          video: true,
          audio: true
        });

        setRoom(twilioRoom);
        setParticipants(Array.from(twilioRoom.participants.values()));

        // 参加者接続イベントの設定
        twilioRoom.on('participantConnected', participant => {
          setParticipants(prev => [...prev, participant]);
        });

        // 参加者切断イベントの設定
        twilioRoom.on('participantDisconnected', participant => {
          setParticipants(prev => prev.filter(p => p.identity !== participant.identity));
        });

        setIsConnecting(false);
      } catch (err) {
        setError(`接続に失敗しました: ${err.message}`);
        setIsConnecting(false);
      }
    };

    connectToRoom();

    // クリーンアップ関数
    return () => {
      if (localVideoTrack) {
        localVideoTrack.stop();
      }
      if (localAudioTrack) {
        localAudioTrack.stop();
      }
      if (room) {
        room.disconnect();
      }
    };
  }, [roomId]);

  // UI表示部分
  return (
    <div className="video-room-container">
      <h2>ルーム: {roomId}</h2>
      <p>ユーザー名: {username}</p>

      <div className="video-grid">
        {/* ローカルビデオ */}
        <div className="participant-container local-participant">
          <div className="video-container">
            <video ref={localVideoRef} autoPlay playsInline muted />
          </div>
          <div className="participant-name">あなた ({username})</div>
        </div>

        {/* リモート参加者 */}
        {participants.map(participant => (
          <div key={participant.identity} className="participant-container">
            <div className="video-container">
              <video ref={el => { participantRefs.current[participant.identity] = el; }}
                     autoPlay playsInline />
            </div>
            <div className="participant-name">{participant.identity}</div>
          </div>
        ))}
      </div>

      {/* コントロールボタン */}
      <div className="video-controls">
        <button onClick={() => {
          if (localVideoTrack) {
            isVideoEnabled ? localVideoTrack.disable() : localVideoTrack.enable();
            setIsVideoEnabled(!isVideoEnabled);
          }
        }}>
          {isVideoEnabled ? 'ビデオをオフにする' : 'ビデオをオンにする'}
        </button>

        <button onClick={() => {
          if (localAudioTrack) {
            isAudioEnabled ? localAudioTrack.disable() : localAudioTrack.enable();
            setIsAudioEnabled(!isAudioEnabled);
          }
        }}>
          {isAudioEnabled ? 'ミュート' : 'ミュート解除'}
        </button>

        <button onClick={() => {
          if (room) {
            room.disconnect();
            window.location.href = '/';
          }
        }}>
          退室する
        </button>
      </div>
    </div>
  );
};

export default TwilioRoom;

const retryCamera = async () => {
  if (localVideoTrack) {
    localVideoTrack.stop();
  }
  const newVideoTrack = await ensureLocalVideoConnection();
  setLocalVideoTrack(newVideoTrack);
  if (room) {
    room.localParticipant.publishTrack(newVideoTrack);
  }
};

const audioTrack = await createLocalAudioTrack();

participant.audioTracks.forEach(publication => {
  if (publication.isSubscribed && publication.track) {
    publication.track.attach(videoElement);
  }
});