added room id in exchange parameters
This commit is contained in:
parent
5245f2257d
commit
c3b072ba38
|
@ -17,6 +17,7 @@ let localstream;
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
currentUser = document.getElementById("current-user").innerHTML;
|
currentUser = document.getElementById("current-user").innerHTML;
|
||||||
|
console.log(currentUser)
|
||||||
localVideo = document.getElementById("local-video");
|
localVideo = document.getElementById("local-video");
|
||||||
remoteVideoContainer = document.getElementById("remote-video-container");
|
remoteVideoContainer = document.getElementById("remote-video-container");
|
||||||
};
|
};
|
||||||
|
@ -41,21 +42,48 @@ document.onreadystatechange = async () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
// find chatroom
|
// 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 chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
|
||||||
|
|
||||||
const handleJoinSession = async () => {
|
const handleJoinSession = async () => {
|
||||||
App.session = await App.cable.subscriptions.create({
|
App['chatroom' + chatroomId] = await App.cable.subscriptions.create({
|
||||||
channel: "ChatRoomsChannel",
|
channel: "ChatRoomsChannel",
|
||||||
room: chatroomId
|
room: chatroomId
|
||||||
}, {
|
}, {
|
||||||
connected: () => {
|
connected: () => {
|
||||||
|
console.log(chatroomId)
|
||||||
broadcastData({
|
broadcastData({
|
||||||
type: JOIN_ROOM,
|
type: JOIN_ROOM,
|
||||||
from: currentUser
|
from: currentUser,
|
||||||
|
room: chatroomId
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
received: data => {
|
received: data => {
|
||||||
console.log("received", data);
|
console.log(data)
|
||||||
if (data.from === currentUser) return;
|
if (data.from === currentUser) return;
|
||||||
switch (data.type) {
|
switch (data.type) {
|
||||||
case JOIN_ROOM:
|
case JOIN_ROOM:
|
||||||
|
@ -93,7 +121,6 @@ const joinRoom = data => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeUser = data => {
|
const removeUser = data => {
|
||||||
console.log("removing user", data.from);
|
|
||||||
let video = document.getElementById(`remoteVideoContainer+${data.from}`);
|
let video = document.getElementById(`remoteVideoContainer+${data.from}`);
|
||||||
video && video.remove();
|
video && video.remove();
|
||||||
delete pcPeers[data.from];
|
delete pcPeers[data.from];
|
||||||
|
@ -101,18 +128,21 @@ const removeUser = data => {
|
||||||
|
|
||||||
|
|
||||||
const broadcastData = data => {
|
const broadcastData = data => {
|
||||||
fetch("sessions", {
|
if (data.type === EXCHANGE) {
|
||||||
|
console.log("yayyy")
|
||||||
|
}
|
||||||
|
fetch("chat_room_sessions", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: JSON.stringify(data),
|
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) => {
|
const createPC = (userId, isOffer) => {
|
||||||
let pc = new RTCPeerConnection(ice);
|
let pc = new RTCPeerConnection(ice);
|
||||||
|
let test = userId
|
||||||
pcPeers[userId] = pc;
|
pcPeers[userId] = pc;
|
||||||
pc.addStream(localstream);
|
pc.addStream(localstream);
|
||||||
|
|
||||||
if (isOffer) {
|
if (isOffer) {
|
||||||
pc
|
pc
|
||||||
.createOffer()
|
.createOffer()
|
||||||
|
@ -122,7 +152,8 @@ const createPC = (userId, isOffer) => {
|
||||||
type: EXCHANGE,
|
type: EXCHANGE,
|
||||||
from: currentUser,
|
from: currentUser,
|
||||||
to: userId,
|
to: userId,
|
||||||
sdp: JSON.stringify(pc.localDescription)
|
sdp: JSON.stringify(pc.localDescription),
|
||||||
|
room: chatroomId
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch(logError);
|
.catch(logError);
|
||||||
|
@ -134,7 +165,8 @@ const createPC = (userId, isOffer) => {
|
||||||
type: EXCHANGE,
|
type: EXCHANGE,
|
||||||
from: currentUser,
|
from: currentUser,
|
||||||
to: userId,
|
to: userId,
|
||||||
candidate: JSON.stringify(event.candidate)
|
candidate: JSON.stringify(event.candidate),
|
||||||
|
room: chatroomId
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -191,7 +223,8 @@ const exchange = data => {
|
||||||
type: EXCHANGE,
|
type: EXCHANGE,
|
||||||
from: currentUser,
|
from: currentUser,
|
||||||
to: data.from,
|
to: data.from,
|
||||||
sdp: JSON.stringify(pc.localDescription)
|
sdp: JSON.stringify(pc.localDescription),
|
||||||
|
room: chatroomId
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,20 @@ class ChatRoomsController < ApplicationController
|
||||||
end
|
end
|
||||||
|
|
||||||
def create
|
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
|
||||||
end
|
end
|
||||||
|
|
|
@ -17,10 +17,8 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
|
||||||
room: chatroomId
|
room: chatroomId
|
||||||
}, {
|
}, {
|
||||||
connected: () => {
|
connected: () => {
|
||||||
console.log('Connected to ChatRoom ' + chatroomId)
|
|
||||||
},
|
},
|
||||||
received: data => {
|
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>
|
<h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1>
|
||||||
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
|
<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
|
||||||
|
|
||||||
<button id="test-btn">Test Connection</button>
|
<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' %>
|
<%= javascript_pack_tag 'chatrooms' %>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="call-container">
|
<div class="call-container">
|
||||||
<div id="remote-video-container">
|
<div id="remote-video-container">
|
||||||
<div id="video_overlays">
|
<div id="video_overlays">
|
||||||
|
@ -7,7 +7,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
Rails.application.routes.draw do
|
Rails.application.routes.draw do
|
||||||
get 'video_sessions/create'
|
|
||||||
devise_for :users, path: '', path_names: { sign_out: 'logout'}
|
devise_for :users, path: '', path_names: { sign_out: 'logout'}
|
||||||
devise_scope :user do
|
devise_scope :user do
|
||||||
get '/logout', to: 'devise/sessions#destroy'
|
get '/logout', to: 'devise/sessions#destroy'
|
||||||
|
@ -24,6 +24,8 @@ Rails.application.routes.draw do
|
||||||
get '/contacts', to: 'pages#index'
|
get '/contacts', to: 'pages#index'
|
||||||
post '/sessions', to: 'video_sessions#create'
|
post '/sessions', to: 'video_sessions#create'
|
||||||
|
|
||||||
|
post '/chat_rooms/chat_room_sessions', to: 'chat_rooms#create'
|
||||||
|
|
||||||
resources :chat_rooms, only: [ :show ] do
|
resources :chat_rooms, only: [ :show ] do
|
||||||
# testing action cable
|
# testing action cable
|
||||||
post '/cable_testing', to: 'pages#cable_testing'
|
post '/cable_testing', to: 'pages#cable_testing'
|
||||||
|
|
Loading…
Reference in New Issue