[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる 番外編#3 ~MUIで見た目を整える~

概要

WebRTCとReactでビデオ電話アプリを作る番外編第3回です。今回はReactのUIライブラリであるMaterial-UIを用いて外見を整えていきます。

MUIのインストール

frontendディレクトリでnpm install @mui/material @emotion/react @emotion/styled でOKです。とても簡単

コードの変更

今回のコードはGitHubのfrontend/src/VideoConnect5.jsに記載してます。
大きく変えたのは以下の部分です。 VideoConnect5.js

import React from 'react';
// import './Video.css';
import socketClient from 'socket.io-client';
import { Box, Button, Grid, Card, CardMedia, CardActions, Typography, CardContent } from '@mui/material'; // 追加

// 省略
// 以下大幅変更
return (
    <div className="VideoView">
      <Grid container spacing={2} alignItems="flex-start" justifyContent="center">
        <Grid item xs>
          <div>
            <Card sx={{ width: 400, height: 280 }}>
              <CardMedia sx={{ height: 225 }} component="video" playsInline autoPlay ref={localVideoRef} />
              <CardActions>
                <Button variant="contained" onClick={calling} disabled={!canCalling}>CALL</Button>
                <Button variant="contained" onClick={allowJoin} disabled={!isKnocking}>ALLOW</Button>
              </CardActions>
            </Card>
          </div>
        </Grid>
        <Grid item xs>
          <Card sx={{ width: 400, height: 225 }}>
            <CardMedia sx={{ height: 225 }} component="video" playsInline autoPlay ref={remoteVideoRef} />
          </Card>
        </Grid>
      </Grid>
    </div>
  )

まとめ

• MUIを使うと簡単に見た目を整えられる！すごい！