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

最新推荐文章于 2024-05-23 14:45:38 发布

Hxxa

最新推荐文章于 2024-05-23 14:45:38 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签：网页视频聊天 SSL证书 stun

本文链接：https://blog.youkuaiyun.com/qq_32691569/article/details/88964257

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>
  <