\u3053\u3061\u3089<\/a> \u3092\u53c2\u8003\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002\uff08\u4eca\u5f8c\u4fee\u6b63\u3055\u308c\u308b\u304b\u3082\u3067\u3059\ud83d\udc4d\uff09<\/p>\n\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n
\u7d9a\u3044\u3066\u3001\u30eb\u30fc\u30c8\u3067\u3059\u3002
\n\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u76f4\u63a5\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n
routes\/web.php<\/strong><\/p>\n\/\/ \u7701\u7565\r\n\r\nuse App\\Http\\Controllers\\VideoCallController;<\/strong>\r\n\r\n\/\/ \u7701\u7565\r\n\r\nRoute::prefix('video_call')->controller(VideoCallController::class)->group(function(){<\/strong>\r\n\r\n Route::get('\/', 'index')->name('video_call.index');<\/strong>\r\n\r\n});<\/strong><\/pre>\n\u305d\u3057\u3066\u3001\u3082\u3046\u3072\u3068\u3064Pusher<\/code>\u306e\u8a8d\u8a3c\u306b\u4f7f\u3046\u30eb\u30fc\u30c8\u3092channels.php<\/code>\u306b\u30bb\u30c3\u30c8\u3057\u307e\u3059\u3002<\/p>\nroutes\/channels.php<\/strong><\/p>\n\/\/ \u7701\u7565\r\n\r\nBroadcast::channel('video-call', function ($user) {<\/strong>\r\n\r\n return ['id' => $user->id, 'name' => $user->name];<\/strong>\r\n\r\n});<\/strong><\/pre>\n\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u6b21\u306b\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u3059\u3002
\n\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
pa make:controller VideoCallController<\/strong><\/pre>\n\u3059\u308b\u3068\u3001\u30d5\u30a1\u30a4\u30eb\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u4e2d\u8eab\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
app\/Http\/Controllers\/VideoCallController.php<\/strong><\/p>\n<?php<\/strong>\r\n\r\nnamespace App\\Http\\Controllers;<\/strong>\r\n\r\nuse App\\Models\\User;<\/strong>\r\nuse Illuminate\\Http\\Request;<\/strong>\r\nuse Inertia\\Inertia;<\/strong>\r\n\r\nclass VideoCallController extends Controller<\/strong>\r\n{<\/strong>\r\n public function __construct()<\/strong>\r\n {<\/strong>\r\n $this->middleware('auth'); \/\/ \u8981\u30ed\u30b0\u30a4\u30f3\u306b\u3059\u308b<\/strong>\r\n }<\/strong>\r\n\r\n public function index(Request $request)<\/strong>\r\n {<\/strong>\r\n $user = $request->user();<\/strong>\r\n $other_users = User::select('id', 'name')<\/strong>\r\n ->where('id', '!=', $user->id)<\/strong>\r\n ->get(); \/\/ \u81ea\u5206\u4ee5\u5916\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u53d6\u5f97<\/strong>\r\n\r\n return Inertia::render('VideoCall\/Index', [<\/strong>\r\n 'user' => $user->only('id', 'name'),<\/strong>\r\n 'otherUsers' => $other_users,<\/strong>\r\n ]);<\/strong>\r\n }<\/strong>\r\n}<\/strong><\/pre>\n\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u3067\u306f\u3001\u3053\u3053\u304c\u30e1\u30a4\u30f3\u3067\uff08\u3061\u3087\u3063\u3068\u30cf\u30de\u3063\u305f\uff09\u90e8\u5206\u3067\u3059\u3002<\/p>\n
resources\/js\/Pages\/VideoCall\/Index.jsx<\/strong><\/p>\nimport {useEffect, useRef} from \"react\";<\/strong>\r\n\r\nexport default function Index(props) {<\/strong>\r\n\r\n \/\/ User<\/strong>\r\n const user = props.user;<\/strong>\r\n const otherUsers = props.otherUsers;<\/strong>\r\n\r\n \/\/ Pusher<\/strong>\r\n const pusherKey = import.meta.env.VITE_PUSHER_APP_KEY;<\/strong>\r\n const pusherCluster = import.meta.env.VITE_PUSHER_APP_CLUSTER;<\/strong>\r\n\r\n \/\/ Video<\/strong>\r\n const myVideoRef = useRef(null);<\/strong>\r\n const otherVideoRef = useRef(null);<\/strong>\r\n const videoStreamRef = useRef(null);<\/strong>\r\n const videoChannelRef = useRef(null);<\/strong>\r\n const peers = useRef({});<\/strong>\r\n const getEventName = userId => `client-signal-${userId}`;<\/strong>\r\n const getPeer = (targetUserId, initiator) => {<\/strong>\r\n\r\n if(peers.current[targetUserId] === undefined) {<\/strong>\r\n\r\n const peer = new Peer({<\/strong>\r\n initiator,<\/strong>\r\n stream: videoStreamRef.current,<\/strong>\r\n trickle: false,<\/strong>\r\n });<\/strong>\r\n\r\n peer<\/strong>\r\n .on('signal', data => {<\/strong>\r\n\r\n const eventName = getEventName(targetUserId);<\/strong>\r\n videoChannelRef.current.trigger(eventName, {<\/strong>\r\n userId: user.id,<\/strong>\r\n data: data,<\/strong>\r\n });<\/strong>\r\n\r\n })<\/strong>\r\n .on('stream', stream => otherVideoRef.current.srcObject = stream)<\/strong>\r\n .on('close', () => deletePeer(targetUserId));<\/strong>\r\n\r\n \/\/ \u901a\u8a71\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u3092\u8ffd\u52a0<\/strong>\r\n peers.current = {<\/strong>\r\n ...peers.current,<\/strong>\r\n ...{ [targetUserId]: peer }<\/strong>\r\n };<\/strong>\r\n\r\n }<\/strong>\r\n\r\n return peers.current[targetUserId];<\/strong>\r\n\r\n };<\/strong>\r\n const deletePeer = userId => {<\/strong>\r\n\r\n const peer = peers.current[userId];<\/strong>\r\n\r\n if(peer !== undefined) {<\/strong>\r\n\r\n peer.destroy();<\/strong>\r\n\r\n }<\/strong>\r\n\r\n const { [userId]: _, ...newPeers } = peers.current; \/\/ \u8a72\u5f53\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u3092\u524a\u9664<\/strong>\r\n peers.current = newPeers;<\/strong>\r\n\r\n };<\/strong>\r\n useEffect(() => {<\/strong>\r\n\r\n navigator.mediaDevices.getUserMedia({ video: true, audio: true })<\/strong>\r\n .then(stream => {<\/strong>\r\n\r\n myVideoRef.current.srcObject = stream;<\/strong>\r\n videoStreamRef.current = stream;<\/strong>\r\n\r\n const pusher = new Pusher(pusherKey, {<\/strong>\r\n authEndpoint: '\/broadcasting\/auth',<\/strong>\r\n cluster: pusherCluster,<\/strong>\r\n });<\/strong>\r\n const channel = pusher.subscribe('private-video-call');<\/strong>\r\n const eventName = getEventName(user.id);<\/strong>\r\n channel.bind(eventName, signal => {<\/strong>\r\n\r\n const userId = signal.userId;<\/strong>\r\n const peer = getPeer(userId, false);<\/strong>\r\n peer.signal(signal.data);<\/strong>\r\n\r\n });<\/strong>\r\n videoChannelRef.current = channel;<\/strong>\r\n\r\n });<\/strong>\r\n\r\n }, []);<\/strong>\r\n\r\n return (<\/strong>\r\n <div className=\"p-5 bg-gray-100\"><\/strong>\r\n <div className=\"p-4 rounded-lg bg-white mb-3\"><\/strong>\r\n {otherUsers && otherUsers.map(otherUser => (<\/strong>\r\n <div key={otherUser.id}><\/strong>\r\n <a<\/strong>\r\n href=\"#\"<\/strong>\r\n className=\"text-blue-500\"<\/strong>\r\n onClick={() => getPeer(otherUser.id, true)}><\/strong>\r\n {otherUser.name} \u3055\u3093\u3068\u901a\u8a71\u3059\u308b<\/strong>\r\n <\/a><\/strong>\r\n <\/div><\/strong>\r\n ))}<\/strong>\r\n <\/div><\/strong>\r\n <div className=\"flex\"><\/strong>\r\n <div className=\"flex-1 p-3 border bg-white\"><\/strong>\r\n <div className=\"text-center\">\u81ea\u5206\u306e\u6620\u50cf<\/div><\/strong>\r\n <video ref={myVideoRef} autoPlay><\/video><\/strong>\r\n <\/div><\/strong>\r\n <div className=\"px-5 pt-3\"><\/strong>\r\n <div className=\"text-center font-bold\">\u2194<\/div><\/strong>\r\n <\/div><\/strong>\r\n <div className=\"flex-1 p-3 border bg-white\"><\/strong>\r\n <div className=\"text-center\">\u76f8\u624b\u306e\u6620\u50cf<\/div><\/strong>\r\n <video ref={otherVideoRef} autoPlay><\/video><\/strong>\r\n <\/div><\/strong>\r\n <\/div><\/strong>\r\n <\/div><\/strong>\r\n );<\/strong>\r\n\r\n
![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2021\/08\/no_13.png\")
\u300c\u8a18\u4e8b\u306e\u4e2d\u3067![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_11.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_1.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_2.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_3.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_4.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_5.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_6.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_7.png\")
<\/p>\n![\"\"](\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2022\/10\/laravel_react_video_call_8.png\")
<\/p>\n