webrtc实现局域网文件p2p点对点互转传输发送接收代码-html代码-BFW代码库

webrtc实现局域网文件p2p点对点互转传输发送接收代码

代码语言：html

所属分类：其他

代码描述：webrtc实现局域网文件p2p点对点互转传输发送接收代码

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

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>局域网 WebRTC 文件传输（纯前端）</title>
<style>
  :root{
    --bg:#0b1220; --card:#0e1628; --text:#e5ecff; --muted:#93a4bf;
    --line:#1e2b44; --accent:#5b8cff; --good:#10b981; --warn:#f59e0b; --danger:#ef4444;
    --radius:14px; --shadow:0 8px 28px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0;background:radial-gradient(1200px 600px at 80% -100px, #12203a 0, #0b122000 60%),var(--bg);
    color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Inter,Arial,sans-serif;}
  .container{max-width:1100px;margin:28px auto;padding:0 16px 60px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  h1{font-size:24px;margin:0 0 8px} h2{font-size:18px;margin:0 0 10px}
  .muted{color:var(--muted)} .row{display:flex;gap:14px;flex-wrap:wrap}
  .col{flex:1 1 320px} .btn{appearance:none;border:1px solid var(--line);background:#14203a;color:#dbe6ff;
    padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
  .btn:hover{border-color:#2a3a63} .btn.primary{background:linear-gradient(135deg,#4b74ff,#7aa5ff);color:#fff;border-color:transparent}
  .btn.good{background:#0f5132;color:#c6f6d5;border-color:#0a3f26}
  .btn.warn{background:#5c3d09;color:#fde68a;border-color:#4a2f07}
  .input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0f1a31;color:#cfe0ff}
  textarea{min-height:92px;resize:vertical}
  label{font-size:12px;color:var(--muted);display:block;margin:10px 0 6px}
  .grid{display:grid;gap:12px} .grid.cols-2{grid-template-columns:1fr 1fr}
  @media(max-width:720px){.grid.cols-2{grid-template-columns:1fr}}
  .ip-list{display:flex;flex-wrap:wrap;gap:8px}
  .chip{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#0f1b33;color:#bcd3ff;font-size:12px}
  .log{background:#0b1120;border:1px solid #152039;border-radius:10px;padding:10px;font-family:ui-monospace,Consolas,monospace;height:140px;overflow:auto}
  progress{width:100%;height:12px;border:1px solid #1e2b44;border-radius:999px;background:#0b1220}
  progress::-webkit-progress-bar{background:#0b1220;border-radius:999px}
  progress::-webkit-progress-value{background:linear-gradient(90deg,#4b74ff,#5bbcff);border-radius:999px}
  .flex{display:flex;align-items:center;gap:8px} .right{margin-left:auto}
  a.dl{color:#5bbcff;text-decoration:none} a.dl:hover{text-decoration:underline}
  .note{font-size:12px;color:#9fb0d1}
</style>
</head>
<body>
<div class="container">
  <div class="card" style="margin-bottom:14px">
    <h1>局域网 WebRTC 文件传输（P2P / 纯前端）</h1>
    <div class="muted">说明：浏览器出于安全限制，WebRTC 必须交换一次“信令”（SDP/ICE）。本页提供“复制粘贴”的无服务器信令方式。在同一局域网内可直连（使用主机候选/或 mDNS），不走公网。</div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card">
        <h2>本机信息</h2>
        &.........完整代码请登录后点击上方下载按钮下载查看