WebSocket 是一種在單個 TCP 連接上進行全雙工通信的通信協議，通常用于實時數據傳輸。要在 WebSocket 上傳輸圖片和視頻，可以將圖片和視頻文件轉換為 Base64 編碼的字符串，然后通過 WebSocket 發送。

以下是一個示例代碼，演示如何使用 WebSocket 傳輸圖片和視頻：

1. 客戶端代碼：

const ws = new WebSocket('ws://localhost:3000');

ws.onopen = () => {
  console.log('WebSocket 連接成功');
  
  // 發送圖片
  const image = new Image();
  image.src = 'image.png';
  image.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    
    const imageData = canvas.toDataURL('image/png');
    ws.send(imageData);
  };
  
  // 發送視頻
  const video = document.createElement('video');
  video.src = 'video.mp4';
  video.oncanplay = () => {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0);
    
    const videoData = canvas.toDataURL('image/jpeg');
    ws.send(videoData);
  };
};

ws.onmessage = (event) => {
  console.log('收到消息：', event.data);
};

2. 服務端代碼：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (ws) => {
  console.log('客戶端已連接');
  
  ws.on('message', (data) => {
    console.log('收到數據：', data);
    
    // 處理圖片
    if (data.startsWith('data:image')) {
      // 對 Base64 編碼的圖片數據進行處理
    }
    
    // 處理視頻
    if (data.startsWith('data:video')) {
      // 對 Base64 編碼的視頻數據進行處理
    }
  });
});

在客戶端代碼中，我們首先創建一個 WebSocket 連接，并在連接成功后發送圖片和視頻數據。在服務端代碼中，我們創建一個 WebSocket 服務器，并在收到數據后對圖片和視頻數據進行處理。

請注意，由于 Base64 編碼會增加數據大小，因此傳輸大型圖片和視頻可能會導致性能問題。在實際應用中，建議使用其他方式（如 CDN 或直接傳輸文件）來傳輸大型圖片和視頻。