let Client = (socket as ExSocketInterface);
- if(Client.roomId === messageUserPosition.roomId){
+ if (Client.roomId === messageUserPosition.roomId) {
return;
}
console.error('An error occurred on "user_position" event');
console.error(e);
}
- });
+ });
socket.on(SockerIoEvent.WEBRTC_SIGNAL, (message: string) => {
let data: any = JSON.parse(message);
}
tabs.push({
userId: clientId.userId,
+ name: clientId.name,
initiator: index <= indexClientId
});
return tabs;
<script src="bundle.js"></script>
<div id="webRtc" class="webrtc">
<div id="activeCam" class="activeCam">
- <video id="myCamVideo" autoplay muted></video>
+ <div id="div-myCamVideo" class="video-container">
+ <video id="myCamVideo" autoplay muted></video>
+ </div>
</div>
<div class="btn-cam-action">
<div class="btn-micro">
</div>-->
</div>
</div>
+ <audio id="audio-webrtc-in">
+ <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
+ </audio>
</body>
</html>
.webrtc.active{
display: block;
}
+
.webrtc, .activeCam{}
-.activeCam video{
+.activeCam .video-container{
position: absolute;
height: 25%;
top: 10px;
margin: 5px;
right: -100px;
transition: all 0.2s ease;
+ border-color: black;
+ border-style: solid;
+ border-width: 0.2px;
+}
+.activeCam .video-container i{
+ position: absolute;
+ width: 100px;
+ height: 65px;
+ left: calc(50% - 50px);
+ top: calc(50% - 50px);
+ background-color: black;
+ border-radius: 50%;
+ text-align: center;
+ padding-top: 35px;
+ font-size: 28px;
+ color: white;
+}
+.activeCam .video-container img.active{
+ display: block;
+}
+.activeCam .video-container img{
+ position: absolute;
+ display: none;
+ width: 15px;
+ height: 15px;
+ background: #d93025;
+ border-radius: 48px;
+ left: 5px;
+ bottom: 5px;
+ padding: 10px;
+ z-index: 2;
}
-.webrtc:hover .activeCam video{
+.activeCam .video-container video{
+ height: 100%;
+}
+
+.webrtc:hover .activeCam .video-container{
right: 10px;
}
-.activeCam video#myCamVideo{
+.activeCam .video-container#div-myCamVideo{
+ border: none;
+}
+.activeCam .video-container video#myCamVideo{
width: 200px;
height: 113px;
}
/*CSS size for 2 - 3 elements*/
-.activeCam video:nth-child(1){
+.activeCam .video-container:nth-child(1){
/*this is for camera of user*/
top: 75%;
}
-.activeCam video:nth-child(2){
+.activeCam .video-container:nth-child(2){
top: 0%;
}
-.activeCam video:nth-child(3){
+.activeCam .video-container:nth-child(3){
top: 25%;
}
-.activeCam video:nth-child(4) {
+.activeCam .video-container:nth-child(4) {
top: 50%;
}
} from "../../Connexion";
import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer";
import {getMapKeyByUrl} from "../Login/LogincScene";
-import SceneManager = Phaser.Scenes.SceneManager;
import ScenePlugin = Phaser.Scenes.ScenePlugin;
export enum StatusGameManagerEnum {
cinema: any = null;
microphoneClose: any = null;
microphone: any = null;
+ webrtcInAudio: any;
constraintsMedia : {audio : any, video : any} = {
audio: true,
video: videoConstraint
this.updatedLocalStreamCallBack = updatedLocalStreamCallBack;
this.myCamVideo = document.getElementById('myCamVideo');
+ this.webrtcInAudio = document.getElementById('audio-webrtc-in');
+ this.webrtcInAudio.volume = 0.2;
this.microphoneClose = document.getElementById('microphone-close');
this.microphoneClose.style.display = "none";
this.cinemaClose.style.display = "none";
this.cinema.style.display = "block";
this.constraintsMedia.video = videoConstraint;
- this.localStream = null;
- this.myCamVideo.srcObject = null;
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
this.cinemaClose.style.display = "block";
this.cinema.style.display = "none";
this.constraintsMedia.video = false;
-
- this.myCamVideo.pause();
- if(this.localStream) {
- this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
- if (MediaStreamTrack.kind === "video") {
- MediaStreamTrack.stop();
- }
+ this.myCamVideo.srcObject = null;
+ if (this.localStream) {
+ this.localStream.getVideoTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
+ MediaStreamTrack.stop();
});
}
- this.localStream = null;
- this.myCamVideo.srcObject = null;
this.getCamera().then((stream) => {
this.updatedLocalStreamCallBack(stream);
});
this.microphone.style.display = "none";
this.constraintsMedia.audio = false;
if(this.localStream) {
- this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
- if (MediaStreamTrack.kind === "audio") {
- MediaStreamTrack.stop();
- }
+ this.localStream.getAudioTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
+ MediaStreamTrack.stop();
});
}
this.getCamera().then((stream) => {
return stream;
}).catch((err) => {
- console.error(err);
+ console.info(`error get media {video: ${this.constraintsMedia.video}},{audio: ${this.constraintsMedia.audio}}`,err);
this.localStream = null;
- throw err;
});
} catch (e) {
promise = Promise.reject(false);
*
* @param userId
*/
- addActiveVideo(userId : string){
+ addActiveVideo(userId : string, userName: string = ""){
+ this.webrtcInAudio.play();
let elementRemoteVideo = document.getElementById("activeCam");
- elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="'+userId+'" autoplay></video>');
+ userName = userName.toUpperCase();
+ let color = this.getColorByString(userName);
+ elementRemoteVideo.insertAdjacentHTML('beforeend', `
+ <div id="div-${userId}" class="video-container" style="border-color: ${color};">
+ <i style="background-color: ${color};">${userName}</i>
+ <img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
+ <video id="${userId}" autoplay></video>
+ </div>
+ `);
this.remoteVideo[(userId as any)] = document.getElementById(userId);
}
+ /**
+ *
+ * @param userId
+ */
+ disabledMicrophoneByUserId(userId: string){
+ let element = document.getElementById(`microphone-${userId}`);
+ if(!element){
+ return;
+ }
+ element.classList.add('active')
+ }
+
+ /**
+ *
+ * @param userId
+ */
+ enabledMicrophoneByUserId(userId: string){
+ let element = document.getElementById(`microphone-${userId}`);
+ if(!element){
+ return;
+ }
+ element.classList.remove('active')
+ }
+
+ /**
+ *
+ * @param userId
+ */
+ disabledVideoByUserId(userId: string){
+ let element = document.getElementById(`${userId}`);
+ if(!element){
+ return;
+ }
+ element.style.opacity = "0";
+ }
+
+ /**
+ *
+ * @param userId
+ */
+ enabledVideoByUserId(userId: string){
+ let element = document.getElementById(`${userId}`);
+ if(!element){
+ return;
+ }
+ element.style.opacity = "1";
+ }
+
/**
*
* @param userId
* @param userId
*/
removeActiveVideo(userId : string){
- let element = document.getElementById(userId);
+ let element = document.getElementById(`div-${userId}`);
if(!element){
return;
}
element.remove();
}
+
+ /**
+ *
+ * @param str
+ */
+ private getColorByString(str: String) : String|null {
+ let hash = 0;
+ if (str.length === 0) return null;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ hash = hash & hash;
+ }
+ let color = '#';
+ for (let i = 0; i < 3; i++) {
+ let value = (hash >> (i * 8)) & 255;
+ color += ('00' + value.toString(16)).substr(-2);
+ }
+ return color;
+ }
}
\ No newline at end of file
import {MediaManager} from "./MediaManager";
let Peer = require('simple-peer');
-export interface SimplePeerInterface {
+class UserSimplePear{
+ userId: string;
+ name?: string;
+ initiator?: boolean;
}
-
-export class SimplePeer {
+export class SimplePeerInterface {}
+export class SimplePeer implements SimplePeerInterface{
private Connexion: ConnexionInterface;
private WebRtcRoomId: string;
- private Users: Array<any>;
+ private Users: Array<UserSimplePear> = new Array<UserSimplePear>();
private MediaManager: MediaManager;
- private PeerConnexionArray: Array<any> = new Array<any>();
+ private PeerConnexionArray: Map<string, any> = new Map<string, any>();
constructor(Connexion: ConnexionInterface, WebRtcRoomId: string = "test-webrtc") {
this.Connexion = Connexion;
this.MediaManager = new MediaManager((stream : MediaStream) => {
this.updatedLocalStream();
});
- this.PeerConnexionArray = new Array<any>();
-
this.initialise();
}
* server has two person connected, start the meet
*/
private startWebRtc() {
- this.Users.forEach((user: any) => {
+ this.Users.forEach((user: UserSimplePear) => {
//if it's not an initiator, peer connexion will be created when gamer will receive offer signal
if(!user.initiator){
return;
/**
* create peer connexion to bind users
*/
- private createPeerConnexion(user : any) {
- if(this.PeerConnexionArray[user.userId]) {
+ private createPeerConnexion(user : UserSimplePear) {
+ if(this.PeerConnexionArray.has(user.userId)) {
return;
}
+ let name = user.name;
+ if(!name){
+ let userSearch = this.Users.find((userSearch: UserSimplePear) => userSearch.userId === user.userId);
+ if(userSearch) {
+ name = userSearch.name;
+ }
+ }
this.MediaManager.removeActiveVideo(user.userId);
- this.MediaManager.addActiveVideo(user.userId);
+ console.log("name", name);
+ this.MediaManager.addActiveVideo(user.userId, name);
- this.PeerConnexionArray[user.userId] = new Peer({
+ let peer : any = new Peer({
initiator: user.initiator ? user.initiator : false,
reconnectTimer: 10000,
config: {
]
},
});
+ this.PeerConnexionArray.set(user.userId, peer);
//start listen signal for the peer connexion
- this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
+ this.PeerConnexionArray.get(user.userId).on('signal', (data: any) => {
this.sendWebrtcSignal(data, user.userId);
});
- this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => {
+ this.PeerConnexionArray.get(user.userId).on('stream', (stream: MediaStream) => {
+ let videoActive = false;
+ let microphoneActive = false;
+ stream.getTracks().forEach((track : MediaStreamTrack) => {
+ if(track.kind === "audio"){
+ microphoneActive = true;
+ }
+ if(track.kind === "video"){
+ videoActive = true;
+ }
+ });
+ if(microphoneActive){
+ this.MediaManager.enabledMicrophoneByUserId(user.userId);
+ }else{
+ this.MediaManager.disabledMicrophoneByUserId(user.userId);
+ }
+
+ if(videoActive){
+ this.MediaManager.enabledVideoByUserId(user.userId);
+ }else{
+ this.MediaManager.disabledVideoByUserId(user.userId);
+ }
this.stream(user.userId, stream);
});
- this.PeerConnexionArray[user.userId].on('track', (track: MediaStreamTrack, stream: MediaStream) => {
+ this.PeerConnexionArray.get(user.userId).on('track', (track: MediaStreamTrack, stream: MediaStream) => {
this.stream(user.userId, stream);
});
- this.PeerConnexionArray[user.userId].on('close', () => {
+ this.PeerConnexionArray.get(user.userId).on('close', () => {
this.closeConnexion(user.userId);
});
- this.PeerConnexionArray[user.userId].on('error', (err: any) => {
+ this.PeerConnexionArray.get(user.userId).on('error', (err: any) => {
console.error(`error => ${user.userId} => ${err.code}`, err);
});
- this.PeerConnexionArray[user.userId].on('connect', () => {
+ this.PeerConnexionArray.get(user.userId).on('connect', () => {
console.info(`connect => ${user.userId}`);
});
private closeConnexion(userId : string) {
try {
this.MediaManager.removeActiveVideo(userId);
- if (!this.PeerConnexionArray[(userId as any)]) {
+ if (!this.PeerConnexionArray.get(userId)) {
return;
}
// @ts-ignore
- this.PeerConnexionArray[(userId as any)].destroy();
- this.PeerConnexionArray[(userId as any)] = null;
- delete this.PeerConnexionArray[(userId as any)];
+ this.PeerConnexionArray.get(userId).destroy();
+ this.PeerConnexionArray.delete(userId)
} catch (err) {
console.error("closeConnexion", err)
}
if(data.signal.type === "offer"){
this.createPeerConnexion(data);
}
- this.PeerConnexionArray[data.userId].signal(data.signal);
+ this.PeerConnexionArray.get(data.userId).signal(data.signal);
} catch (e) {
console.error(`receiveWebrtcSignal => ${data.userId}`, e);
}
private addMedia (userId : any = null) {
try {
let transceiver : any = null;
+ if(!this.MediaManager.localStream){
+ return;
+ }
this.MediaManager.localStream.getTracks().forEach(
- transceiver = (track: MediaStreamTrack) => this.PeerConnexionArray[userId].addTrack(track, this.MediaManager.localStream)
+ transceiver = (track: MediaStreamTrack) => this.PeerConnexionArray.get(userId).addTrack(track, this.MediaManager.localStream)
)
}catch (e) {
console.error(`addMedia => addMedia => ${userId}`, e);
}
updatedLocalStream(){
- this.Users.forEach((user) => {
+ this.Users.forEach((user: UserSimplePear) => {
this.addMedia(user.userId);
})
}
projects / libreadventure.git / commitdiff