js+webrtc实现p2p文字音视频大文件点对点互转传输聊天代码-html代码-BFW代码库

js+webrtc实现p2p文字音视频大文件点对点互转传输聊天代码

代码语言：html

所属分类：多媒体

代码描述：js+webrtc实现p2p文字音视频大文件点对点互转传输聊天代码，可设置自己的iceserver服务器，默认是免费的google的iceserver，注意在国内可能外网p2p会失败，请更换国内的iceserver。默认打开页面生成二维码，将二维码发送给对方，然后就可以p2p的进行文本聊天、文件互传、音视频聊天了。

代码标签： js webrtc p2p 文字音视频大文件点对点互转传输聊天代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>P2P 音视频 · 聊天 · 文件传输 (WebRTC)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;600&display=swap" rel="stylesheet">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/peerjs.min.js"></script>
  <!-- QRCode -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/qrcode.1.5.0.js"></script>
  <style>
    :root{
      --bg:#0f1221;
      --card:#14182a;
      --muted:#b8c1d8;
      --text:#eaf0ff;
      --brand:#6c8cff;
      --brand-2:#9f7aea;
      --ok:#2ecc71;
      --warn:#ffb200;
      --err:#ff6b6b;
      --border:rgba(255,255,255,0.08);
      --shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    *{ box-sizing: border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:"Inter","Noto Sans SC",system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background:
        radial-gradient(1200px 600px at 10% -20%, rgba(108,140,255,0.25), transparent 50%),
        radial-gradient(900px 500px at 90% -10%, rgba(159,122,234,0.25), transparent 50%),
        linear-gradient(180deg, #0a0d1a, #0f1221 40%, #0f1221);
      color:var(--text);
    }
    .wrap{ max-width:1200px; margin: 28px auto 60px; padding: 0 18px; }
    header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
    .brand{ display:flex; align-items:center; gap:12px;}
    .logo{ width:44px;height:44px;border-radius:12px; background: conic-gradient(from 220deg,var(--brand),var(--brand-2),var(--brand)); box-shadow: var(--shadow); }
    h1{ margin:0; font-size: 26px; letter-spacing:.2px; background: linear-gradient(90deg,#fff,#cdd7ff); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700;}
    .sub{ color:var(--muted); font-size:13px; }
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 16px;
    }
    .grid{ display:grid; grid-template-columns: 1.4fr .9fr; gap:16px; }
    @media (max-width: 980px){ .grid{ grid-template-columns:1fr; } }
    .section-title{ font-size: 14px; color: var(--muted); font-weight:600; margin: 0 0 10px; }
    .statusbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
    .status{ font-size:12px; color:var(--muted); margin-left:auto; }
    .btn{
      appearance: none; border:0; cursor:pointer; border-radius: 12px;
      padding: 10px 14px; font-weight:600; letter-spacing:.3px;
      background: linear-gradient(180deg, #6C8CFF, #5b7cf7);
      .........完整代码请登录后点击上方下载按钮下载查看