forked from perspectivedev/handy_sandbox_folder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes.txt
122 lines (93 loc) · 6.21 KB
/
notes.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
# -------------------- Start File imports --------------------
# -------------------- End File imports --------------------
# -------------------- Start Regex variables --------------------
# -------------------- End Regex variables --------------------
# -------------------- Start of Class Declaration and Constructor init --------------------
# -------------------- End of Class Declaration and Constructor init --------------------
# -------------------- Start of @classmethods --------------------
# -------------------- End of @classmethods --------------------
# -------------------- Start of @staticmethods --------------------
# -------------------- End of @staticmethods --------------------
# -------------------- Start Controllers/Routes for models --------------------
# -------------------- End Controllers/Routes for models --------------------
<link rel="stylesheet" type="text/css" href="./static/css/style.css">
<script src="./static/js/main.js" defer></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlaskChat</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/chat.css') }}">
</head>
<body>
<h1>FlaskChat</h1>
<div class="chat_areas">
<h2>Public Rooms</h2>
<fieldset class="chat fs">
<legend>Current Room: <span id="current_room"></span></legend>
<div id="current_chat">
<p>Join at least one room and then select it from the right</p>
</div>
</fieldset>
<div class="right">
<fieldset class="joined fs" id="rooms_joined">
<legend>Rooms Joined</legend>
{% for room in logged_user.joined_rooms %}
<div class="joined_room" id="joined{{room.id}}">
<p class="room_select" onclick="getHistory({{room.id}})"><span id="newFor{{room.id}}" class="unreads"></span> {{room.name}} </p>
<button onclick="leaveRoom({{room.id}})" class="btn">Leave</button>
</div>
{% endfor %}
</fieldset>
<fieldset class="invites fs">
<legend>Rooms Invites</legend>
</fieldset>
</div>
</div>
<form class="add_message" onsubmit="send(event)">
<input type="text" name="message" id="message" placeholder="message">
<button class="btn">Send</button>
</form>
<div class="nav">
<p>Logged in as: {{logged_user.username}}</p>
<form action="/my_rooms">
<button class="btn">My Rooms</button>
</form>
<form action="/users/logout">
<button class="btn">Log Out</button>
</form>
</div>
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/chat.js') }}"></script>
</body>
</html>
<------------------------------- section for create a room form ------------------------------------>
<div class="flex flex-col">
<form action="/my_rooms">
<div class="flex flex-row gap-4 items-center justify-center m-4 bg-white">
<label for="create_room" class="text-right">Create A Room: </label>
<input type="text" id="name" name="name" class="border border-slate-300 rounded-lg">
<button type="submit" class="p-2 border rounded-lg bg-blue-700 hover:bg-blue-400 text-white">Submit</button>
</div>
</form>
</div>
<-------------------------------- close section for create a room form ----------------------------------->
Building a Flask chat and video application with Socket.IO can be more complex than the previous example,
as it involves real-time video streaming and handling WebRTC connections. However,
I can provide you with an overview of the steps involved. Here's a high-level outline of the process:
1. Set up the Flask app and SocketIO, similar to the previous example.
2. Create an HTML template that includes video elements for the local and remote streams, as well as buttons for starting and stopping the video call.
3. Implement the signaling server using SocketIO. This server will handle the WebRTC signaling process, such as exchanging session descriptions (SDP) and ICE candidates between the clients.
4. Define event handlers in your Flask app to handle WebRTC signaling messages sent through SocketIO. These handlers will parse the messages and forward them to the appropriate clients.
5. Implement the WebRTC functionality in JavaScript on the client-side. This includes creating a peer connection, capturing the local video stream, sending signaling messages, and handling remote stream reception.
6. Connect the Flask app, SocketIO, and WebRTC components. When a user initiates a video call, the appropriate signaling messages will be sent through SocketIO, allowing the clients to establish a WebRTC connection.
7. Handle the video call logic in your Flask app. This involves forwarding video streams between clients, displaying the local and remote video streams, and handling actions like starting and stopping the video call.
Please note that building a complete video chat application requires a more detailed implementation and
handling of various edge cases. You may need to refer to WebRTC documentation and tutorials for a deeper
understanding of the technology and its implementation. Additionally, it's essential to consider security
aspects, such as encryption and user authentication, to ensure a secure and reliable video chat experience.
Given the complexity of building a real-time video chat application, it may be helpful to explore existing libraries
and frameworks that simplify the process, such as SimpleWebRTC, Twilio Video, or OpenTok. These frameworks provide higher-level
abstractions and take care of many of the underlying complexities of WebRTC.