Currently, I am in the process of learning WebRTC with the goal of creating a basic chat system that includes video call functionality. To achieve this, I have incorporated Django channels to handle the websockets and establish connections between peers. However, an issue has arisen where I am unable to retrieve the media stream from the other peer and display it on the screen.
The connection itself appears to be successful as messages are successfully transmitted via sockets without any errors appearing in the console. Despite this, I am left wondering what exactly I might be overlooking.
The sequence logic is structured as follows:
User1 enters the virtual room
User2 joins the room
User1 sends a message to User2 through the established socket connection
User1 initiates a video call by pressing "call" to communicate with User2, access local media, and start the WebRTC connection
User2 responds to the call by accepting it, responding with their local media, and establishing the bi-directional communication
Edit 1: A Working Order of Steps:
User1 enters the room
User1 initiates a call by clicking "call", obtaining local media, and initializing the WebRTC connection
User2 enters the room
User2 accepts the call by clicking "respond", sharing their local media, and finalizing the connection
User1 also clicks "respond"
It's puzzling as to why this specific order seems to work - particularly where "pc.ontrack" appears to only trigger in this precise sequence. Additionally, the ability to commence a WebRTC connection before the second peer joins the room raises questions.
room.html:
<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
{% load static %}
{% extends 'main/header.html' %}
{% block content %}
<body>
<div class="container">
<a class="waves-effect waves-light btn prefix" id='call'>call</a>
<a class="waves-effect waves-light btn prefix" id='respond'>respond</a>
<div class="copy">Send your URL to a friend to start a video call</div>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<textarea id="chat-log" class="materialize-textarea" ></textarea><br/>
<div class="input-field col s12 ">
<input id="chat-message-input" type="text" />
<a class="waves-effect waves-light btn prefix" id="chat-message-submit"><i class="material-icons right">send</i></a>
</div>
</div>
</body>
<script>src = "{% static 'main/js/client.js' %}"></script>
{% endblock %}
client.js:
// Generate random room name if needed
var roomName = "{{ room_name|escapejs }}";
var drone = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + roomName + '/');
...
Various events such as sending messages, handling offers, initiating calls, and managing ICE candidates are meticulously detailed within the client.js script.
The console outputs illustrate the interactions between users, the initiation of video calls, and the exchange of media streams as part of the debugging process.