Update video style and start peer connexion
This commit is contained in:
gparant
parent
dbf0bef149
commit
e06b20fe96
7 changed files with 140 additions and 131 deletions
2
front/dist/index.html
vendored
2
front/dist/index.html
vendored
|
|
@ -12,8 +12,6 @@
|
|||
<script src="bundle.js"></script>
|
||||
<div id="webRtc" class="webrtc">
|
||||
<div id="activeCam" class="activeCam">
|
||||
</div>
|
||||
<div id="myCam" class="myCam">
|
||||
<video id="myCamVideo" autoplay></video>
|
||||
</div>
|
||||
<div class="btn-cam-action active">
|
||||
|
|
|
|||
96
front/dist/resources/style/style.css
vendored
96
front/dist/resources/style/style.css
vendored
|
|
@ -1,77 +1,44 @@
|
|||
.webrtc{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
}
|
||||
.webrtc.active{
|
||||
display: block;
|
||||
}
|
||||
.webrtc, .activeCam{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
}
|
||||
.webrtc, .activeCam{}
|
||||
.activeCam video{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
height: 20%;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
margin: 5px;
|
||||
background-color: white;
|
||||
}
|
||||
.activeCam video#myCamVideo{
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/*CSS size for 2 - 3 elements*/
|
||||
video:nth-child(1):nth-last-child(3),
|
||||
video:nth-child(2):nth-last-child(2),
|
||||
video:nth-child(3):nth-last-child(1),
|
||||
video:nth-child(1):nth-last-child(2),
|
||||
video:nth-child(2):nth-last-child(1){
|
||||
width: 50%;
|
||||
.activeCam video:nth-child(1){
|
||||
/*this is for camera of user*/
|
||||
top: 75%;
|
||||
}
|
||||
video:nth-child(1):nth-last-child(3),
|
||||
video:nth-child(2):nth-last-child(2),
|
||||
video:nth-child(3):nth-last-child(1){
|
||||
height: 50%;
|
||||
.activeCam video:nth-child(2){
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
/*CSS position for 2 elements*/
|
||||
video:nth-child(1):nth-last-child(2){
|
||||
left: 0;
|
||||
.activeCam video:nth-child(3){
|
||||
top: 25%;
|
||||
}
|
||||
video:nth-child(2):nth-last-child(1){
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/*CSS position for 3 elements*/
|
||||
video:nth-child(1):nth-last-child(3){
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
video:nth-child(2):nth-last-child(2){
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
video:nth-child(3):nth-last-child(1) {
|
||||
.activeCam video:nth-child(4) {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.myCam{
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
background: black;
|
||||
border: none;
|
||||
bottom: 20px;
|
||||
max-height: 17%;
|
||||
max-width: 17%;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.myCam video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*btn animation*/
|
||||
.btn-cam-action div{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
|
@ -79,14 +46,14 @@ video:nth-child(3):nth-last-child(1) {
|
|||
width: 64px;
|
||||
height: 64px;
|
||||
background: #666;
|
||||
left: 6vw;
|
||||
box-shadow: 2px 2px 24px #444;
|
||||
border-radius: 48px;
|
||||
transform: translateX(calc(-6vw - 96px));
|
||||
transform: translateY(12vw);
|
||||
transition-timing-function: ease-in-out;
|
||||
bottom: 20px;
|
||||
}
|
||||
.webrtc:hover .btn-cam-action.active div{
|
||||
transform: translateX(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
.btn-cam-action div:hover{
|
||||
background: #407cf7;
|
||||
|
|
@ -94,16 +61,16 @@ video:nth-child(3):nth-last-child(1) {
|
|||
transition: 280ms;
|
||||
}
|
||||
.btn-micro{
|
||||
bottom: 277px;
|
||||
transition: all .3s;
|
||||
left: 168px;
|
||||
}
|
||||
.btn-video{
|
||||
bottom: 177px;
|
||||
transition: all .2s;
|
||||
left: 84px;
|
||||
}
|
||||
.btn-call{
|
||||
bottom: 77px;
|
||||
transition: all .1s;
|
||||
left: 0px;
|
||||
}
|
||||
.btn-cam-action div img{
|
||||
height: 32px;
|
||||
|
|
@ -112,6 +79,8 @@ video:nth-child(3):nth-last-child(1) {
|
|||
left: calc(48px - 35px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*Phone Animation*/
|
||||
.phone-open{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
|
|
@ -136,7 +105,6 @@ video:nth-child(3):nth-last-child(1) {
|
|||
animation: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@keyframes phone-move {
|
||||
0% {
|
||||
left: calc(50% - 70px);
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
|||
userId: string;
|
||||
PlayerValue: string;
|
||||
userInputManager: UserInputManager;
|
||||
previousMove: string;
|
||||
|
||||
constructor(
|
||||
userId: string,
|
||||
|
|
@ -90,7 +91,10 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
|
|||
direction = PlayerAnimationNames.None;
|
||||
this.stop();
|
||||
}
|
||||
this.sharePosition(direction);
|
||||
if(this.previousMove !== PlayerAnimationNames.None || direction !== PlayerAnimationNames.None){
|
||||
this.sharePosition(direction);
|
||||
}
|
||||
this.previousMove = direction;
|
||||
}
|
||||
|
||||
private sharePosition(direction: string) {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,19 @@ let Peer = require('simple-peer');
|
|||
|
||||
export interface SimplePeerInterface {
|
||||
}
|
||||
|
||||
enum PeerConnexionStatus{
|
||||
DISABLED = 1,
|
||||
ACTIVATED = 2
|
||||
}
|
||||
export class SimplePeer {
|
||||
Connexion: ConnexionInterface;
|
||||
MediaManager: MediaManager;
|
||||
WebRtcRoomId: string;
|
||||
Users: Array<any>;
|
||||
private Connexion: ConnexionInterface;
|
||||
private MediaManager: MediaManager;
|
||||
private WebRtcRoomId: string;
|
||||
private Users: Array<any>;
|
||||
|
||||
PeerConnexionArray: Array<any> = new Array<any>();
|
||||
private PeerConnexionArray: Array<any> = new Array<any>();
|
||||
|
||||
private PeerConnexionStatus : number = PeerConnexionStatus.DISABLED;
|
||||
|
||||
constructor(Connexion: ConnexionInterface, WebRtcRoomId: string = "test-webrtc") {
|
||||
this.Connexion = Connexion;
|
||||
|
|
@ -31,55 +36,71 @@ export class SimplePeer {
|
|||
});
|
||||
|
||||
//when button to call is clicked, start video
|
||||
this.MediaManager.getElementActivePhone().addEventListener("click", () => {
|
||||
/*this.MediaManager.getElementActivePhone().addEventListener("click", () => {
|
||||
this.startWebRtc();
|
||||
this.disablePhone();
|
||||
});*/
|
||||
|
||||
return this.MediaManager.getCamera().then((stream: MediaStream) => {
|
||||
this.MediaManager.activeVisio();
|
||||
this.MediaManager.localStream = stream;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* server has two person connected, start the meet
|
||||
*/
|
||||
startWebRtc() {
|
||||
this.MediaManager.activeVisio();
|
||||
return this.MediaManager.getCamera().then((stream: MediaStream) => {
|
||||
this.MediaManager.localStream = stream;
|
||||
private startWebRtc() {
|
||||
//create pear connexion
|
||||
this.createPeerConnexion();
|
||||
|
||||
//create pear connexion
|
||||
this.createPeerConnexion();
|
||||
|
||||
//receive signal by gemer
|
||||
this.Connexion.receiveWebrtcSignal((message: string) => {
|
||||
this.receiveWebrtcSignal(message);
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
//receive signal by gemer
|
||||
this.Connexion.receiveWebrtcSignal((message: string) => {
|
||||
this.receiveWebrtcSignal(message);
|
||||
});
|
||||
|
||||
// add media or new media for all peer connexion
|
||||
this.Users.forEach((user: any) => {
|
||||
this.addMedia(user.userId);
|
||||
});
|
||||
|
||||
//change status to manage other user
|
||||
this.PeerConnexionStatus = PeerConnexionStatus.ACTIVATED;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param message
|
||||
*/
|
||||
receiveWebrtcStart(message: string) {
|
||||
private receiveWebrtcStart(message: string) {
|
||||
let data = JSON.parse(message);
|
||||
this.WebRtcRoomId = data.roomId;
|
||||
this.Users = data.clients;
|
||||
|
||||
//active button for player
|
||||
this.activePhone();
|
||||
console.log("receiveWebrtcStart", this.Users);
|
||||
|
||||
//start connexion
|
||||
this.startWebRtc();
|
||||
}
|
||||
|
||||
|
||||
createPeerConnexion() {
|
||||
private createPeerConnexion() {
|
||||
this.Users.forEach((user: any) => {
|
||||
if(this.PeerConnexionArray[user.userId]){
|
||||
if (this.PeerConnexionArray[user.userId]) {
|
||||
return;
|
||||
}
|
||||
this.MediaManager.addActiveVideo(user.userId);
|
||||
|
||||
this.PeerConnexionArray[user.userId] = new Peer({initiator: user.initiator});
|
||||
console.info("createPeerConnexion => create peerConexion", user);
|
||||
this.PeerConnexionArray[user.userId] = new Peer({
|
||||
initiator: user.initiator,
|
||||
config: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }] }
|
||||
});
|
||||
|
||||
//add lof info PeerConnexionArray
|
||||
this.PeerConnexionArray[user.userId]._debug = console.info;
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
|
||||
console.info("createPeerConnexion => sendWebrtcSignal : "+user.userId, data);
|
||||
this.sendWebrtcSignal(data, user.userId);
|
||||
});
|
||||
|
||||
|
|
@ -88,15 +109,15 @@ export class SimplePeer {
|
|||
});
|
||||
|
||||
this.PeerConnexionArray[user.userId].on('close', () => {
|
||||
console.info("createPeerConnexion => close", user.userId);
|
||||
this.closeConnexion(user.userId);
|
||||
});
|
||||
|
||||
this.addMedia(user.userId);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
closeConnexion(userId : string){
|
||||
private closeConnexion(userId : string){
|
||||
// @ts-ignore
|
||||
this.PeerConnexionArray[userId] = null;
|
||||
this.MediaManager.removeActiveVideo(userId)
|
||||
|
|
@ -107,7 +128,7 @@ export class SimplePeer {
|
|||
* @param userId
|
||||
* @param data
|
||||
*/
|
||||
sendWebrtcSignal(data: any, userId : string) {
|
||||
private sendWebrtcSignal(data: any, userId : string) {
|
||||
this.Connexion.sendWebrtcSignal(data, this.WebRtcRoomId, null, userId);
|
||||
}
|
||||
|
||||
|
|
@ -115,8 +136,10 @@ export class SimplePeer {
|
|||
*
|
||||
* @param message
|
||||
*/
|
||||
receiveWebrtcSignal(message: string) {
|
||||
private receiveWebrtcSignal(message: string) {
|
||||
let data = JSON.parse(message);
|
||||
console.log("receiveWebrtcSignal", data);
|
||||
console.log("this.PeerConnexionArray[data.userId]", this.PeerConnexionArray[data.userId]);
|
||||
if(!this.PeerConnexionArray[data.userId]){
|
||||
return;
|
||||
}
|
||||
|
|
@ -128,7 +151,7 @@ export class SimplePeer {
|
|||
* @param userId
|
||||
* @param stream
|
||||
*/
|
||||
stream(userId : any, stream: MediaStream) {
|
||||
private stream(userId : any, stream: MediaStream) {
|
||||
this.MediaManager.remoteVideo[userId].srcObject = stream;
|
||||
}
|
||||
|
||||
|
|
@ -136,15 +159,19 @@ export class SimplePeer {
|
|||
*
|
||||
* @param userId
|
||||
*/
|
||||
addMedia (userId : any) {
|
||||
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
|
||||
private addMedia (userId : any = null) {
|
||||
if (!this.MediaManager.localStream || !this.PeerConnexionArray[userId]) {
|
||||
return;
|
||||
}
|
||||
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
|
||||
return;
|
||||
}
|
||||
|
||||
activePhone(){
|
||||
private activePhone(){
|
||||
this.MediaManager.activePhoneOpen();
|
||||
}
|
||||
|
||||
disablePhone(){
|
||||
private disablePhone(){
|
||||
this.MediaManager.disablePhoneOpen();
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue