websocket怎么传输图片视频

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);

}
    ;
    

1. 服务端代码：

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 或直接传输文件）来传输大型图片和视频。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！