Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fairoj : video chat with recording is done

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2020-05-12 19:01:55 +05:30
parent b7faee5618
commit 68d39f7ab7
16 changed files with 245 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -1,3 +1,4 @@
{
"javascript.implicitProjectConfig.experimentalDecorators": true
"javascript.implicitProjectConfig.experimentalDecorators": true,
"git.ignoreLimitWarning": true
}

2
ng6-seed/src/app/app.module.ts
View File

@ -61,6 +61,7 @@ import { LoaderService } from './shared/loaderService/loader.service';
import {SocketIoConfig, SocketIoModule} from 'ngx-socket-io';
import { IncomingCallComponent } from './video-chat/incoming-call/incoming-call.component';
import { VideoChatComponent } from './video-chat/video-chat.component'
import { PushNotifyService } from './shared/push-notify.service';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
@ -132,6 +133,7 @@ const socketConfig: SocketIoConfig = { url: environment.socketServerUrl, options
AwsService,AuthGuard,
TranslateService,
PdTrigerService,
PushNotifyService,
// {
// provide: PERFECT_SCROLLBAR_CONFIG,
// useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG

42
ng6-seed/src/app/layouts/admin/admin-layout.component.ts
View File

@ -19,6 +19,7 @@ import { IncomingCallComponent } from '../../video-chat/incoming-call/incoming-c
import { Socket } from 'ngx-socket-io';
import { MatDialog } from '@angular/material';
import { VideoChatComponent } from 'app/video-chat/video-chat.component';
import { PushNotifyService } from 'app/shared/push-notify.service';
@ -64,7 +65,8 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
alertTAT: any;
countTAT: number;
incomingDialogOpened:boolean = false
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService,private messagingService:MessagingService,private socket:Socket,private matDialog:MatDialog) {
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService,private messagingService:MessagingService,private socket:Socket,private matDialog:MatDialog,
private _notificationService:PushNotifyService) {
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
@ -116,6 +118,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
});
// this.alertForTAT();
this._notificationService.requestPermission();
}
ngOnInit(): void {
@ -143,7 +146,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
}
});
this.listenForCalls()
this.openIncomingDialog();
// this.openIncomingDialog();
}
@HostListener('click', ['$event'])
@ -298,6 +301,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
this.aws.logout().subscribe(res=>{
//alert("res");
localStorage.removeItem('user_role');
localStorage.removeItem('pd_short_info');
this.messagingService.unsubscribeNotification()
setTimeout(()=>{
this.router.navigate(['/authentication/login']);
@ -319,17 +323,30 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
// FOR LISTENING TO RECIEVE CALLS FROM CALLER
listenForCalls() {
// this.socket.on('BackOffer', this.connectPeer)
this.socket.fromEvent('BackOffer').subscribe(res=>{
let userrole = localStorage.getItem('user_role')
if(userrole == '5') {
let pd_short_info:any = localStorage.getItem('pd_short_info')
pd_short_info = JSON.parse(pd_short_info);
this.socket.fromEvent('BackOffer').subscribe((res:any)=>{
console.log(res)
this.connectPeer(res);
if(res && res.hasOwnProperty('random_string') && res.random_string){
if(pd_short_info.filter(val=>val.random_string == res.random_string).length > 0){
let curr_pd_info= pd_short_info.filter(val=>val.random_string == res.random_string)[0]
if(curr_pd_info) {
this.connectPeer(res,curr_pd_info);
}
}
}
})
}
connectPeer(offer) {
}
connectPeer(offer,curr_pd_info) {
console.log(offer)
// alert("Offer is listened");
this.openIncomingDialog(offer);
this.notify('Incoming Call','Calling from ' + curr_pd_info.applicant_name + ' (' +curr_pd_info.pd_sno+ ')')
this.openIncomingDialog(offer,curr_pd_info);
}
openIncomingDialog(offer?) {
openIncomingDialog(offer?,curr_pd_info?) {
if(this.incomingDialogOpened == true) {
return;
}
@ -337,6 +354,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
const dialogRef = this.matDialog.open(IncomingCallComponent,{
// minWidth:'25%',
// maxWidth:'30%',
data:curr_pd_info,
disableClose: true,
backdropClass: 'incoming-call-background' ,
panelClass:'incoming-call-background'
@ -354,7 +372,7 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
}
openVideoChatDialog(offer) {
let dialogRef = this.matDialog.open(VideoChatComponent,{
data:{chat_info:'call_recieving',JSON_to_connect:offer},
data:offer,
maxWidth: '100vw',
maxHeight: '100vh',
height: '100%',
@ -363,4 +381,12 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
panelClass:'video-chat'
})
}
notify(title,approval) {
let data: Array < any >= [];
data.push({
'title': title,
'body': approval
});
this._notificationService.generateNotificationWithTitle(data);
}
}

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
View File

@ -127,6 +127,10 @@
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="70" fxFlex.xl="70" class="content-data" *ngFor="let master of pdMasterData">
<div fxLayout="row">
<div fxFlex="100" align="right">
<button mat-button mat-raised-button class="mr-1 mb-1" color="primary" (click)="openVideoChat()">
<mat-icon>videocam</mat-icon>
<strong>Call</strong>
</button>
<button mat-raised-button class="mr-1 mb-1" color="primary" style="cursor: not-allowed !important;">
<strong> {{master.pd_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.pd_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.pd_status | titlecase}}</strong>
</button>

13
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.ts
View File

@ -19,6 +19,7 @@ import { InitiateAdditionalPdComponent } from './../initiate-additional-pd/initi
/**sweet alert */
import Swal from 'sweetalert2';
import { VideoChatComponent } from 'app/video-chat/video-chat.component';
@Component({
selector: 'app-view-pd',
@ -559,5 +560,15 @@ export class ViewPdComponent implements OnInit, OnDestroy {
})
}
openVideoChat(){
let dialogRef = this.dialog.open(VideoChatComponent,{
data:{type:'init',random_string:this.pdMasterData[0].random_string},
maxWidth: '100vw',
maxHeight: '100vh',
height: '100%',
width: '100%',
disableClose: true,
panelClass:'video-chat'
})
}
}

7
ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
View File

@ -185,6 +185,13 @@ export class PdTrigerService {
// get pd details
getPdDetails(): Observable<any> {
return this._http.get<any>(this.apiUrl + "listLessPDDetails/get")
.map(res=>{
if(res['dataStatus']) {
let pd_det = res['records'].map(val=>{ return {applicant_name:val.applicant_name,pd_id:val.pd_id,random_string:val.random_string,pd_sno:val.pd_sno}})
localStorage.setItem('pd_short_info',JSON.stringify(pd_det));
return res
}
})
.pipe(
catchError(this.handleError('operation', []))
)

12
ng6-seed/src/app/shared/push-notify.service.ts
View File

@ -68,6 +68,18 @@ export class PushNotifyService {
let notify = self.create('', options).subscribe();
})
}
generateNotificationWithTitle(source: Array < any > ): void {
let self = this;
source.forEach((item) => {
let options = {
body: item.body,
icon: item.icon,
sound:'src/assets/spinner/notify.mp3',
sticky:true
};
let notify = self.create(item.title, options).subscribe();
})
}
}
export declare type Permission = 'denied' | 'granted' | 'default';
export interface PushNotification {

5
ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.html
View File

@ -7,9 +7,10 @@
<img class="img-circle" src="../../assets/spinner/notfound_blue.png" alt="Image"/>
</div>
</div>
<div fxLayout="row" class="user-name" fxLayoutAlign="center center">
<div fxLayout="column" class="user-name" fxLayoutAlign="center center">
<!-- <div > -->
<h6>User Name</h6>
<h5>{{this.pd_info.applicant_name}}</h5>
<h6>{{this.pd_info.pd_sno}}</h6>
<!-- </div> -->
</div>
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="30px" fxLayoutGap.xs="5px">

5
ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.scss
View File

@ -9,9 +9,12 @@
}
.user-name {
margin: 8% !important;
h6{
h5{
font-weight: bold;
}
h6{
margin-top: 8px;
}
color: white
}
.call-animation {

8
ng6-seed/src/app/video-chat/incoming-call/incoming-call.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-incoming-call',
@ -8,7 +8,9 @@ import { MatDialogRef } from '@angular/material';
})
export class IncomingCallComponent implements OnInit {
constructor(private dialogRef:MatDialogRef<IncomingCallComponent>) { }
constructor(private dialogRef:MatDialogRef<IncomingCallComponent>, @Inject(MAT_DIALOG_DATA) public pd_info:any) {
console.log(this.pd_info)
}
ngOnInit() {
}

126
ng6-seed/src/app/video-chat/video-chat.component.html
View File

@ -4,68 +4,72 @@
matTooltipPosition="right" (click)="close_all()">
<mat-icon>close</mat-icon>
</button>
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close"
matTooltipPosition="right" (click)="stopRecording()">
<mat-icon>stop</mat-icon>
</button> -->
</div>
<!-- <mat-dialog-content> -->
<!-- <div fxLayout="row"> -->
<div [style.visibility] ="is_video_enable? 'visible' : 'hidden'">
<!-- <div class="my_video"> -->
<video #myvideo id="myvideo" [style.visibility]="myVideoEnable? 'visible' : 'hidden'" muted></video>
<!-- </div> -->
<div class="peer_video" fxLayoutAlign="center" >
<video id="peervideo" #peervideo [style.visibility]="peerVideoEnable? 'visible' : 'hidden'"></video>
</div>
<!-- <input type="text" ><br/> -->
<!-- {{peerVideoEnable}} -->
<!-- <div class="peer_message" *ngIf="peerVideoEnable == false">
<p> Waiting for Connection</p>
</div> -->
<!-- <div class="input-group mb-3">
<label>Paste the JSON String</label>
<input type="text" class="form-control" [(ngModel)]="targetpeer" placeholder="JSON String" aria-label="Username" aria-describedby="basic-addon1">
</div> -->
<!-- <button type="button" class="btn btn-primary" (click)="connect()" >Connect</button> -->
<!-- <button type="button" (click)="message()">Send Message</button> -->
<div style="text-align: center;float:center" fxLayout="row" fxLayoutAlign="center" fxLayoutGap = "25px">
<!-- <button type="button" style="width: 90px" (click)="switch_camera()" class="btn btn-primary btn-lg" disabled #camera_switch>Switch</button> -->
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
matTooltipPosition="above" (click)="switch_camera()" disabled #camera_switch >
<mat-icon>switch_camera</mat-icon>
</button> -->
<!-- <button type="button" style="width: 90px" (click)="start_Calling('init')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Call</button><br/> -->
<!-- <button type="button" style="width: 90px" (click)="start_Calling('notinit')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Recieve</button><br/> -->
<!-- <button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
matTooltipPosition="above" *ngIf="peerVideoEnable"><mat-icon>call_end</mat-icon></button><br/> -->
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Video Off / On"
matTooltipPosition="above" (click)="videoHandling()" *ngIf="peerVideoEnable">
<mat-icon *ngIf="video_mute">videocam_off</mat-icon>
<mat-icon *ngIf="!video_mute">videocam</mat-icon>
</button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Mic Off / On"
matTooltipPosition="above" (click)="micMuteHandling()" *ngIf="peerVideoEnable">
<mat-icon *ngIf="mic_mute">mic_off</mat-icon>
<mat-icon *ngIf="!mic_mute">mic</mat-icon>
</button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
matTooltipPosition="above" (click)="disconnect()" *ngIf="peerVideoEnable">
<mat-icon>call_end</mat-icon>
</button>
</div>
</div>
<div fxLayoutAlign="center center" style="margin-top:10%" *ngIf="!is_video_enable">
<div fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row">
<button mat-raised-button type="button" matTooltip="Start Video Chat" matTooltipPosition = "above">
<mat-icon>videocam</mat-icon>
Start Video Chat
</button>
</div>
<div [style.visibility] ="is_video_enable? 'visible' : 'hidden'" >
<!-- <div class="my_video"> -->
<video #myvideo id="myvideo" [style.visibility]="myVideoEnable? 'visible' : 'hidden'" muted></video>
<!-- </div> -->
<!-- <div fxLayout="column"> -->
<div class="note-label">
<p>Note : Make sure the Reciever is waiting for your call before start Calling</p>
</div>
<!-- </div> -->
</div>
</div>
<!-- </div> -->
<!-- </mat-dialog-content> -->
<div class="peer_video" fxLayoutAlign="center" [ngStyle] = "{'height': !peerVideoEnable ? '5%': ''}">
<video id="peervideo" #peervideo [style.visibility]="peerVideoEnable? 'visible' : 'hidden'"></video>
</div>
<!-- <input type="text" ><br/> -->
<!-- {{peerVideoEnable}} -->
<div class="peer_message" *ngIf="peerVideoEnable == false" fxLayoutAlign="center">
<p style="text-align: center"> {{user_msg}} </p><br/>
</div>
<!-- <div class="input-group mb-3">
<label>Paste the JSON String</label>
<input type="text" class="form-control" [(ngModel)]="targetpeer" placeholder="JSON String" aria-label="Username" aria-describedby="basic-addon1">
</div> -->
<!-- <button type="button" class="btn btn-primary" (click)="connect()" >Connect</button> -->
<!-- <button type="button" (click)="message()">Send Message</button> -->
<div style="text-align: center;float:center" fxLayout="row" fxLayoutAlign="center" fxLayoutGap = "25px" >
<!-- <button type="button" style="width: 90px" (click)="switch_camera()" class="btn btn-primary btn-lg" disabled #camera_switch>Switch</button> -->
<!-- <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Switch Camera"
matTooltipPosition="above" (click)="switch_camera()" disabled #camera_switch >
<mat-icon>switch_camera</mat-icon>
</button> -->
<!-- <button type="button" style="width: 90px" (click)="start_Calling('init')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Call</button><br/> -->
<!-- <button type="button" style="width: 90px" (click)="start_Calling('notinit')" class="btn btn-primary btn-lg" *ngIf="!peerVideoEnable">Recieve</button><br/> -->
<!-- <button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
matTooltipPosition="above" *ngIf="peerVideoEnable"><mat-icon>call_end</mat-icon></button><br/> -->
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Video Off / On"
matTooltipPosition="above" (click)="videoHandling()" *ngIf="peerVideoEnable">
<mat-icon *ngIf="video_mute">videocam_off</mat-icon>
<mat-icon *ngIf="!video_mute">videocam</mat-icon>
</button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Mic Off / On"
matTooltipPosition="above" (click)="micMuteHandling()" *ngIf="peerVideoEnable">
<mat-icon *ngIf="mic_mute">mic_off</mat-icon>
<mat-icon *ngIf="!mic_mute">mic</mat-icon>
</button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Disconnect"
matTooltipPosition="above" (click)="disconnect()" >
<mat-icon>call_end</mat-icon>
</button>
</div>
</div>
<div fxLayoutAlign="center center" *ngIf="!is_video_enable" >
<div fxLayout="column" fxLayoutAlign="center center" style="position: absolute;bottom: 30%">
<div fxLayout="row">
<button mat-raised-button type="button" matTooltip="Start Video Chat" matTooltipPosition = "above" (click)="start_Calling('init')">
<mat-icon>videocam</mat-icon>
Start Video Chat
</button>
</div>
<!-- </div> -->
<!-- <div fxLayout="column"> -->
<div class="note-label">
<p>Note : Make sure the Reciever is waiting for your call before start Calling</p>
</div>
<!-- </div> -->
</div>
</div>
<!-- </div> -->
<!-- </mat-dialog-content> -->

34
ng6-seed/src/app/video-chat/video-chat.component.scss
View File

@ -1,9 +1,10 @@
::ng-deep { .video-chat > mat-dialog-container {
background: #71AFFF;
background: #eee;
padding: 0;
}
}
@media(max-width:500px) {
video#myvideo {
@ -15,26 +16,31 @@
left: 0;
// /* top: 20px;
}
.body-container {
padding: 0px !important;
}
video#peervideo {
/* height: 498px; */
// position: relative;
// margin-top: 126px;
width: 100%;
margin-top: 5%;
}
.peer_message{
font-size: 20px;
position: absolute;
top: 11%;
float: right;
padding: 57px;
/* border: 2px solid lavender; */
left: 8%;
p{
text-align: center;
}
}
// .peer_message{
// font-size: 20px;
// position: absolute;
// top: 11%;
// bottom: 10%;
// float: right;
// padding: 57px;
// /* border: 2px solid lavender; */
// left: 8%;
// p{
// text-align: center;
// }
// }
}
@media(min-width:500px) {
.peer_video{

112
ng6-seed/src/app/video-chat/video-chat.component.ts
View File

@ -28,6 +28,8 @@ export class VideoChatComponent implements OnInit {
is_video_enable:boolean = false;
mic_mute: boolean = true;
video_mute: boolean = true;
user_msg: string;
recorder: any;
constructor(private _notificationService:PushNotifyService,
private cdRef: ChangeDetectorRef,private socket: Socket,
private dialogRef: MatDialogRef<VideoChatComponent>,
@ -42,7 +44,7 @@ export class VideoChatComponent implements OnInit {
'title': title,
'body': approval
});
this._notificationService.generateNotification(data);
this._notificationService.generateNotificationWithTitle(data);
}
// ngOnInit() {
// setTimeout(()=>{
@ -77,7 +79,7 @@ export class VideoChatComponent implements OnInit {
ngOnInit() {
console.log(this.chat_info);
if(this.chat_info) {
if(this.chat_info.chat_info == 'call_recieving' && this.chat_info.hasOwnProperty('JSON_to_connect') && this.chat_info.JSON_to_connect) {
if(this.chat_info.type == 'offer' && this.chat_info.hasOwnProperty('JSON_to_connect') && this.chat_info.JSON_to_connect) {
this.is_video_enable = true;
this.start_Calling('receive')
}
@ -85,6 +87,7 @@ export class VideoChatComponent implements OnInit {
// this.start_Calling('receive')
}
start_Calling(option) {
this.user_msg ="Establishing Connection..."
this.userCallType = option
// let texk=this.textCopyElement.nativeElement
let video = this.myVideo.nativeElement;
@ -107,6 +110,7 @@ export class VideoChatComponent implements OnInit {
this.fetchVideoAndPlay(stream,video);
this.myVideoEnable = true
this.MediaStream = stream
this.is_video_enable = true;
// let switchCameraBtn= this.camereSwitchBtn.nativeElement
let supports = navigator.mediaDevices.getSupportedConstraints();
console.log(supports)
@ -124,13 +128,13 @@ export class VideoChatComponent implements OnInit {
iceServers: [
{
"urls": "stun:numb.viagenie.ca",
"username": 'fairojm@gmail.com',
"credential": 'fairojfai00'
"username": 'fairoj@venbainfotech.com',
"credential": '0987123400'
},
{
"urls": "turn:numb.viagenie.ca",
"username": "fairojm@gmail.com",
"credential": "fairojfai00"
"username": "fairoj@venbainfotech.com",
"credential": "0987123400"
}
]
}
@ -142,15 +146,19 @@ export class VideoChatComponent implements OnInit {
console.log(JSON.stringify(data));
if(data.hasOwnProperty('type') && data.type == 'offer'){
console.log("entered!!!!!!!!!!!!!!!!1");
this.socket.emit('Offer', data)
}
else if(data.type == 'answer'){
this.socket.emit('Answer', data)
this.user_msg = "Calling..."
let event_data = {JSON_to_connect:data,type:'offer',random_string:this.chat_info.random_string}
this.socket.emit('Offer', event_data)
}
else if(data.type == 'answer' ){
this.user_msg = "Waiting For Connection..."
let event_data = {JSON_to_connect:data,type:'answer',random_string:this.chat_info.random_string}
this.socket.emit('Answer', event_data)
}
// copyMessage(JSON.stringify(data))
copyMessageText = JSON.stringify(data);
// update()
this.copyMessage(copyMessageText,data.type)
// this.copyMessage(copyMessageText,data.type)
// this.targetpeer = data;
})
// }
@ -161,11 +169,11 @@ export class VideoChatComponent implements OnInit {
console.log("Peer Connection is closed ",data);
this.disconnect();
// alert("Peer Connection is closed " +JSON.stringify(data))
this.notify("Connection Closed",'Peer Connection Closed'+JSON.stringify(data))
this.notify("Connection Closed",'Peer Connection Closed')
})
peerx.on('error', (err) => {
console.log("Fatal Error ",err);
this.disconnect();
alert("Fatal Error" +JSON.stringify(err))
})
peerx.on('stream', (stream)=> {
@ -215,7 +223,9 @@ export class VideoChatComponent implements OnInit {
function connectPeer(answer) {
console.log("$$$$$$$$$$$$$$44");
console.log(answer);
peerx.signal(answer);
setTimeout(()=>{
peerx.signal(answer.JSON_to_connect);
},1000)
}
function getPeer(){
return JSON.stringify(copyMessageText)
@ -226,11 +236,11 @@ export class VideoChatComponent implements OnInit {
// this.socket.on('BackOffer', getPeer)
// },2000)
// }
if(this.chat_info.chat_info == 'call_recieving' && this.chat_info.JSON_to_connect && this.chat_info.JSON_to_connect != undefined) {
connectPeer(this.chat_info.JSON_to_connect)
if(this.chat_info.type == 'offer' && this.chat_info.JSON_to_connect && this.chat_info.JSON_to_connect != undefined) {
connectPeer(this.chat_info)
}
let tt = this.socket.on('BackOffer', connectPeer)
console.log(tt);
// let tt = this.socket.on('BackOffer', connectPeer)
// console.log(tt);
this.socket.on('BackAnswer', connectPeer)
}, err=>{
console.log('Failed to get stream', err);
@ -259,13 +269,7 @@ export class VideoChatComponent implements OnInit {
}
fetchVideoAndPlay(stream,videotype,enablePeerVideo?) {
console.log("12@@@@@@@@@2",enablePeerVideo)
if(enablePeerVideo) {
this.peerVideoEnable = enablePeerVideo
// this.camereSwitchBtn.nativeElement.disabled = true;
console.log(this.peerVideoEnable);
this.cdRef.detectChanges();
// this.startRecording(stream)
}
fetch('')
.then(response => response.blob())
.then(blob => {
@ -274,29 +278,36 @@ export class VideoChatComponent implements OnInit {
})
.then(_ => {
// Video playback started ;)
if(enablePeerVideo) {
if(this.peervideo.nativeElement.videoHeight >= 500) {
this.peervideo.nativeElement.style.marginTop = '0px'
}
this.peerVideoEnable = enablePeerVideo
// this.camereSwitchBtn.nativeElement.disabled = true;
console.log("peervideo check",this.peerVideoEnable,this.peervideo.nativeElement.videoWidth,this.peervideo.nativeElement.videoHeight);
this.cdRef.detectChanges();
this.startRecording(stream)
}
})
.catch(e => {
// Video playback failed ;(
})
}
startRecording(stream) {
let recorder = new RecordRTCPromisesHandler(stream, {
async startRecording(stream) {
this.recorder = []
this.recorder = new RecordRTCPromisesHandler(stream, {
type: 'video',
mimeType: 'video/webm', // or video/webm\;codecs=h264 or video/webm\;codecs=vp9
audioBitsPerSecond: 128000,
videoBitsPerSecond: 128000,
bitsPerSecond: 128000 // if this line is provided, skip above
});
recorder.startRecording();
const sleep = m => new Promise(r => setTimeout(r, m));
sleep(3000);
setTimeout(()=>{
recorder.stopRecording();
console.log(recorder);
let blob = recorder.getBlob();
recorder.getDataURL().then(dataURL=>{
console.log("@@@@@",dataURL)
});
this.recorder.startRecording();
// const sleep = m => new Promise(r => setTimeout(r, m));
// await sleep(3000);
// setTimeout(()=>{
// });
// var file = new File([blob], 'video.mp4', {
// type: 'video/mp4'
// });
@ -332,9 +343,26 @@ console.log("@@@@@",dataURL)
// const fileURL = window.URL.createObjectURL(blob);
// console.log(fileURL);
// window.open(fileURL);
},10000)
// invokeSaveAsDialog(blob);
}
async stopRecording() {
await this.recorder.stopRecording();
console.log(this.recorder);
let blob = await this.recorder.getBlob();
setTimeout(()=>{
console.log(typeof(blob),blob);
var file = new File([blob], 'video.mp4', {
type: 'video/mp4'
});
console.log(file)
const fileURL = window.URL.createObjectURL(file);
alert("saved Recording will be opened in a new window");
window.open(fileURL);
},3000);
this.recorder.getDataURL().then(dataURL=>{
console.log("@@@@@",dataURL)
})
}
connect() {
this.peer.signal(JSON.parse(this.targetpeer));
}
@ -354,8 +382,12 @@ console.log("@@@@@",dataURL)
this.peer.destroy();
this.peerVideoEnable = false
this.targetpeer = ''
this.cdRef.detectChanges();
this.peer = ''
// this.cdRef.detectChanges();
this.peervideo.nativeElement.pause();
this.stopRecording().then(res=>{
})
console.log(this.MediaStream.getTracks())
// this.MediaStream.stop()
// var track = this.MediaStream.getTracks()[0]; // if only one media track
@ -367,8 +399,10 @@ console.log("@@@@@",dataURL)
console.log(this.peervideo);
// this.peervideo.nativeElement.videoWidth = 0
// this.peervideo.nativeElement.videoHeight = 0
this.myVideo.nativeElement.pause();
this.is_video_enable = false
this.cdRef.detectChanges();
console.log(this.peer)
}
copyMessage(val: string,message?){
const selBox = document.createElement('textarea');

BIN
ng6-seed/src/assets/spinner/notify.mp3 Normal file
View File

Binary file not shown.

1
ng6-seed/src/environments/environment.prod.ts
View File

@ -4,6 +4,7 @@ export const environment = {
environmentName: 'Production Environment',//Live Environment.
apiEndpoint: 'https://api.pdgenie.com/sparqprod/api/',
socketServerUrl:'https://morning-garden-90282.herokuapp.com',
authorization: 'TnAwuc64pVpcB9xf',
login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_MlTee1O5V",

1
ng6-seed/src/environments/environment.stage.ts
View File

@ -4,6 +4,7 @@ export const environment = {
environmentName: 'Testing Environment',//Test Environment.
apiEndpoint: 'https://apitest.pdgenie.com/sparqtest/api/',
socketServerUrl:'https://morning-garden-90282.herokuapp.com',
authorization: 'sparqvenba2018',
login_string: "cognito-idp.ap-south-1.amazonaws.com/ap-south-1_qQ85yQZJO",