+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Note : Make sure the Reciever is waiting for your call before start Calling
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ng6-seed/src/app/video-chat/video-chat.component.scss b/ng6-seed/src/app/video-chat/video-chat.component.scss
new file mode 100644
index 000000000..bc377e6ae
--- /dev/null
+++ b/ng6-seed/src/app/video-chat/video-chat.component.scss
@@ -0,0 +1,73 @@
+::ng-deep { .video-chat > mat-dialog-container {
+ background: #71AFFF;
+ padding: 0;
+ }
+}
+
+@media(max-width:500px) {
+
+ video#myvideo {
+ max-width: 32%;
+ // min-width: 150px;
+ position: absolute;
+ border: 2px solid #9E9E9E;
+ top:0;
+ left: 0;
+ // /* top: 20px;
+}
+
+video#peervideo {
+ /* height: 498px; */
+ // position: relative;
+ // margin-top: 126px;
+ width: 100%;
+}
+
+.peer_message{
+ font-size: 20px;
+ position: absolute;
+ top: 11%;
+ float: right;
+ padding: 57px;
+ /* border: 2px solid lavender; */
+ left: 8%;
+ p{
+ text-align: center;
+ }
+}
+ }
+ @media(min-width:500px) {
+ .peer_video{
+ max-height: 80vh;
+ }
+ video#myvideo {
+ max-width: 22%;
+ // min-width: 150px;
+ position: absolute;
+ border: 2px solid #9E9E9E;
+ top:0;
+ left: 0;
+ // max-width: 45%;
+ // text-align: center;
+ // margin-left:3%;
+ // margin-top:1%;
+ // min-width: 150px;
+ // position: absolute;
+ // border: 2px solid #9E9E9E;
+ // /* top: 20px;
+}
+
+video#peervideo {
+ /* height: 498px; */
+ max-width: 100%;
+ text-align: center;
+ margin-left:3%;
+ margin-top:1%;
+ // position: relative;
+ // margin-top: 126px;
+ // width: 100%;
+}
+}
+body{
+ margin:10px !important;
+}
diff --git a/ng6-seed/src/app/video-chat/video-chat.component.spec.ts b/ng6-seed/src/app/video-chat/video-chat.component.spec.ts
new file mode 100644
index 000000000..69efedd43
--- /dev/null
+++ b/ng6-seed/src/app/video-chat/video-chat.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoChatComponent } from './video-chat.component';
+
+describe('VideoChatComponent', () => {
+ let component: VideoChatComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ VideoChatComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(VideoChatComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/ng6-seed/src/app/video-chat/video-chat.component.ts b/ng6-seed/src/app/video-chat/video-chat.component.ts
new file mode 100644
index 000000000..35dbbb162
--- /dev/null
+++ b/ng6-seed/src/app/video-chat/video-chat.component.ts
@@ -0,0 +1,421 @@
+import { Component, OnInit, ChangeDetectorRef, ViewChild, Inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PushNotifyService } from 'app/shared/push-notify.service';
+import { Socket } from 'ngx-socket-io';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+ selector: 'app-video-chat',
+ templateUrl: './video-chat.component.html',
+ styleUrls: ['./video-chat.component.scss']
+})
+export class VideoChatComponent implements OnInit {
+ MediaStream
+ title = 'simple-peer-video-chat';
+ peer:any;
+ targetpeer: string;
+ enableBtn: boolean;
+ @ViewChild('myvideo') myVideo: any;
+ @ViewChild('peervideo') peervideo: any;
+ @ViewChild('camera_switch') camereSwitchBtn: any;
+ // @ViewChild('textToCopy',{static:true}) textCopyElement: any;
+ n = navigator.mediaDevices;
+ // public textToCopy:any;
+ myVideoEnable: boolean = false;
+ peerVideoEnable: boolean = false;
+ shouldFaceUser: boolean = true;
+ userCallType: any;
+ is_video_enable:boolean = false;
+ mic_mute: boolean = true;
+ video_mute: boolean = true;
+ constructor(private _notificationService:PushNotifyService,
+ private cdRef: ChangeDetectorRef,private socket: Socket,
+ private dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public chat_info:any) {
+ this._notificationService.requestPermission();
+ // this.notify('Approval','This is First Alert -- By Debasis Saha')
+ console.log("Version #8")
+ }
+ notify(title,approval) {
+ let data: Array < any >= [];
+ data.push({
+ 'title': title,
+ 'body': approval
+ });
+ this._notificationService.generateNotification(data);
+}
+ // ngOnInit() {
+ // setTimeout(()=>{
+ // console.log("ngOninti")
+ // this.peer = new SimplePeer({
+ // initiator: location.hash === '#init',
+ // trickle: false
+ // })
+ // console.log(this.peer)
+ // this.peer.on('signal', function(data) {
+ // console.log(JSON.stringify(data));
+
+ // this.targetpeer = data;
+ // })
+ // this.peer.on('error', err => console.log('error', err))
+ // this.peer.on('data', function(data) {
+ // console.log('Recieved message:' + data);
+ // this.notify('notify',data)
+ // })
+ // this.peer.on('connect', () => {
+ // console.log('CONNECT')
+ // this.peer.send('whatever' + Math.random())
+ // })
+ // setTimeout(()=>{
+ // console.log("updated")
+ // this.enableBtn=true
+ // this.notify('notify','enabled')
+ // },1000)
+ // },3000)
+ // }
+
+ 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) {
+ this.is_video_enable = true;
+ this.start_Calling('receive')
+ }
+ }
+ // this.start_Calling('receive')
+ }
+ start_Calling(option) {
+ this.userCallType = option
+ // let texk=this.textCopyElement.nativeElement
+ let video = this.myVideo.nativeElement;
+ let peerVideo = this.peervideo.nativeElement
+ let peerx: any;
+ let copyMessageText
+ this.n.getUserMedia = (this.n.getUserMedia || this.n.webkitGetUserMedia || this.n.mozGetUserMedia || this.n.msGetUserMedia);
+ if(this.n.getUserMedia == undefined || this.n.getUserMedia == null, this.n.getUserMedia == ''){
+ alert("unable to get the camera access. please close the browser and come back again")
+ }
+ console.log(this.n)
+ let defaultsOpts = { audio: true, video: {
+ facingMode: this.shouldFaceUser ? 'user' : 'environment'
+ }
+ }
+ this.n.getUserMedia(defaultsOpts).then(stream=> {
+ this.socket.emit('NewClient')
+ video.load();
+ video.muted = true;
+ this.fetchVideoAndPlay(stream,video);
+ this.myVideoEnable = true
+ this.MediaStream = stream
+ // let switchCameraBtn= this.camereSwitchBtn.nativeElement
+ let supports = navigator.mediaDevices.getSupportedConstraints();
+ console.log(supports)
+ if( supports['facingMode'] === true ) {
+ // switchCameraBtn.disabled = false;
+}
+ console.log("entered",stream);
+ peerx = new SimplePeer ({
+ initiator: option === 'init',
+ stream: stream,
+ reconnectTimer: 1000,
+ iceTransportPolicy: 'relay',
+ trickle: false,
+ config: {
+ iceServers: [
+ {
+ "urls": "stun:numb.viagenie.ca",
+ "username": 'fairojm@gmail.com',
+ "credential": 'fairojfai00'
+ },
+ {
+ "urls": "turn:numb.viagenie.ca",
+ "username": "fairojm@gmail.com",
+ "credential": "fairojfai00"
+ }
+ ]
+ }
+ })
+
+ // function InitPeer(type) {
+ peerx.on('signal',(data)=> {
+
+ 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)
+ }
+ // copyMessage(JSON.stringify(data))
+ copyMessageText = JSON.stringify(data);
+ // update()
+ this.copyMessage(copyMessageText,data.type)
+ // this.targetpeer = data;
+ })
+ // }
+ peerx.on('data', function(data) {
+ console.log('Recieved message:' + data);
+ })
+ peerx.on('close', (data) => {
+ 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))
+ })
+ peerx.on('error', (err) => {
+ console.log("Fatal Error ",err);
+
+ alert("Fatal Error" +JSON.stringify(err))
+ })
+ peerx.on('stream', (stream)=> {
+ console.log("@##################33",stream)
+ if ('srcObject' in peerVideo) {
+ peerVideo.srcObject = stream
+ } else {
+ peerVideo.src = window.URL.createObjectURL(stream) // for older browsers
+ }
+ // video.play();
+
+ // console.log(this.peerVideoEnable);
+ peerVideo.load();
+ this. fetchVideoAndPlay(stream,peerVideo,true);
+ // setTimeout(()=>{
+ // // this.peerVideoEnable = true;
+ // // console.log(this.peerVideoEnable)
+ // },2000)
+ // CreateVideo(stream)
+ })
+ // fetchVideoAndPlay(stream,videotype) {
+ // fetch('')
+ // .then(response => response.blob())
+ // .then(blob => {
+ // videotype.srcObject = stream;
+ // return videotype.play();
+ // })
+ // .then(_ => {
+ // // Video playback started ;)
+ // })
+ // .catch(e => {
+ // // Video playback failed ;(
+ // })
+ // }
+
+ // function CreateVideo(stream) {
+ // // CreateDiv()
+
+ // let video = document.createElement('video')
+ // video.id = 'peerVideo'
+ // video.srcObject = stream
+ // video.setAttribute('class', 'embed-responsive-item')
+ // document.querySelector('#peervideo').appendChild(video)
+ // video.play()
+ // //wait for 1 sec
+ // }
+ function connectPeer(answer) {
+ console.log("$$$$$$$$$$$$$$44");
+ console.log(answer);
+ peerx.signal(answer);
+ }
+ function getPeer(){
+ return JSON.stringify(copyMessageText)
+ }
+ // if(JSON.parse(copyMessageText).hasOwnProperty('type') && JSON.parse(copyMessageText).type == 'offer')
+ // {
+// setTimeout(()=>{
+// 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)
+ }
+ let tt = this.socket.on('BackOffer', connectPeer)
+ console.log(tt);
+ this.socket.on('BackAnswer', connectPeer)
+ }, err=>{
+ console.log('Failed to get stream', err);
+ alert('Failed to get stream '+err);
+ });
+ // function update(){
+ // console.log(copyMessageText)
+ // setTimeout(()=>{
+ // // texk.value = copyMessageText
+ // },2000)
+ // }
+ setTimeout(() => {
+ this.peer = peerx;
+
+ // this.copyMessage(JSON.stringify(this.targetpeer))
+ console.log(this.peer);
+ // console.log(copyMessageText)
+ // this.targetpeer = copyMessageText
+ // this.textToCopy = copyMessageText
+ // this.copyMessage(copyMessageText)
+ }, 5000);
+
+ // socket.on('SessionActive', SessionActive)
+ // socket.on('CreatePeer', MakePeer)
+ // socket.on('Disconnect', RemovePeer)
+ }
+ 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 => {
+ videotype.srcObject = stream;
+ return videotype.play();
+ })
+ .then(_ => {
+ // Video playback started ;)
+ })
+ .catch(e => {
+ // Video playback failed ;(
+ })
+ }
+ startRecording(stream) {
+ let 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)
+});
+// var file = new File([blob], 'video.mp4', {
+// type: 'video/mp4'
+// });
+// console.log(file)
+// const fileURL = window.URL.createObjectURL(file);
+// window.open(fileURL);
+// videotype.srcObject = null;
+// videotype.muted = false;
+// videotype.volume = 1;
+// videotype.srcObject = file;
+
+
+ // recorder.camera.stop();
+ // recorder.destroy();
+ // recorder = null;
+// let recorder = RecordRTC(stream, {
+// type: 'video'
+// });
+// recorder.startRecording();
+
+// const sleep = m => new Promise(r => setTimeout(r, m));
+// sleep(10000);
+
+// recorder.stopRecording(function() {
+// let blob = recorder.getBlob();
+// // invokeSaveAsDialog(blob);
+// console.log(blob);
+// });
+
+// blob.then(resul=>{
+// console.log(resul);
+// })
+// const fileURL = window.URL.createObjectURL(blob);
+// console.log(fileURL);
+// window.open(fileURL);
+},10000)
+// invokeSaveAsDialog(blob);
+ }
+ connect() {
+ this.peer.signal(JSON.parse(this.targetpeer));
+ }
+ RemovePeer() {
+ document.getElementById("peerVideo").remove();
+ // document.getElementById("muteText").remove();
+ // if (client.peer) {
+ // client.peer.destroy()
+ // }
+}
+
+ message() {
+ this.peer.send('Hello world');
+ }
+ disconnect() {
+ console.log(this.peer)
+ this.peer.destroy();
+ this.peerVideoEnable = false
+ this.targetpeer = ''
+ this.cdRef.detectChanges();
+ this.peervideo.nativeElement.pause();
+ console.log(this.MediaStream.getTracks())
+ // this.MediaStream.stop()
+ // var track = this.MediaStream.getTracks()[0]; // if only one media track
+ // ...
+ // track.stop();
+ this.MediaStream.getTracks().forEach(function(track) {
+ track.stop();
+ });
+ console.log(this.peervideo);
+ // this.peervideo.nativeElement.videoWidth = 0
+ // this.peervideo.nativeElement.videoHeight = 0
+ this.is_video_enable = false
+ this.cdRef.detectChanges();
+ }
+ copyMessage(val: string,message?){
+ const selBox = document.createElement('textarea');
+ selBox.style.position = 'fixed';
+ selBox.style.left = '0';
+ selBox.style.top = '0';
+ selBox.style.opacity = '0';
+ selBox.value = val;
+ document.body.appendChild(selBox);
+ selBox.focus();
+ selBox.select();
+ document.execCommand('copy');
+ document.body.removeChild(selBox);
+ // alert(message+ " JSON is copied to clipboard. Paste the JSON to another window")
+ this.notify("JSON copied to clipboard",message+ ' JSON');
+ }
+ switch_camera() {
+ this.shouldFaceUser = !this.shouldFaceUser;
+ console.log(this.userCallType);
+ this.peer.destroy();
+ this.start_Calling(this.userCallType)
+ }
+ close_all() {
+ if(this.peer) {
+ this.disconnect();
+ }
+ if(this.MediaStream && this.MediaStream.active) {
+ console.log(this.MediaStream.getTracks())
+ // this.MediaStream.stop()
+ // var track = this.MediaStream.getTracks()[0]; // if only one media track
+ // ...
+ // track.stop();
+ this.MediaStream.getTracks().forEach(function(track) {
+ track.stop();
+ });
+ }
+ this.dialogRef.close();
+ }
+ micMuteHandling(){
+ this.mic_mute = !this.mic_mute
+ this.cdRef.detectChanges();
+ this.MediaStream.getAudioTracks()[0].enabled = this.mic_mute;
+ }
+ videoHandling(){
+ this.video_mute = !this.video_mute
+ this.cdRef.detectChanges();
+ this.MediaStream.getVideoTracks()[0].enabled = this.video_mute;
+ }
+
+}
diff --git a/ng6-seed/src/assets/spinner/notfound.jpg b/ng6-seed/src/assets/spinner/notfound.jpg
new file mode 100644
index 000000000..900f35aeb
Binary files /dev/null and b/ng6-seed/src/assets/spinner/notfound.jpg differ
diff --git a/ng6-seed/src/assets/spinner/notfound2.jpg b/ng6-seed/src/assets/spinner/notfound2.jpg
new file mode 100644
index 000000000..25a1d3348
Binary files /dev/null and b/ng6-seed/src/assets/spinner/notfound2.jpg differ
diff --git a/ng6-seed/src/assets/spinner/notfound_blue.png b/ng6-seed/src/assets/spinner/notfound_blue.png
new file mode 100644
index 000000000..cf1f5a7f3
Binary files /dev/null and b/ng6-seed/src/assets/spinner/notfound_blue.png differ
diff --git a/ng6-seed/src/environments/environment.ts b/ng6-seed/src/environments/environment.ts
index 3b8f9112f..55aaf3249 100755
--- a/ng6-seed/src/environments/environment.ts
+++ b/ng6-seed/src/environments/environment.ts
@@ -14,6 +14,7 @@ export const environment = {
// apiEndpoint: 'https://demo.pdgenie.com/sparqapi/api/',
apiEndpoint:'https://apitest.pdgenie.com/sparqtest/api/',
// apiEndpoint:'http://localhost/sineEdge/sparqapi/api/',
+ socketServerUrl:'https://morning-garden-90282.herokuapp.com',
authorization: 'sparqvenba2018',
diff --git a/ng6-seed/src/index.html b/ng6-seed/src/index.html
index 963d27c67..c97fe548d 100755
--- a/ng6-seed/src/index.html
+++ b/ng6-seed/src/index.html
@@ -9,6 +9,10 @@
+
+
+
+
PD Genie
diff --git a/ng6-seed/src/typings.d.ts b/ng6-seed/src/typings.d.ts
index a0786e36b..2c420c444 100755
--- a/ng6-seed/src/typings.d.ts
+++ b/ng6-seed/src/typings.d.ts
@@ -6,4 +6,7 @@ interface NodeModule {
declare module 'quill';
declare module 'leaflet';
declare module 'perfect-scrollbar';
-declare module 'screenfull';
\ No newline at end of file
+declare module 'screenfull';
+declare var SimplePeer: any;
+declare var RecordRTCPromisesHandler:any;
+declare var RecordRTC:any;
\ No newline at end of file
+