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); color: #0b1023; box-shadow: 0 10px 20px rgba(108,140,255,.25), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .06s ease, filter .2s ease; } .btn:hover{ filter: brightness(1.05); } .btn:active{ transform: translateY(1px); } .btn.sec{ background: linear-gradient(180deg, #1b223d, #151a31); color: var(--text); border:1px solid var(--border); box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);} .btn.ok{ background: linear-gradient(180deg, #60df9f, #2ecc71); color:#07170f;} .btn.warn{ background: linear-gradient(180deg, #ffb84d, #ff9900); color:#1b1200;} .row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .pill{ font-size: 12px; color:#cfe0ff; background:#0b0f1f; border:1px solid var(--border); padding:6px 10px; border-radius:999px; } .input, select, textarea{ background: #0c1021; border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 10px 12px; outline:none; min-width:0; } textarea{ width:100%; min-height:90px; resize: vertical; } .quiet{ color: var(--muted); font-size: 12px; } .error{ color: var(--err); background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.25); border-radius: 12px; padding: 10px 12px; font-size: 13px; display:none; } .good{ color: var(--ok); } .warn{ color: var(--warn); } .share{ display:grid; grid-template-columns: 180px 1fr; gap:16px; align-items:center; border:1px dashed var(--border); border-radius:12px; padding:12px; } @media (max-width: 560px){ .share{ grid-template-columns:1fr; } } #qrCanvas{ width:180px; height:180px; background:#fff; border-radius:12px; } .linkline{ display:flex; gap:8px; align-items:center; margin-top:8px; } .link{ flex:1; overflow:auto; white-space:nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; background:#0b0f1f; border:1px solid var(--border); padding:8px 10px; border-radius:10px;} .videos{ position: relative; background:#0b0f1f; border:1px solid var(--border); border-radius:12px; over.........完整代码请登录后点击上方下载按钮下载查看
网友评论0