|
|
@@ -1,407 +1,409 @@
|
|
|
-<?php /** @var $client */ ?>
|
|
|
+<?php
|
|
|
+
|
|
|
+/** @var $client */ ?>
|
|
|
|
|
|
@extends('layouts.meeting')
|
|
|
@section('content')
|
|
|
|
|
|
- <div id="clientCallComponent">
|
|
|
+<div id="clientCallComponent">
|
|
|
+
|
|
|
+ <div class="d-flex align-items-center py-3 border-bottom px-4">
|
|
|
+ <span class="mr-auto">
|
|
|
+ Hello {{ $client->name_last }}, {{ $client->name_first }}
|
|
|
+ </span>
|
|
|
+ <a href="#" class="client-logout">Log Out</a>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="d-flex align-items-center py-3 border-bottom px-4">
|
|
|
- <span class="mr-auto">
|
|
|
- Hello {{ $client->name_last }}, {{ $client->name_first }}
|
|
|
- </span>
|
|
|
- <a href="#" class="client-logout">Log Out</a>
|
|
|
+ <div class="">
|
|
|
+ <div class="py-3 text-center" v-if="started">
|
|
|
+ <h6 class="text-black font-weight-bold m-0">Call in progress: @{{ timeDisplay() }}</h6>
|
|
|
</div>
|
|
|
+ <div class="py-3 text-center" v-if="noOneElseInCall">
|
|
|
+ <!-- <h6 class="text-black font-weight-bold m-0">A pro may pop in here at the next chance. Please wait..</h6> -->
|
|
|
+ <h1>Free COVID-19 Safety Kit & Coaching Session.</h1>
|
|
|
|
|
|
- <div class="">
|
|
|
- <div class="py-3 text-center" v-if="started">
|
|
|
- <h6 class="text-black font-weight-bold m-0">Call in progress: @{{ timeDisplay() }}</h6>
|
|
|
- </div>
|
|
|
- <div class="py-3 text-center" v-if="noOneElseInCall">
|
|
|
- <h6 class="text-black font-weight-bold m-0">A pro may pop in here at the next chance. Please wait..</h6>
|
|
|
+ <h2>A coach will be with you shortly. This call will last approximately 10 minutes.</h2>
|
|
|
+
|
|
|
+ <h3>Upon the conclusion of this call, the coach will verify your mailing address to mail you your kit. Please note that PO Boxes are not deliverable by FedEx.</h3>
|
|
|
+ </div>
|
|
|
+ <div class="main-view mx-auto">
|
|
|
+ <div class="thumbs">
|
|
|
+ <div id="self-view" class="thumb-view disconnected-view" data-name="{{ implode(" ", [$client->name_first, $client->name_last]) }}" data-type="CLIENT"></div>
|
|
|
</div>
|
|
|
- <div class="main-view mx-auto">
|
|
|
- <div class="thumbs">
|
|
|
- <div id="self-view" class="thumb-view disconnected-view"
|
|
|
- data-name="{{ implode(" ", [$client->name_first, $client->name_last]) }}"
|
|
|
- data-type="CLIENT"></div>
|
|
|
- </div>
|
|
|
- <?php /* <button class="btn btn-danger rounded-circle hang-up"
|
|
|
+ <?php /* <button class="btn btn-danger rounded-circle hang-up"
|
|
|
v-if="started"
|
|
|
title="Leave Call"
|
|
|
v-on:click.prevent="hangUp()">
|
|
|
<i class="fa fa-phone"></i>
|
|
|
</button> */ ?>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="d-flex justify-content-center mt-3">
|
|
|
- <button v-if="readyToPublish && !publishing"
|
|
|
- class="btn btn-sm btn-primary font-weight-bold"
|
|
|
- v-on:click.prevent="cameraOn()">Start My Camera</button>
|
|
|
- <button v-if="readyToPublish && publishing"
|
|
|
- class="btn btn-sm btn-danger font-weight-bold"
|
|
|
- v-on:click.prevent="cameraOff()">Stop My Camera</button>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="d-flex justify-content-center mt-3">
|
|
|
+ <button v-if="readyToPublish && !publishing" class="btn btn-sm btn-primary font-weight-bold" v-on:click.prevent="cameraOn()">Start My Camera</button>
|
|
|
+ <button v-if="readyToPublish && publishing" class="btn btn-sm btn-danger font-weight-bold" v-on:click.prevent="cameraOff()">Stop My Camera</button>
|
|
|
</div>
|
|
|
|
|
|
- <script>
|
|
|
+</div>
|
|
|
|
|
|
- window.clientCallComponent = new Vue({
|
|
|
- el: '#clientCallComponent',
|
|
|
- delimiters: ['@{{', '}}'],
|
|
|
- data: {
|
|
|
+<script>
|
|
|
+ window.clientCallComponent = new Vue({
|
|
|
+ el: '#clientCallComponent',
|
|
|
+ delimiters: ['@{{', '}}'],
|
|
|
+ data: {
|
|
|
|
|
|
- mdPass: true, // set this to true if client has all medicare reqs met
|
|
|
+ mdPass: true, // set this to true if client has all medicare reqs met
|
|
|
|
|
|
- time: 0,
|
|
|
- startTime: 0,
|
|
|
- started: false,
|
|
|
- client: false,
|
|
|
- pro: false,
|
|
|
+ time: 0,
|
|
|
+ startTime: 0,
|
|
|
+ started: false,
|
|
|
+ client: false,
|
|
|
+ pro: false,
|
|
|
|
|
|
- selfName: '',
|
|
|
- selfToken: '',
|
|
|
+ selfName: '',
|
|
|
+ selfToken: '',
|
|
|
|
|
|
- clientUid: '{{ $client->uid }}',
|
|
|
- checkInToken: '',
|
|
|
+ clientUid: '{{ $client->uid }}',
|
|
|
+ checkInToken: '',
|
|
|
|
|
|
- otSessionId: '{{ $client->opentok_session_id }}',
|
|
|
+ otSessionId: '{{ $client->opentok_session_id }}',
|
|
|
|
|
|
- otSession: false,
|
|
|
- publisher: false,
|
|
|
- readyToPublish: false,
|
|
|
- publishing: false,
|
|
|
+ otSession: false,
|
|
|
+ publisher: false,
|
|
|
+ readyToPublish: false,
|
|
|
+ publishing: false,
|
|
|
|
|
|
- selfUserType: 'CLIENT',
|
|
|
- selfStreamId: '',
|
|
|
- noOneElseInCall: true,
|
|
|
+ selfUserType: 'CLIENT',
|
|
|
+ selfStreamId: '',
|
|
|
+ noOneElseInCall: true,
|
|
|
|
|
|
- heartbeatTimer: false,
|
|
|
+ heartbeatTimer: false,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ timeDisplay: function() {
|
|
|
+ var seconds = this.time / 1000,
|
|
|
+ minutes = parseInt(seconds / 60, 10);
|
|
|
+ seconds = parseInt(seconds % 60, 10);
|
|
|
+ return minutes + " min, " + seconds + " sec";
|
|
|
},
|
|
|
- methods: {
|
|
|
- timeDisplay: function() {
|
|
|
- var seconds = this.time / 1000,
|
|
|
- minutes = parseInt(seconds / 60, 10);
|
|
|
- seconds = parseInt(seconds % 60, 10);
|
|
|
- return minutes + " min, " + seconds + " sec";
|
|
|
- },
|
|
|
- hangUp: function() {
|
|
|
- if(this.otSession) {
|
|
|
- try {
|
|
|
- this.otSession.disconnect();
|
|
|
- }
|
|
|
- catch (e) {
|
|
|
- console.log('Was already disconnected.');
|
|
|
- }
|
|
|
- this.otSession = false;
|
|
|
- this.otSessionId = '';
|
|
|
- this.started = false;
|
|
|
- this.startTime = false;
|
|
|
- // window.location = '/join';
|
|
|
+ hangUp: function() {
|
|
|
+ if (this.otSession) {
|
|
|
+ try {
|
|
|
+ this.otSession.disconnect();
|
|
|
+ } catch (e) {
|
|
|
+ console.log('Was already disconnected.');
|
|
|
}
|
|
|
- },
|
|
|
- initOpenTok: function() {
|
|
|
-
|
|
|
- /* fake video feed (temp) */
|
|
|
- const canvas = document.createElement('canvas');
|
|
|
- canvas.width = 640;
|
|
|
- canvas.height = 480;
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
- var pos = 100;
|
|
|
- window.setInterval(function() {
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- ctx.font = "20px Georgia";
|
|
|
- ctx.fillStyle = `rgb(220, 220, 220)`;
|
|
|
- ctx.fillText("Video feed from {{ $client->name_first }}", 20, pos);
|
|
|
- pos += 5;
|
|
|
- if(pos > canvas.height) pos = 100;
|
|
|
- }, 1000);
|
|
|
+ this.otSession = false;
|
|
|
+ this.otSessionId = '';
|
|
|
+ this.started = false;
|
|
|
+ this.startTime = false;
|
|
|
+ // window.location = '/join';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initOpenTok: function() {
|
|
|
+
|
|
|
+ /* fake video feed (temp) */
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ canvas.width = 640;
|
|
|
+ canvas.height = 480;
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+ var pos = 100;
|
|
|
+ window.setInterval(function() {
|
|
|
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ ctx.font = "20px Georgia";
|
|
|
+ ctx.fillStyle = `rgb(220, 220, 220)`;
|
|
|
+ ctx.fillText("Video feed from {{ $client->name_first }}", 20, pos);
|
|
|
+ pos += 5;
|
|
|
+ if (pos > canvas.height) pos = 100;
|
|
|
+ }, 1000);
|
|
|
|
|
|
- var self = this;
|
|
|
+ var self = this;
|
|
|
|
|
|
- var apiKey = '<?= env('TOKBOX_API_KEY', '46678902') ?>';
|
|
|
- var sessionId = this.otSessionId;
|
|
|
- var token = this.selfToken;
|
|
|
+ var apiKey = '<?= env('TOKBOX_API_KEY', '46678902') ?>';
|
|
|
+ var sessionId = this.otSessionId;
|
|
|
+ var token = this.selfToken;
|
|
|
|
|
|
- // destroy if existing
|
|
|
- // self.hangUp();
|
|
|
+ // destroy if existing
|
|
|
+ // self.hangUp();
|
|
|
|
|
|
- self.otSession = OT.initSession(apiKey, sessionId);
|
|
|
+ self.otSession = OT.initSession(apiKey, sessionId);
|
|
|
|
|
|
- // peer connected
|
|
|
- self.otSession.on('streamCreated', function streamCreated(event) {
|
|
|
- console.log('session->streamCreated', arguments);
|
|
|
- var subscriberOptions = {
|
|
|
- insertMode: 'append',
|
|
|
- width: '100%',
|
|
|
- height: '100%'
|
|
|
- };
|
|
|
+ // peer connected
|
|
|
+ self.otSession.on('streamCreated', function streamCreated(event) {
|
|
|
+ console.log('session->streamCreated', arguments);
|
|
|
+ var subscriberOptions = {
|
|
|
+ insertMode: 'append',
|
|
|
+ width: '100%',
|
|
|
+ height: '100%'
|
|
|
+ };
|
|
|
|
|
|
- var connectionData = JSON.parse(event.stream.connection.data);
|
|
|
+ var connectionData = JSON.parse(event.stream.connection.data);
|
|
|
|
|
|
- // add a div for remove view
|
|
|
- var remoteViewID = 'remote-view-' + event.stream.id;
|
|
|
- var remoteElem = $('<div id="' + remoteViewID + '" class="remote-view thumb-view" ' +
|
|
|
- 'data-stream="' + event.stream.id + '" ' +
|
|
|
- 'data-connection-data="' + event.stream.connection.data + '" ' +
|
|
|
- 'data-name="' + connectionData.name + '" ' +
|
|
|
- 'data-type="' + connectionData.type + '"></div>');
|
|
|
- remoteElem.appendTo('.thumbs');
|
|
|
+ // add a div for remove view
|
|
|
+ var remoteViewID = 'remote-view-' + event.stream.id;
|
|
|
+ var remoteElem = $('<div id="' + remoteViewID + '" class="remote-view thumb-view" ' +
|
|
|
+ 'data-stream="' + event.stream.id + '" ' +
|
|
|
+ 'data-connection-data="' + event.stream.connection.data + '" ' +
|
|
|
+ 'data-name="' + connectionData.name + '" ' +
|
|
|
+ 'data-type="' + connectionData.type + '"></div>');
|
|
|
+ remoteElem.appendTo('.thumbs');
|
|
|
|
|
|
- self.otSession.subscribe(event.stream, remoteViewID, subscriberOptions, self.handleOpenTokError_Subscribe);
|
|
|
+ self.otSession.subscribe(event.stream, remoteViewID, subscriberOptions, self.handleOpenTokError_Subscribe);
|
|
|
|
|
|
- if (connectionData.type === 'PRO') {
|
|
|
- self.pro = true;
|
|
|
- }
|
|
|
+ if (connectionData.type === 'PRO') {
|
|
|
+ self.pro = true;
|
|
|
+ }
|
|
|
|
|
|
- self.activateParty(event.stream.id);
|
|
|
+ self.activateParty(event.stream.id);
|
|
|
|
|
|
- self.noOneElseInCall = false;
|
|
|
- });
|
|
|
+ self.noOneElseInCall = false;
|
|
|
+ });
|
|
|
|
|
|
- // peer disconnected
|
|
|
- self.otSession.on("streamDestroyed", function(event) {
|
|
|
- onPeerDisconnection(event, event.stream.connection.data);
|
|
|
- });
|
|
|
- // self.otSession.on("connectionDestroyed", function(event) {
|
|
|
- // debugger;
|
|
|
- // console.log('connectionDestroyed from ' + event.connection.data);
|
|
|
- // onPeerDisconnection(event, event.connection.data);
|
|
|
- // });
|
|
|
-
|
|
|
- function onPeerDisconnection(event, data) {
|
|
|
-
|
|
|
- console.log('onPeerDisconnection');
|
|
|
-
|
|
|
- if(event.stream && $('.full-view[data-stream="' + event.stream.id + '"]').length) {
|
|
|
- var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
|
|
|
- if(allThumbs.length) {
|
|
|
- $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
|
|
|
- if($(this).attr('data-stream') !== event.stream.id) {
|
|
|
- self.activateParty($(this).attr('data-stream'));
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+ // peer disconnected
|
|
|
+ self.otSession.on("streamDestroyed", function(event) {
|
|
|
+ onPeerDisconnection(event, event.stream.connection.data);
|
|
|
+ });
|
|
|
+ // self.otSession.on("connectionDestroyed", function(event) {
|
|
|
+ // debugger;
|
|
|
+ // console.log('connectionDestroyed from ' + event.connection.data);
|
|
|
+ // onPeerDisconnection(event, event.connection.data);
|
|
|
+ // });
|
|
|
|
|
|
- if(event.stream) {
|
|
|
- var remoteViewElem = $('[data-stream="' + event.stream.id + '"]');
|
|
|
- remoteViewElem.remove();
|
|
|
- // if(remoteViewElem.length) {
|
|
|
- // remoteViewElem.attr('data-stream', '');
|
|
|
- // remoteViewElem.attr('data-connection-data', '');
|
|
|
- // remoteViewElem.attr('data-type', '');
|
|
|
- // remoteViewElem.attr('data-name', '');
|
|
|
- // }
|
|
|
- // remoteViewElem.addClass('disconnected-view')
|
|
|
- }
|
|
|
+ function onPeerDisconnection(event, data) {
|
|
|
+
|
|
|
+ console.log('onPeerDisconnection');
|
|
|
|
|
|
- // if no other parties in call, hang up
|
|
|
- if(!$('[data-stream]:not([data-stream="' + self.selfStreamId + '"])').length) {
|
|
|
- // self.hangUp();
|
|
|
- console.warn('No other parties in the call!');
|
|
|
- // new Noty({
|
|
|
- // theme: 'mint',
|
|
|
- // type: 'info',
|
|
|
- // text: 'All other participants have left the call',
|
|
|
- // progressBar: false,
|
|
|
- // timeout: 2500,
|
|
|
- // }).show();
|
|
|
- self.startTime = 0;
|
|
|
- self.started = false;
|
|
|
- self.noOneElseInCall = true;
|
|
|
+ if (event.stream && $('.full-view[data-stream="' + event.stream.id + '"]').length) {
|
|
|
+ var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):not(.disconnected-view):visible');
|
|
|
+ if (allThumbs.length) {
|
|
|
+ $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
|
|
|
+ if ($(this).attr('data-stream') !== event.stream.id) {
|
|
|
+ self.activateParty($(this).attr('data-stream'));
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // self disconnected
|
|
|
- self.otSession.on('sessionDisconnected', function sessionDisconnected(event) {
|
|
|
- console.log('You were disconnected from the session.', event.reason);
|
|
|
+ if (event.stream) {
|
|
|
+ var remoteViewElem = $('[data-stream="' + event.stream.id + '"]');
|
|
|
+ remoteViewElem.remove();
|
|
|
+ // if(remoteViewElem.length) {
|
|
|
+ // remoteViewElem.attr('data-stream', '');
|
|
|
+ // remoteViewElem.attr('data-connection-data', '');
|
|
|
+ // remoteViewElem.attr('data-type', '');
|
|
|
+ // remoteViewElem.attr('data-name', '');
|
|
|
+ // }
|
|
|
+ // remoteViewElem.addClass('disconnected-view')
|
|
|
+ }
|
|
|
|
|
|
- // turn client video off
|
|
|
- $.post('/api/clientVideoVisit/turnClientVideoOff', {}, function(_data) {
|
|
|
- console.log(_data);
|
|
|
- });
|
|
|
+ // if no other parties in call, hang up
|
|
|
+ if (!$('[data-stream]:not([data-stream="' + self.selfStreamId + '"])').length) {
|
|
|
+ // self.hangUp();
|
|
|
+ console.warn('No other parties in the call!');
|
|
|
+ // new Noty({
|
|
|
+ // theme: 'mint',
|
|
|
+ // type: 'info',
|
|
|
+ // text: 'All other participants have left the call',
|
|
|
+ // progressBar: false,
|
|
|
+ // timeout: 2500,
|
|
|
+ // }).show();
|
|
|
+ self.startTime = 0;
|
|
|
+ self.started = false;
|
|
|
+ self.noOneElseInCall = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // in case of accidental disconnection
|
|
|
- self.initOpenTok();
|
|
|
+ // self disconnected
|
|
|
+ self.otSession.on('sessionDisconnected', function sessionDisconnected(event) {
|
|
|
+ console.log('You were disconnected from the session.', event.reason);
|
|
|
+
|
|
|
+ // turn client video off
|
|
|
+ $.post('/api/clientVideoVisit/turnClientVideoOff', {}, function(_data) {
|
|
|
+ console.log(_data);
|
|
|
});
|
|
|
|
|
|
- // initialize the publisher
|
|
|
- var publisherOptions = {
|
|
|
- videoSource: canvas.captureStream(1).getVideoTracks()[0], // TODO: Comment this line to use webcam
|
|
|
- insertMode: 'append',
|
|
|
- width: '100%',
|
|
|
- height: '100%',
|
|
|
- };
|
|
|
- self.publisher = OT.initPublisher('self-view', publisherOptions, self.handleOpenTokError_InitPublisher);
|
|
|
-
|
|
|
- self.publisher.on('streamCreated', function(event) {
|
|
|
- console.log('publisher->streamCreated');
|
|
|
- var selfView = $('#self-view');
|
|
|
- selfView.attr('data-stream', event.stream.id);
|
|
|
- selfView.attr('data-type', 'CLIENT');
|
|
|
- self.selfStreamId = event.stream.id;
|
|
|
- self.activateParty('self');
|
|
|
- $('#self-view').show();
|
|
|
-
|
|
|
- self.startTime = new Date().getTime();
|
|
|
- window.setInterval(function() {
|
|
|
- self.time = new Date().getTime() - self.startTime;
|
|
|
- }, 1000);
|
|
|
- self.started = true;
|
|
|
-
|
|
|
- // turn client video on
|
|
|
- $.post('/api/clientVideoVisit/turnClientVideoOn', {}, function(_data) {
|
|
|
- console.log(_data);
|
|
|
+ // in case of accidental disconnection
|
|
|
+ self.initOpenTok();
|
|
|
+ });
|
|
|
|
|
|
+ // initialize the publisher
|
|
|
+ var publisherOptions = {
|
|
|
+ videoSource: canvas.captureStream(1).getVideoTracks()[0], // TODO: Comment this line to use webcam
|
|
|
+ insertMode: 'append',
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ };
|
|
|
+ self.publisher = OT.initPublisher('self-view', publisherOptions, self.handleOpenTokError_InitPublisher);
|
|
|
+
|
|
|
+ self.publisher.on('streamCreated', function(event) {
|
|
|
+ console.log('publisher->streamCreated');
|
|
|
+ var selfView = $('#self-view');
|
|
|
+ selfView.attr('data-stream', event.stream.id);
|
|
|
+ selfView.attr('data-type', 'CLIENT');
|
|
|
+ self.selfStreamId = event.stream.id;
|
|
|
+ self.activateParty('self');
|
|
|
+ $('#self-view').show();
|
|
|
+
|
|
|
+ self.startTime = new Date().getTime();
|
|
|
+ window.setInterval(function() {
|
|
|
+ self.time = new Date().getTime() - self.startTime;
|
|
|
+ }, 1000);
|
|
|
+ self.started = true;
|
|
|
|
|
|
+ // turn client video on
|
|
|
+ $.post('/api/clientVideoVisit/turnClientVideoOn', {}, function(_data) {
|
|
|
+ console.log(_data);
|
|
|
|
|
|
- });
|
|
|
- });
|
|
|
|
|
|
- self.publisher.on('streamDestroyed', function(event) {
|
|
|
- event.preventDefault();
|
|
|
- console.log('publisher->streamDestroyed');
|
|
|
- $('#self-view').hide();
|
|
|
- var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):visible');
|
|
|
- if(allThumbs.length) {
|
|
|
- $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
|
|
|
- if($(this).attr('data-stream') !== $('#self-view').attr('data-stream')) {
|
|
|
- self.activateParty($(this).attr('data-stream'));
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
|
|
|
- // turn client video off
|
|
|
- $.post('/api/clientVideoVisit/turnClientVideoOff', {}, function(_data) {
|
|
|
- console.log(_data);
|
|
|
- });
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
- // Connect to the session
|
|
|
- self.otSession.connect(token, function callback(error) {
|
|
|
- if (error) {
|
|
|
- self.handleOpenTokError_SessionConnect(error);
|
|
|
- } else {
|
|
|
- console.info('Connected to OT session :)');
|
|
|
- self.readyToPublish = true;
|
|
|
+ self.publisher.on('streamDestroyed', function(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ console.log('publisher->streamDestroyed');
|
|
|
+ $('#self-view').hide();
|
|
|
+ var allThumbs = $('.thumbs [data-stream]:not([data-stream=""]):visible');
|
|
|
+ if (allThumbs.length) {
|
|
|
+ $('.thumbs [data-stream]:not([data-stream=""])').each(function() {
|
|
|
+ if ($(this).attr('data-stream') !== $('#self-view').attr('data-stream')) {
|
|
|
+ self.activateParty($(this).attr('data-stream'));
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- // auto start client video
|
|
|
- self.cameraOn();
|
|
|
- }
|
|
|
+ // turn client video off
|
|
|
+ $.post('/api/clientVideoVisit/turnClientVideoOff', {}, function(_data) {
|
|
|
+ console.log(_data);
|
|
|
});
|
|
|
- },
|
|
|
- cameraOn: function() {
|
|
|
- if(this.readyToPublish) {
|
|
|
- this.otSession.publish(this.publisher, this.handleOpenTokError_Publish);
|
|
|
- this.publishing = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ // Connect to the session
|
|
|
+ self.otSession.connect(token, function callback(error) {
|
|
|
+ if (error) {
|
|
|
+ self.handleOpenTokError_SessionConnect(error);
|
|
|
+ } else {
|
|
|
+ console.info('Connected to OT session :)');
|
|
|
+ self.readyToPublish = true;
|
|
|
+
|
|
|
+ // auto start client video
|
|
|
+ self.cameraOn();
|
|
|
}
|
|
|
- },
|
|
|
- cameraOff: function() {
|
|
|
- this.otSession.unpublish(this.publisher);
|
|
|
- this.publishing = false;
|
|
|
- },
|
|
|
- handleOpenTokError_SessionConnect: function(e) {
|
|
|
- console.log('handleOpenTokError_SessionConnect');
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- handleOpenTokError_Publish: function(e) {
|
|
|
- console.log('handleOpenTokError_Publish');
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- handleOpenTokError_Subscribe: function(e) {
|
|
|
- console.log('handleOpenTokError_Subscribe');
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- handleOpenTokError_InitPublisher: function(e) {
|
|
|
- console.log('handleOpenTokError_InitPublisher');
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
-
|
|
|
- getClientCheckinToken: function(_done) {
|
|
|
- var self = this;
|
|
|
- $.get('/get-client-checkin-token/' + this.clientUid, function(_data) {
|
|
|
- console.log(_data);
|
|
|
- self.checkInToken = _data.data;
|
|
|
- _done();
|
|
|
- }, 'json');
|
|
|
- },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cameraOn: function() {
|
|
|
+ if (this.readyToPublish) {
|
|
|
+ this.otSession.publish(this.publisher, this.handleOpenTokError_Publish);
|
|
|
+ this.publishing = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cameraOff: function() {
|
|
|
+ this.otSession.unpublish(this.publisher);
|
|
|
+ this.publishing = false;
|
|
|
+ },
|
|
|
+ handleOpenTokError_SessionConnect: function(e) {
|
|
|
+ console.log('handleOpenTokError_SessionConnect');
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ handleOpenTokError_Publish: function(e) {
|
|
|
+ console.log('handleOpenTokError_Publish');
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ handleOpenTokError_Subscribe: function(e) {
|
|
|
+ console.log('handleOpenTokError_Subscribe');
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ handleOpenTokError_InitPublisher: function(e) {
|
|
|
+ console.log('handleOpenTokError_InitPublisher');
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
|
|
|
- getOpenTokSessionId: function(_done) {
|
|
|
- var self = this;
|
|
|
+ getClientCheckinToken: function(_done) {
|
|
|
+ var self = this;
|
|
|
+ $.get('/get-client-checkin-token/' + this.clientUid, function(_data) {
|
|
|
+ console.log(_data);
|
|
|
+ self.checkInToken = _data.data;
|
|
|
+ _done();
|
|
|
+ }, 'json');
|
|
|
+ },
|
|
|
|
|
|
- $.ajax({
|
|
|
+ getOpenTokSessionId: function(_done) {
|
|
|
+ var self = this;
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
type: 'post',
|
|
|
url: '/api/clientVideoVisit/startVideoVisitAsClient',
|
|
|
headers: {
|
|
|
- 'sessionKey': '{{ request()->cookie('sessionKey') }}'
|
|
|
+ 'sessionKey': '{{ request()->cookie('
|
|
|
+ sessionKey ') }}'
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ checkInToken: this.checkInToken
|
|
|
},
|
|
|
- data: {checkInToken: this.checkInToken},
|
|
|
dataType: 'json'
|
|
|
})
|
|
|
- .done(function (_data) {
|
|
|
+ .done(function(_data) {
|
|
|
console.log(_data);
|
|
|
- if(_data.success) {
|
|
|
+ if (_data.success) {
|
|
|
self.otSessionId = _data.data;
|
|
|
_done();
|
|
|
- }
|
|
|
- else {
|
|
|
+ } else {
|
|
|
alert(_data.message);
|
|
|
}
|
|
|
})
|
|
|
- .fail(function (_data) {
|
|
|
+ .fail(function(_data) {
|
|
|
console.log(_data);
|
|
|
alert(_data.message);
|
|
|
});
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- activateParty: function(_stream = 'self') {
|
|
|
- var current = $('.full-view');
|
|
|
- if(current.attr('data-stream') === _stream) return;
|
|
|
- current.removeClass('full-view').addClass('thumb-view');
|
|
|
- if(current.attr('data-type') === 'CLIENT') {
|
|
|
- current.prependTo('.thumbs');
|
|
|
- }
|
|
|
- else {
|
|
|
- current.appendTo('.thumbs');
|
|
|
- }
|
|
|
- if(_stream === 'self') {
|
|
|
- $('#self-view')
|
|
|
- .removeClass('thumb-view')
|
|
|
- .removeClass('disconnected-view')
|
|
|
- .addClass('full-view')
|
|
|
- .prependTo('.main-view');
|
|
|
- }
|
|
|
- else {
|
|
|
- $('div[data-stream="' + _stream + '"]')
|
|
|
- .removeClass('thumb-view')
|
|
|
- .removeClass('disconnected-view')
|
|
|
- .addClass('full-view')
|
|
|
- .prependTo('.main-view');
|
|
|
- }
|
|
|
+ activateParty: function(_stream = 'self') {
|
|
|
+ var current = $('.full-view');
|
|
|
+ if (current.attr('data-stream') === _stream) return;
|
|
|
+ current.removeClass('full-view').addClass('thumb-view');
|
|
|
+ if (current.attr('data-type') === 'CLIENT') {
|
|
|
+ current.prependTo('.thumbs');
|
|
|
+ } else {
|
|
|
+ current.appendTo('.thumbs');
|
|
|
}
|
|
|
+ if (_stream === 'self') {
|
|
|
+ $('#self-view')
|
|
|
+ .removeClass('thumb-view')
|
|
|
+ .removeClass('disconnected-view')
|
|
|
+ .addClass('full-view')
|
|
|
+ .prependTo('.main-view');
|
|
|
+ } else {
|
|
|
+ $('div[data-stream="' + _stream + '"]')
|
|
|
+ .removeClass('thumb-view')
|
|
|
+ .removeClass('disconnected-view')
|
|
|
+ .addClass('full-view')
|
|
|
+ .prependTo('.main-view');
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- mounted: function() {
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
|
|
|
- var self = this;
|
|
|
+ var self = this;
|
|
|
|
|
|
- this.getClientCheckinToken(function() { // get client check-in token
|
|
|
+ this.getClientCheckinToken(function() { // get client check-in token
|
|
|
|
|
|
- self.getOpenTokSessionId(function() { // get opentok session id
|
|
|
- var name = [];
|
|
|
- @if (!empty($client->name_first)) name.push("{{ $client->name_first }}"); @endif
|
|
|
- @if (!empty($client->name_last)) name.push("{{ $client->name_last }}"); @endif
|
|
|
- self.selfName = name.join(' ');
|
|
|
- $.ajax({
|
|
|
+ self.getOpenTokSessionId(function() { // get opentok session id
|
|
|
+ var name = [];
|
|
|
+ @if(!empty($client - > name_first)) name.push("{{ $client->name_first }}");
|
|
|
+ @endif
|
|
|
+ @if(!empty($client - > name_last)) name.push("{{ $client->name_last }}");
|
|
|
+ @endif
|
|
|
+ self.selfName = name.join(' ');
|
|
|
+ $.ajax({
|
|
|
type: 'post',
|
|
|
url: '/api/openTok/getClientToken',
|
|
|
headers: {
|
|
|
- 'sessionKey': '{{ request()->cookie('sessionKey') }}'
|
|
|
+ 'sessionKey': '{{ request()->cookie('
|
|
|
+ sessionKey ') }}'
|
|
|
},
|
|
|
data: {
|
|
|
opentokSessionId: self.otSessionId,
|
|
|
@@ -413,55 +415,55 @@
|
|
|
},
|
|
|
dataType: 'json'
|
|
|
})
|
|
|
- .done(function (_data) {
|
|
|
+ .done(function(_data) {
|
|
|
console.log(_data);
|
|
|
self.selfToken = _data.data;
|
|
|
self.initOpenTok();
|
|
|
})
|
|
|
- .fail(function (_data) {
|
|
|
+ .fail(function(_data) {
|
|
|
console.warn(_data);
|
|
|
alert(_data.message);
|
|
|
});
|
|
|
|
|
|
- });
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
- $(document).on('click', '.thumbs>div[data-stream]', function() {
|
|
|
- self.activateParty($(this).attr('data-stream'));
|
|
|
- return false;
|
|
|
- });
|
|
|
+ $(document).on('click', '.thumbs>div[data-stream]', function() {
|
|
|
+ self.activateParty($(this).attr('data-stream'));
|
|
|
+ return false;
|
|
|
+ });
|
|
|
|
|
|
- window.onbeforeunload = function() {
|
|
|
- if(self.started) {
|
|
|
- return "A call is in progress";
|
|
|
- }
|
|
|
- };
|
|
|
+ window.onbeforeunload = function() {
|
|
|
+ if (self.started) {
|
|
|
+ return "A call is in progress";
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- $(document).on('click', '.client-logout', function() {
|
|
|
+ $(document).on('click', '.client-logout', function() {
|
|
|
|
|
|
- // turn client video off
|
|
|
- $.post('/api/clientVideoVisit/turnClientVideoOff', {}, function(_data) {
|
|
|
+ // turn client video off
|
|
|
+ $.post('/api/clientVideoVisit/turnClientVideoOff', {}, function(_data) {
|
|
|
+ console.log(_data);
|
|
|
+
|
|
|
+ // log out
|
|
|
+ $.get("/api/session/logOut", function(_data) {
|
|
|
console.log(_data);
|
|
|
+ window.location = '/join';
|
|
|
+ })
|
|
|
+ });
|
|
|
|
|
|
- // log out
|
|
|
- $.get("/api/session/logOut", function(_data) {
|
|
|
- console.log(_data);
|
|
|
- window.location = '/join';
|
|
|
- })
|
|
|
- });
|
|
|
+ return false;
|
|
|
+ });
|
|
|
|
|
|
- return false;
|
|
|
+ // start heart beat
|
|
|
+ self.heartbeatTimer = window.setInterval(function() {
|
|
|
+ $.post('/api/clientVideoVisit/registerClientVideoHeartbeat', {}, function(_data) {
|
|
|
+ console.log(_data);
|
|
|
});
|
|
|
+ }, 5000);
|
|
|
|
|
|
- // start heart beat
|
|
|
- self.heartbeatTimer = window.setInterval(function() {
|
|
|
- $.post('/api/clientVideoVisit/registerClientVideoHeartbeat', {}, function(_data) {
|
|
|
- console.log(_data);
|
|
|
- });
|
|
|
- }, 5000);
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
|
|
|
-@endsection
|
|
|
+@endsection
|
Josh