webrtc实现p2p点对点文字聊天音视频通话大文件传输示例代码-html代码-BFW代码库

webrtc实现p2p点对点文字聊天音视频通话大文件传输示例代码

代码语言：html

所属分类：其他

代码描述：webrtc实现p2p点对点文字聊天音视频通话大文件传输示例代码，通过分享链接或者扫码二维码就能将2人建立p2p的专属通道，可进行音视频聊天、文字聊天、视频通话、大文件传输。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC 多功能通信室</title>
  <!-- Scaledrone 信令服务 -->
  <script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/qrcode.js"></script>
  
  <style>
    :root {
      --primary-color: #2962ff;
      --secondary-color: #5f6b7c;
      --background-color: #0b1020;
      --surface-color: #11162a;
      --text-color: #e9edf5;
      --muted-color: #9aa3b2;
      --border-color: rgba(255,255,255,0.08);
      --success-color: #22c55e;
      --error-color: #f43f5e;
      --info-color: #38bdf8;
      --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
      --radius: 14px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
      background: radial-gradient(1200px 700px at 30% 10%, #1b244a 0%, #0b1020 60%);
      color: var(--text-color);
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    .app-container {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      gap: 16px;
      padding: 16px;
    }

    /* 视频区域 */
    .video-area {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      padding: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      box-shadow: var(--shadow-1);
      position: relative;
      overflow: hidden;
    }

    .video-area::before {
      content: "";
      position: absolute;
      inset: -20%;
      background: radial-gradient(600px 300px at 85% 85%, rgba(41,98,255,0.12), transparent 60%),
                  radial-gradient(600px 300px at 20% 20%, rgba(56,189,248,0.12), transparent 60%);
      pointer-events: none;
    }

    .video-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 4px 14px;
      color: var(--muted-color);
      font-size: 13px;
    }

    .video-container {

      position: relative;
      min-height: 280px;
    }

    video {
      border-radius: 12px;
      background-color: #000;
      box-shadow: 0 10px 28px rgba(0,0,0,0.35);
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.06);
    }

    #localVideo { 
        position: absolute;
        right:0;
        top:0;
        width:168px;
        height: 100px;
        outline: 1px solid rgba(41,98,255,0.35); }
    #remoteVideo { outline: 1px solid rgba(154,163,178,0.25); }

    /* 控制条 */
    .controls {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(17, 22, 42, 0.6);
      backdrop-filter: blur(10px);
      padding: 10px 14px;
      border-radius: 50px;
      display: flex;
      gap: 12px;
      z-index: 10;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }

    .control-btn {
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      padding: 10px;
      border-radius: 50%;
      transition: all 0.2s ease;
      width: 44px; height: 44px; display: grid; place-items:center;
    }
    .control-btn:hover {
      transform: translateY(-1px);
      ba.........完整代码请登录后点击上方下载按钮下载查看