WebRTC网页视频聊天（包含stun部署及SSL证书申请方法）

最新推荐文章于 2025-11-10 16:45:52 发布

原创

最新推荐文章于 2025-11-10 16:45:52 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#网页视频聊天 #SSL证书 #stun

本文介绍了如何使用WebRTC构建一个简单的网页视频聊天室，包括遇到的STUN服务器部署问题和解决方法，以及SSL证书的申请流程。通过部署自己的STUN服务器以提高响应速度，并推荐使用Let's Encrypt来获取免费的SSL证书，确保网站的安全访问。

使用WebRTC实现一个简单的网页聊天室

效果图大概是这样，因为不想曝光，放一个网图

直接上页面和源码

index.html

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    body {
      display: flex;
      height: 100vh;
      margin: 0;
      align-items: center;
      justify-content: center;
      padding: 0 50px;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    video {
      max-width: calc(50% - 100px);
      margin: 0 50px;
      box-sizing: border-box;
      border-radius: 2px;
      padding: 0;
      box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
    }
    .copy {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);
    }
  </style>
  <