Media webrtcA
- Update peerConnexion manage - Add muted microphone logo - Add icon user - Sound when user enter in room webrtc
This commit is contained in:
gparant
parent
517d3981d1
commit
787e1c463c
7 changed files with 202 additions and 56 deletions
|
|
@ -6,7 +6,6 @@ import {
|
|||
} 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 {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export class MediaManager {
|
|||
cinema: any = null;
|
||||
microphoneClose: any = null;
|
||||
microphone: any = null;
|
||||
webrtcInAudio: any;
|
||||
constraintsMedia : {audio : any, video : any} = {
|
||||
audio: true,
|
||||
video: videoConstraint
|
||||
|
|
@ -22,6 +23,8 @@ export class MediaManager {
|
|||
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";
|
||||
|
|
@ -61,8 +64,6 @@ export class MediaManager {
|
|||
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);
|
||||
});
|
||||
|
|
@ -72,17 +73,12 @@ export class MediaManager {
|
|||
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);
|
||||
});
|
||||
|
|
@ -102,10 +98,8 @@ export class MediaManager {
|
|||
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) => {
|
||||
|
|
@ -130,9 +124,8 @@ export class MediaManager {
|
|||
|
||||
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);
|
||||
|
|
@ -144,12 +137,69 @@ export class MediaManager {
|
|||
*
|
||||
* @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
|
||||
|
|
@ -164,10 +214,29 @@ export class MediaManager {
|
|||
* @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;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,17 +2,20 @@ import {ConnexionInterface} from "../Connexion";
|
|||
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;
|
||||
|
|
@ -20,8 +23,6 @@ export class SimplePeer {
|
|||
this.MediaManager = new MediaManager((stream : MediaStream) => {
|
||||
this.updatedLocalStream();
|
||||
});
|
||||
this.PeerConnexionArray = new Array<any>();
|
||||
|
||||
this.initialise();
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +72,7 @@ export class SimplePeer {
|
|||
* 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;
|
||||
|
|
@ -83,15 +84,23 @@ export class SimplePeer {
|
|||
/**
|
||||
* 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: {
|
||||
|
|
@ -107,29 +116,51 @@ export class SimplePeer {
|
|||
]
|
||||
},
|
||||
});
|
||||
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}`);
|
||||
});
|
||||
|
||||
|
|
@ -139,13 +170,12 @@ export class SimplePeer {
|
|||
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)
|
||||
}
|
||||
|
|
@ -175,7 +205,7 @@ export class SimplePeer {
|
|||
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);
|
||||
}
|
||||
|
|
@ -197,8 +227,11 @@ export class SimplePeer {
|
|||
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);
|
||||
|
|
@ -206,7 +239,7 @@ export class SimplePeer {
|
|||
}
|
||||
|
||||
updatedLocalStream(){
|
||||
this.Users.forEach((user) => {
|
||||
this.Users.forEach((user: UserSimplePear) => {
|
||||
this.addMedia(user.userId);
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue