Не удалось выполнить 'setRemoteDescription' на 'RTCPeerConnection' на webrtc

Так что я следую учебнику TauhidCodes на youtube здесь: https://www.youtube.com/watch?v=MBOlZMLaQ8g

Это немного отличается, потому что я использую обратные урлы для разных названий комнат.

Я реализую систему видеозвонков, которая позволяет более чем 3 пользователям и выше присоединиться, введя соответствующий url, например https://127.0.0.1:8000/video/test/. Я открываю 2 вкладки в одном и том же окне и нажимаю кнопку начать звонок для обеих, и они обе выдают ошибку.

Ошибка

test/:1 Uncaught (in promise) InvalidStateError: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable

<!DOCTYPE html>
<html>

<head>
  <style>
    button {
      border: 0;
      background-color: orange;
      padding: 10px;
      color: white;
      border-radius: 7px;
    }

    video {
      border-radius: 15px;
    }

    .videoContainer {
      display: flex;
      margin: 20px;
      width: 640px;
    }

    .videoContainer h2 {
      color: white;
      position: relative;
      bottom: -380px;
      left: -350px;
      width: max-content;
    }

    #meet {
      display: flex;
    }

    #recordButton.recording {
      background-color: red;
    }

    #downloadButton {
      background-color: #4caf50;
    }

    button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
  </style>
  <title>A Free Bird Video Call</title>
  <script src="https://meet.jit.si/external_api.js"></script>
</head>
{% load static %}
<body>
  <div id="meet">
    <button id="videoOff" onclick="toggleVideoOff()" disabled>Video Off</button>
    <button id="audioMute" onclick="toggleAudioMute()" disabled>Mute Audio</button>
    <div id="remote-videos">
      <div id="videoContainer">
        <video id="localVideo" autoplay playsinline></video>
        <h2>{{ request.user.full_name }}</h2>
      </div>
    </div>
    <!-- <div class="videoContainer">
      <video id="remoteVideo" autoplay playsinline></video>
      <h2></h2>
    </div> -->
  </div>

  <div>
    <button onclick="startCall()">Start Call</button>
    <button id="recordButton" onclick="toggleRecording()" disabled>
      Start Recording
    </button>
    <button id="downloadButton" onclick="downloadRecording()" disabled>
      Download Recording
    </button>
    <button id="shareScreenButton" onclick="shareScreen()">Share Screen</button>
  </div>
  <div id="chat">
    <h3>Chat</h3>
    <div id="messages">
      <ul id="messageList"></ul>
      <input type="text" id="messageInput" placeholder="Type your message here...">
      <button id="sendMessageButton">Send</button>
    </div>
  </div>
  <input type="hidden" id="user_id" value="{{ request.user.id }}">
<script src="{% static 'js/video_call.js' %}" type="text/javascript" data-room-name="{{ room_name }}"></script>
</body>

</html>

Я попытался посмотреть код, но там не было ничего особенного. Я не думаю, что в нем есть ошибки... Я ожидаю, что он покажет два видеопотока, один локальный и один удаленный, используя две вкладки с открытой комнатой видеовызова. Раньше он показывал, что есть 3 видеопотока, когда я нажимал кнопку начала вызова, но только на одной вкладке. На другой вкладке возникала та же ошибка, о которой я говорил. Я пытаюсь заставить это работать, потому что это некоммерческая организация и я не хочу тратить лишние деньги.

На самом деле я пропустил инструкцию return в моем файле consumers.py. Теперь работает.

Вернуться на верх