added room id in exchange parameters
This commit is contained in:
parent
5245f2257d
commit
c3b072ba38
|
@ -17,6 +17,7 @@ let localstream;
|
|||
|
||||
window.onload = () => {
|
||||
currentUser = document.getElementById("current-user").innerHTML;
|
||||
console.log(currentUser)
|
||||
localVideo = document.getElementById("local-video");
|
||||
remoteVideoContainer = document.getElementById("remote-video-container");
|
||||
};
|
||||
|
@ -41,21 +42,48 @@ document.onreadystatechange = async () => {
|
|||
};
|
||||
|
||||
// find chatroom
|
||||
// const handleJoinSession = async () => {
|
||||
// App.session = await App.cable.subscriptions.create("VideoSessionChannel", {
|
||||
// connected: () => {
|
||||
// broadcastData({
|
||||
// type: JOIN_ROOM,
|
||||
// from: currentUser
|
||||
// });
|
||||
// },
|
||||
// received: data => {
|
||||
// console.log("received", data);
|
||||
// if (data.from === currentUser) return;
|
||||
// switch (data.type) {
|
||||
// case JOIN_ROOM:
|
||||
// return joinRoom(data);
|
||||
// case EXCHANGE:
|
||||
// if (data.to !== currentUser) return;
|
||||
// return exchange(data);
|
||||
// case REMOVE_USER:
|
||||
// return removeUser(data);
|
||||
// default:
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
|
||||
|
||||
const handleJoinSession = async () => {
|
||||
App.session = await App.cable.subscriptions.create({
|
||||
App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
|
||||
channel: "ChatRoomsChannel",
|
||||
room: chatroomId
|
||||
}, {
|
||||
connected: () => {
|
||||
console.log(chatroomId)
|
||||
broadcastData({
|
||||
type: JOIN_ROOM,
|
||||
from: currentUser
|
||||
from: currentUser,
|
||||
room: chatroomId
|
||||
});
|
||||
},
|
||||
received: data => {
|
||||
console.log("received", data);
|
||||
console.log(data)
|
||||
if (data.from === currentUser) return;
|
||||
switch (data.type) {
|
||||
case JOIN_ROOM:
|
||||
|
@ -93,7 +121,6 @@ const joinRoom = data => {
|
|||
};
|
||||
|
||||
const removeUser = data => {
|
||||
console.log("removing user", data.from);
|
||||
let video = document.getElementById(`remoteVideoContainer+${data.from}`);
|
||||
video && video.remove();
|
||||
delete pcPeers[data.from];
|
||||
|
@ -101,18 +128,21 @@ const removeUser = data => {
|
|||
|
||||
|
||||
const broadcastData = data => {
|
||||
fetch("sessions", {
|
||||
if (data.type === EXCHANGE) {
|
||||
console.log("yayyy")
|
||||
}
|
||||
fetch("chat_room_sessions", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
headers: { "content-type": "application/json" }
|
||||
headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
|
||||
});
|
||||
};
|
||||
|
||||
const createPC = (userId, isOffer) => {
|
||||
let pc = new RTCPeerConnection(ice);
|
||||
let test = userId
|
||||
pcPeers[userId] = pc;
|
||||
pc.addStream(localstream);
|
||||
|
||||
if (isOffer) {
|
||||
pc
|
||||
.createOffer()
|
||||
|
@ -122,7 +152,8 @@ const createPC = (userId, isOffer) => {
|
|||
type: EXCHANGE,
|
||||
from: currentUser,
|
||||
to: userId,
|
||||
sdp: JSON.stringify(pc.localDescription)
|
||||
sdp: JSON.stringify(pc.localDescription),
|
||||
room: chatroomId
|
||||
});
|
||||
})
|
||||
.catch(logError);
|
||||
|
@ -134,7 +165,8 @@ const createPC = (userId, isOffer) => {
|
|||
type: EXCHANGE,
|
||||
from: currentUser,
|
||||
to: userId,
|
||||
candidate: JSON.stringify(event.candidate)
|
||||
candidate: JSON.stringify(event.candidate),
|
||||
room: chatroomId
|
||||
});
|
||||
}
|
||||
};
|
||||
|
@ -191,7 +223,8 @@ const exchange = data => {
|
|||
type: EXCHANGE,
|
||||
from: currentUser,
|
||||
to: data.from,
|
||||
sdp: JSON.stringify(pc.localDescription)
|
||||
sdp: JSON.stringify(pc.localDescription),
|
||||
room: chatroomId
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -5,6 +5,20 @@ class ChatRoomsController < ApplicationController
|
|||
end
|
||||
|
||||
def create
|
||||
# HTTP status code 200 with an empty body
|
||||
head :no_content
|
||||
puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>11123213213213123213"
|
||||
puts params
|
||||
puts ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>11123213213213123213"
|
||||
|
||||
ActionCable.server.broadcast "chat_room_#{params[:room]}", session_params
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def session_params
|
||||
# SDP = Session description protocol (codec info from client)
|
||||
# Candidate = ICE candidates (e.g. TURN and STUN server)
|
||||
params.permit(:type, :from, :to, :sdp, :candidate, :room)
|
||||
end
|
||||
end
|
||||
|
|
|
@ -17,10 +17,8 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
|
|||
room: chatroomId
|
||||
}, {
|
||||
connected: () => {
|
||||
console.log('Connected to ChatRoom ' + chatroomId)
|
||||
},
|
||||
received: data => {
|
||||
console.log(data)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -1,6 +1,21 @@
|
|||
<button onclick="handleJoinSession()" data-room="<%= @chat_room.id %>">Join Room</button>
|
||||
|
||||
<h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1>
|
||||
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
|
||||
|
||||
<button id="test-btn">Test Connection</button>
|
||||
<div class="call-container">
|
||||
<div id="remote-video-container">
|
||||
<div id="video_overlays">
|
||||
<video id="local-video" autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="text-color" style="display:none">Random User ID:</span>
|
||||
<span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span>
|
||||
</div>
|
||||
|
||||
|
||||
<%= javascript_pack_tag 'chatrooms' %>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
|
||||
<!--
|
||||
<div class="call-container">
|
||||
<div id="remote-video-container">
|
||||
<div id="video_overlays">
|
||||
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
Rails.application.routes.draw do
|
||||
get 'video_sessions/create'
|
||||
|
||||
devise_for :users, path: '', path_names: { sign_out: 'logout'}
|
||||
devise_scope :user do
|
||||
get '/logout', to: 'devise/sessions#destroy'
|
||||
|
@ -24,6 +24,8 @@ Rails.application.routes.draw do
|
|||
get '/contacts', to: 'pages#index'
|
||||
post '/sessions', to: 'video_sessions#create'
|
||||
|
||||
post '/chat_rooms/chat_room_sessions', to: 'chat_rooms#create'
|
||||
|
||||
resources :chat_rooms, only: [ :show ] do
|
||||
# testing action cable
|
||||
post '/cable_testing', to: 'pages#cable_testing'
|
||||
|
|
Loading…
Reference in New Issue