原生js实现webrtc视频通话在线1对1教学效果代码-html代码-BFW代码库

原生js实现webrtc视频通话在线1对1教学效果代码

代码语言：html

所属分类：多媒体

代码描述：原生js实现webrtc视频通话在线1对1教学效果代码，需在https下打开，并将url地址发送给另外一个人，即可实现视频通话

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

<!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>
</head>
<body>
  <div class="copy">将url地址发送给你的好友一起视频通话吧</div>
  <video id="localVideo" autoplay muted></video>
  <video id="remoteVideo" autoplay></video>


 
<script>
// 如果需要，生成随机的房间名称
if (!location.hash) {
  location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
const roomHash = location.hash.substring(1);
 
console.log(roomHash)
// 用您自己的通道ID替换
const drone = new ScaleDrone('yiS12Ts5RdNhebyM');
//房间名称前须加上“可观察到的-”
const roomName = 'observable-' + roomHash;
const configuration = {
    'iceServers': [
        {
            'url': 'stun:web.debug.only.bfw.wiki:3478',
        },
        {
            'url': 'turn:web.debug.only.bfw.wiki:3478',
            'username': 'bfw',
            'credential': 'bfw'
        }
    ]
};


let room;
let pc;
 
 
function onSuccess() {};
function onError(error) {
  console.error(error);
};
 
drone.on('open', error => {
  if (error) {
    return console.error(error);
  }
  room = drone.subscribe(roomName);
  room.on('open', error => {
    if (error) {
      onError(error);
    }
  });
  // 我们连接到房间并接收到一组“成员”
  // 连接到房间(包括我们)。信令服务器准备好了。
  room.on('members', members => {
    console.log('MEMBERS', members);
    // 如果我们是第二个连接到房间的用户，我们将创建offer
    .........完整代码请登录后点击上方下载按钮下载查看