@veyetals/react-veyetals-view
Version:
React component for web version of veyetals utilizing webrtc
1,290 lines (1,263 loc) • 51.5 kB
JavaScript
import React__default, { createElement, useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { nets, detectAllFaces, SsdMobilenetv1Options } from 'face-api.js';
import AWS from 'aws-sdk';
import { Role, SignalingClient } from 'amazon-kinesis-video-streams-webrtc';
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
// A type of promise-like that resolves synchronously and supports only one observer
const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
// Asynchronously call a function and send errors to recovery continuation
function _catch(body, recover) {
try {
var result = body();
} catch(e) {
return recover(e);
}
if (result && result.then) {
return result.then(void 0, recover);
}
return result;
}
var getMasterIdentity = function getMasterIdentity(localView, formValues, region, identityPoolId, roleARN, onStatsReport, onRemoteDataMessage) {
try {
AWS.config = {
region: region,
IdentityPoolId: identityPoolId,
credentials: new AWS.WebIdentityCredentials({
RoleArn: roleARN
})
};
var cognito = new AWS.CognitoIdentity();
var params = {
IdentityPoolId: identityPoolId
};
cognito.getId(params, function (err, data) {
if (err) console.log(err, err.stack);else getMasterCredentials(localView, formValues, onStatsReport, onRemoteDataMessage, cognito, data.IdentityId);
});
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};
var getMasterCredentials = function getMasterCredentials(localView, formValues, onStatsReport, onRemoteDataMessage, cognito, identity) {
try {
var params = {
IdentityId: identity
};
cognito.getOpenIdToken(params, function (err, data) {
if (err) console.log(err, err.stack);else {
AWS.config.credentials.params.WebIdentityToken = data.Token;
startMaster(localView, formValues, onStatsReport, onRemoteDataMessage);
}
});
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};
var startMaster = function startMaster(localView, formValues, onStatsReport, onRemoteDataMessage) {
try {
master.localView = localView;
var kinesisVideoClient = new AWS.KinesisVideo({
endpoint: formValues.endpoint,
correctClockSkew: true
});
return Promise.resolve(kinesisVideoClient.describeSignalingChannel({
ChannelName: formValues.channelName
}).promise()).then(function (describeSignalingChannelResponse) {
var channelARN = describeSignalingChannelResponse.ChannelInfo.ChannelARN;
console.log('[MASTER] Channel ARN: ', channelARN);
return Promise.resolve(kinesisVideoClient.getSignalingChannelEndpoint({
ChannelARN: channelARN,
SingleMasterChannelEndpointConfiguration: {
Protocols: ['WSS', 'HTTPS'],
Role: Role.MASTER
}
}).promise()).then(function (getSignalingChannelEndpointResponse) {
var endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce(function (endpoints, endpoint) {
endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
return endpoints;
}, {});
console.log('[MASTER] Endpoints: ', endpointsByProtocol);
master.signalingClient = new SignalingClient({
channelARN: channelARN,
channelEndpoint: endpointsByProtocol.WSS,
role: Role.MASTER,
region: AWS.config.region,
credentials: AWS.config.credentials,
systemClockOffset: kinesisVideoClient.config.systemClockOffset
});
var kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
region: AWS.config.region,
endpoint: endpointsByProtocol.HTTPS,
correctClockSkew: true
});
return Promise.resolve(kinesisVideoSignalingChannelsClient.getIceServerConfig({
ChannelARN: channelARN
}).promise()).then(function (getIceServerConfigResponse) {
function _temp3() {
master.signalingClient.on('open', function () {
try {
console.log('[MASTER] Connected to signaling service');
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
});
master.signalingClient.on('sdpOffer', function (offer, remoteClientId) {
try {
console.log('[MASTER] Received SDP offer from client: ' + remoteClientId);
var peerConnection = new RTCPeerConnection(configuration);
master.peerConnectionByClientId[remoteClientId] = peerConnection;
if (formValues.openDataChannel) {
master.dataChannelByClientId[remoteClientId] = peerConnection.createDataChannel('kvsDataChannel');
peerConnection.ondatachannel = function (event) {
event.channel.onmessage = onRemoteDataMessage;
};
}
if (!master.peerConnectionStatsInterval) {
master.peerConnectionStatsInterval = setInterval(function () {
return peerConnection.getStats().then(onStatsReport);
}, 1000);
}
peerConnection.addEventListener('icecandidate', function (_ref) {
var candidate = _ref.candidate;
if (candidate) {
console.log('[MASTER] Generated ICE candidate for client: ' + remoteClientId);
if (formValues.useTrickleICE) {
console.log('[MASTER] Sending ICE candidate to client: ' + remoteClientId);
master.signalingClient.sendIceCandidate(candidate, remoteClientId);
}
} else {
console.log('[MASTER] All ICE candidates have been generated for client: ' + remoteClientId);
if (!formValues.useTrickleICE) {
console.log('[MASTER] Sending SDP answer to client: ' + remoteClientId);
master.signalingClient.sendSdpAnswer(peerConnection.localDescription, remoteClientId);
}
}
});
if (master.localStream) {
master.localStream.getTracks().forEach(function (track) {
var sender = peerConnection.addTrack(track, master.localStream);
var params = sender.getParameters();
console.log('sender params', params);
if (!params.encodings) {
params.encodings = [{}];
}
params.encodings[0].maxFramerate = 25;
sender.setParameters(params).then(function (params) {
var p = sender.getParameters();
console.log('Frame rate set successfully', p);
})["catch"](function (error) {
console.error('Error setting frame rate:', error);
});
});
}
return Promise.resolve(peerConnection.setRemoteDescription(offer)).then(function () {
console.log('[MASTER] Creating SDP answer for client: ' + remoteClientId);
var _setLocalDescription = peerConnection.setLocalDescription;
return Promise.resolve(peerConnection.createAnswer({
offerToReceiveAudio: true,
offerToReceiveVideo: true
})).then(function (_peerConnection$creat) {
return Promise.resolve(_setLocalDescription.call(peerConnection, _peerConnection$creat)).then(function () {
if (formValues.useTrickleICE) {
console.log('[MASTER] Sending SDP answer to client: ' + remoteClientId);
master.signalingClient.sendSdpAnswer(peerConnection.localDescription, remoteClientId);
}
console.log('[MASTER] Generating ICE candidates for client: ' + remoteClientId);
});
});
});
} catch (e) {
return Promise.reject(e);
}
});
master.signalingClient.on('iceCandidate', function (candidate, remoteClientId) {
try {
console.log('[MASTER] Received ICE candidate from client: ' + remoteClientId);
try {
var peerConnection = master.peerConnectionByClientId[remoteClientId];
peerConnection.addIceCandidate(candidate);
} catch (e) {
console.log(e);
}
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
});
master.signalingClient.on('close', function () {
console.log('[MASTER] Disconnected from signaling channel');
});
master.signalingClient.on('error', function (err) {
console.error('[MASTER] Signaling client error', err);
});
console.log('[MASTER] Starting master connection');
master.signalingClient.open();
}
var iceServers = [];
if (!formValues.natTraversalDisabled && !formValues.forceTURN) {
iceServers.push({
urls: "stun:stun.kinesisvideo." + formValues.region + ".amazonaws.com:443"
});
}
if (!formValues.natTraversalDisabled) {
getIceServerConfigResponse.IceServerList.forEach(function (iceServer) {
return iceServers.push({
urls: iceServer.Uris,
username: iceServer.Username,
credential: iceServer.Password
});
});
}
console.log('[MASTER] ICE servers: ', iceServers);
var configuration = {
iceServers: iceServers,
iceTransportPolicy: formValues.forceTURN ? 'relay' : 'all'
};
var videoConstraints = {
width: {
min: 1280,
ideal: 1280,
max: 1280
},
height: {
min: 720,
ideal: 720,
max: 720
},
frameRate: {
ideal: 25,
max: 25
}
};
var constraints = {
video: formValues.sendVideo && videoConstraints,
audio: formValues.sendAudio
};
var _temp2 = function () {
if (formValues.sendVideo || formValues.sendAudio) {
var _temp = _catch(function () {
return Promise.resolve(navigator.mediaDevices.getUserMedia(constraints)).then(function (_navigator$mediaDevic) {
master.localStream = _navigator$mediaDevic;
localView.srcObject = master.localStream;
});
}, function () {
console.error('[MASTER] Could not find webcam');
});
if (_temp && _temp.then) return _temp.then(function () {});
}
}();
return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
});
});
});
} catch (e) {
return Promise.reject(e);
}
};
var master = {
signalingClient: null,
peerConnectionByClientId: {},
dataChannelByClientId: {},
localStream: null,
remoteStreams: [],
peerConnectionStatsInterval: null
};
function stopMaster() {
console.log('[MASTER] Stopping master connection');
if (master.signalingClient) {
master.signalingClient.close();
master.signalingClient = null;
}
Object.keys(master.peerConnectionByClientId).forEach(function (clientId) {
master.peerConnectionByClientId[clientId].close();
});
master.peerConnectionByClientId = [];
if (master.localStream) {
master.localStream.getTracks().forEach(function (track) {
return track.stop();
});
master.localStream = null;
}
master.remoteStreams.forEach(function (remoteStream) {
return remoteStream.getTracks().forEach(function (track) {
return track.stop();
});
});
master.remoteStreams = [];
if (master.peerConnectionStatsInterval) {
clearInterval(master.peerConnectionStatsInterval);
master.peerConnectionStatsInterval = null;
}
if (master.localView) {
master.localView.srcObject = null;
}
if (master.dataChannelByClientId) {
master.dataChannelByClientId = {};
}
}
var VEYETALS_API_BASE_URL = "https://xsivky6api.execute-api.ca-central-1.amazonaws.com/prod";
var VEYETALS_API_KEY = 'uS7PH7zdxW68Xc9VrNzvb18AwpstZZAG164B7f7i';
var VEYETALS_API_START_DEEP = '/start-deep-veyetals';
var VEYETALS_API_CREATE_CHANNEL = '/create-channel';
var formValuesMaster = {
region: 'ca-central-1',
channelName: '',
clientId: 'Master',
sendVideo: true,
sendAudio: false,
openDataChannel: true,
widescreen: false,
fullscreen: false,
useTrickleICE: true,
natTraversalDisabled: false,
forceTURN: false,
accessKeyId: '',
endpoint: null,
secretAccessKey: '',
sessionToken: null
};
var CognitoIdentityPoolCA = {
region: 'ca-central-1',
identityPoolId: 'ca-central-1:5de98422-b688-44e3-a28c-fbb427ee550f',
roleArn: 'arn:aws:iam::030590469202:role/Cognito_VeyetalsDoctorCallIdentityPoolUnauth_Role'
};
function formattedDate() {
var now = new Date();
var year = now.getFullYear();
var month = String(now.getMonth() + 1).padStart(2, '0');
var day = String(now.getDate()).padStart(2, '0');
var hours = String(now.getHours()).padStart(2, '0');
var minutes = String(now.getMinutes()).padStart(2, '0');
var seconds = String(now.getSeconds()).padStart(2, '0');
return year + "-" + month + "-" + day + "-" + hours + "-" + minutes + "-" + seconds;
}
function VeyetalsCard(_ref) {
var vital = _ref.vital,
value = _ref.value,
unit = _ref.unit,
icon = _ref.icon,
color = _ref.color;
return /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-card"
}, /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-card__container"
}, icon, /*#__PURE__*/React__default.createElement("p", {
className: "veyetals-card__title",
style: {
color: "" + color
}
}, vital)), /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-card__reading"
}, /*#__PURE__*/React__default.createElement("p", {
className: "veyetals-card__value"
}, value), !isNaN(value) && /*#__PURE__*/React__default.createElement("p", {
className: "veyetals-card__unit"
}, unit)));
}
function ProgressBar(_ref) {
var progress = _ref.progress;
return /*#__PURE__*/React__default.createElement("div", {
className: "progress-bar" + (progress > 0 ? '' : ' progress-bar--hidden')
}, /*#__PURE__*/React__default.createElement("span", {
className: "progress-bar__label"
}, progress + "%"), /*#__PURE__*/React__default.createElement("div", {
style: {
width: progress + "%"
},
className: "progress-bar__filler"
}));
}
function mapStressLevel(val) {
switch (val) {
case -1:
return 'Relaxed';
case 0:
return 'Normal';
case 1:
return 'Low';
case 2:
return 'Medium';
case 3:
return 'High';
case 4:
return 'Very High';
case 5:
return 'Extremely High';
default:
return '!';
}
}
var _path, _path2;
function _extends$1() {
_extends$1 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$1.apply(this, arguments);
}
function SvgPulse(props) {
return /*#__PURE__*/createElement("svg", _extends$1({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 19"
}, props), _path || (_path = /*#__PURE__*/createElement("path", {
d: "M22.414 1.668C21.32.578 19.676 0 17.664 0A6.351 6.351 0 0012 3.438 6.351 6.351 0 006.336 0C4.41 0 2.734.617 1.617 1.734.527 2.824-.027 4.371.012 6.211c.023 1.043.277 2.094.765 3.144H4.91l1.5-4.418a.664.664 0 01.63-.44c.284 0 .538.179.628.44l2.68 7.88L11.37 9.8A.662.662 0 0112 9.355h11.21c.474-1.003.759-2.058.778-3.148.032-1.937-.496-3.465-1.574-4.539zm0 0"
})), _path2 || (_path2 = /*#__PURE__*/createElement("path", {
d: "M10.973 15.07a.654.654 0 01-.625.442.659.659 0 01-.63-.442L7.04 7.195l-1.027 3.016a.663.663 0 01-.625.441h-3.89c.995 1.555 2.491 3.114 4.483 4.668 2.836 2.211 5.61 3.559 5.727 3.614a.698.698 0 00.59 0c.363-.18 7.117-3.528 10.191-8.282H12.477zm0 0"
})));
}
var _path$1;
function _extends$2() {
_extends$2 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$2.apply(this, arguments);
}
function SvgPulseLine(props) {
return /*#__PURE__*/createElement("svg", _extends$2({
xmlns: "http://www.w3.org/2000/svg",
width: 38,
height: 24
}, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
d: "M13.938 23.996c-.66 0-1.235-.297-1.368-.953l-1.855-8.973-1.223 2.13c-.25.433-.707.738-1.203.738H1.535c-.77 0-1.394-.633-1.394-1.41 0-.782.625-1.415 1.394-1.415h5.957l2.656-4.535c.293-.5.856-.773 1.43-.676.57.098 1.024.536 1.14 1.106l1.122 5.484 2.562-14.355a1.378 1.378 0 011.375-1.14h.004c.68 0 1.258.476 1.371 1.151l2.735 16.114.879-2.25a1.392 1.392 0 011.297-.903H36.46c.77 0 1.394.633 1.394 1.414 0 .778-.625 1.415-1.394 1.415H25.01l-2.363 6.035c-.23.59-.812.945-1.445.886a1.405 1.405 0 01-1.23-1.168l-2.23-13.164-2.43 13.477c-.122.664-.688.988-1.356.988a.035.035 0 01-.02.004zm0 0"
})));
}
var _path$2, _path2$1;
function _extends$3() {
_extends$3 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$3.apply(this, arguments);
}
function SvgOxygen(props) {
return /*#__PURE__*/createElement("svg", _extends$3({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24
}, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
d: "M11.996.004c-6.617 0-12 5.383-12 12s5.383 12 12 12S24 18.62 24 12.004s-5.387-12-12.004-12zm0 21.844c-5.43 0-9.844-4.414-9.844-9.848 0-5.426 4.414-9.844 9.844-9.844S21.844 6.574 21.844 12c0 5.434-4.418 9.848-9.848 9.848zm0 0"
})), _path2$1 || (_path2$1 = /*#__PURE__*/createElement("path", {
d: "M8.543 6.93c-1.504 0-2.676.422-3.516 1.261-.84.84-1.261 2.016-1.261 3.528 0 1.078.21 1.98.636 2.699.426.719.98 1.242 1.664 1.578.684.328 1.547.496 2.59.496 1.028 0 1.883-.191 2.57-.578a3.9 3.9 0 001.579-1.613c.363-.692.547-1.578.547-2.66 0-1.489-.418-2.649-1.25-3.473-.832-.828-2.02-1.238-3.559-1.238zm1.445 6.824c-.34.402-.812.601-1.425.601-.598 0-1.07-.203-1.418-.613-.348-.41-.52-1.078-.52-2.012 0-.94.176-1.617.523-2.023.352-.41.813-.617 1.391-.617.598 0 1.074.203 1.43.605.347.403.527 1.035.527 1.907-.004 1.035-.172 1.753-.508 2.152zm0 0M16.496 14.652c.117-.093.344-.297.688-.535.578-.406.976-.797 1.195-1.137.215-.34.324-.707.324-1.078a1.679 1.679 0 00-1.066-1.582c-.336-.136-.801-.207-1.399-.207-.574 0-1.023.07-1.347.215-.325.14-.579.348-.754.617-.176.266-.297.64-.367 1.121l1.707.137c.046-.344.136-.586.277-.723a.715.715 0 01.531-.203.71.71 0 01.52.196c.14.132.207.293.207.48 0 .172-.07.356-.207.547-.14.191-.461.469-.957.84-.817.605-1.371 1.055-1.668 1.496-.297.445-.473 1.344-.532 1.344h4.657v-1.078h-2.211c.152.003.289-.356.402-.45zm0 0"
})));
}
var _path$3;
function _extends$4() {
_extends$4 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$4.apply(this, arguments);
}
function SvgLungs(props) {
return /*#__PURE__*/createElement("svg", _extends$4({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 18"
}, props), _path$3 || (_path$3 = /*#__PURE__*/createElement("path", {
d: "M15.242 4.04a.834.834 0 00-.844.823v3.79l3.04 2.257 1.417-1.055a.855.855 0 011.18.16.822.822 0 01-.164 1.16l-1.039.77 1.04.774c.886.66-.13 1.976-1.017 1.316l-4.457-3.308v5.605c0 .918.762 1.668 1.7 1.668h6.191c.938 0 1.703-.75 1.703-1.668v-3.7c0-4.737-3.926-8.593-8.75-8.593zm0 0M4.129 12.719l1.039-.774-1.04-.77a.822.822 0 01-.163-1.16.855.855 0 011.18-.16l1.418 1.055 3.039-2.258V4.863a.834.834 0 00-.844-.824c-4.824 0-8.75 3.856-8.75 8.594v3.699C.008 17.25.773 18 1.71 18h6.191c.938 0 1.7-.75 1.7-1.668v-5.605l-4.457 3.308c-.887.66-1.903-.656-1.016-1.316zm0 0M12.84.824A.833.833 0 0012 0a.833.833 0 00-.84.824v6.672L9.602 8.652v2.075L12 8.94l2.398 1.786V8.652L12.84 7.496zm0 0"
})));
}
var _path$4;
function _extends$5() {
_extends$5 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$5.apply(this, arguments);
}
function SvgBloodBank(props) {
return /*#__PURE__*/createElement("svg", _extends$5({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 32"
}, props), _path$4 || (_path$4 = /*#__PURE__*/createElement("path", {
d: "M21.867 13.602L12 0 2.133 13.602A11.665 11.665 0 000 20.266C0 26.668 5.332 32 12 32s12-5.332 12-11.734c0-2.399-.8-4.801-2.133-6.664zm-3.199 7.73h-5.336v5.336h-2.664v-5.336H5.332v-2.664h5.336v-5.336h2.664v5.336h5.336zm0 0"
})));
}
var _path$5;
function _extends$6() {
_extends$6 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$6.apply(this, arguments);
}
function SvgSmileFace(props) {
return /*#__PURE__*/createElement("svg", _extends$6({
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24
}, props), _path$5 || (_path$5 = /*#__PURE__*/createElement("path", {
d: "M12 0C5.375 0 0 5.371 0 12s5.375 12 12 12c6.629 0 12-5.371 12-12S18.629 0 12 0zm4.43 8.004a1.719 1.719 0 110 3.437 1.719 1.719 0 010-3.437zm-8.86 0a1.719 1.719 0 110 3.437 1.719 1.719 0 010-3.437zm10.907 8.168A7.88 7.88 0 0112 19.582a7.869 7.869 0 01-6.477-3.41 1.05 1.05 0 01.274-1.461 1.046 1.046 0 011.46.27 5.758 5.758 0 009.488 0c.33-.477.982-.598 1.462-.27.477.328.598.984.27 1.46zm0 0"
})));
}
function VeyetalsCards(_ref) {
var result = _ref.result,
progress = _ref.progress;
var hr = result.hr,
hrv = result.hrv,
o2 = result.o2,
resp = result.resp,
systolic = result.systolic,
diastolic = result.diastolic,
stress = result.stress;
var getProgressSymbol = function getProgressSymbol() {
return progress === 100 ? '!' : '-';
};
var validateVital = function validateVital(vital, lowerConstraint) {
return result !== null && result !== void 0 && result.isValidHeartRate ? vital !== undefined && vital > lowerConstraint ? vital : '-' : getProgressSymbol();
};
var validBP = function validBP(systolic, diastolic) {
return result !== null && result !== void 0 && result.isValidBloodPressure ? systolic !== undefined && systolic > -1 && diastolic !== undefined && diastolic > -1 ? systolic + "/" + diastolic : '-' : getProgressSymbol();
};
var validStress = function validStress(stress) {
return result !== null && result !== void 0 && result.isValidHeartRate ? mapStressLevel(stress) : getProgressSymbol();
};
return /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-cards"
}, /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-cards__container"
}, /*#__PURE__*/React__default.createElement(ProgressBar, {
progress: progress
}), /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-cards__card-container"
}, /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-cards__box"
}, /*#__PURE__*/React__default.createElement(VeyetalsCard, {
vital: 'Heart Rate',
value: validateVital(hr, -1),
unit: 'bpm',
icon: /*#__PURE__*/React__default.createElement(SvgPulse, {
className: "veyetals-card__icon veyetals-card__icon--hr"
}),
color: '#ff235b'
}), /*#__PURE__*/React__default.createElement(VeyetalsCard, {
vital: 'Heart Rate Variability',
value: validateVital(hrv, -1),
unit: 'ms',
icon: /*#__PURE__*/React__default.createElement(SvgPulseLine, {
className: "veyetals-card__icon veyetals-card__icon--hrv"
}),
color: '#eb3f4a'
}), /*#__PURE__*/React__default.createElement(VeyetalsCard, {
vital: 'Blood Pressure',
value: validBP(systolic, diastolic),
unit: '',
icon: /*#__PURE__*/React__default.createElement(SvgBloodBank, {
className: "veyetals-card__icon veyetals-card__icon--bp"
}),
color: '#d64643'
})), /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-cards__box"
}, /*#__PURE__*/React__default.createElement(VeyetalsCard, {
vital: 'Oxygen Saturation',
value: validateVital(o2, -1),
unit: '%',
icon: /*#__PURE__*/React__default.createElement(SvgOxygen, {
className: "veyetals-card__icon veyetals-card__icon--o2Sat"
}),
color: '#10237c'
}), /*#__PURE__*/React__default.createElement(VeyetalsCard, {
vital: 'Respiration Rate',
value: validateVital(resp, -1),
unit: 'BPM',
icon: /*#__PURE__*/React__default.createElement(SvgLungs, {
className: "veyetals-card__icon veyetals-card__icon--respRate"
}),
color: '#ff9c8a'
}), /*#__PURE__*/React__default.createElement(VeyetalsCard, {
vital: 'Stress',
value: validStress(stress),
unit: '',
icon: /*#__PURE__*/React__default.createElement(SvgSmileFace, {
className: "veyetals-card__icon veyetals-card__icon--stress"
}),
color: '#40c035'
})))));
}
var Button = function Button(_ref) {
var color = _ref.color,
text = _ref.text,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
onClick = _ref.onClick;
return /*#__PURE__*/React__default.createElement("button", {
style: {
backgroundColor: color
},
className: "veyetals-button veyetals-button--" + color,
onClick: onClick,
disabled: disabled
}, /*#__PURE__*/React__default.createElement("span", {
className: "veyetals-button__text"
}, text));
};
function VideoControls(_ref) {
var showButtons = _ref.showButtons,
showVeyetalsButton = _ref.showVeyetalsButton,
startVeyetals = _ref.startVeyetals,
isFirstScan = _ref.isFirstScan,
showRetry = _ref.showRetry;
return /*#__PURE__*/React__default.createElement("div", {
className: "video-controls"
}, showButtons && /*#__PURE__*/React__default.createElement("div", {
className: "video-controls__container"
}, isFirstScan ? /*#__PURE__*/React__default.createElement(Button, {
color: "primary",
onClick: startVeyetals,
disabled: !showVeyetalsButton,
text: "Start Scan"
}) : showRetry && /*#__PURE__*/React__default.createElement(Button, {
color: "secondary",
onClick: startVeyetals,
text: "Retry"
})));
}
function FaceTracker(_ref) {
var color = _ref.color,
top = _ref.top,
right = _ref.right,
width = _ref.width,
height = _ref.height,
showTimer = _ref.showTimer,
count = _ref.count;
return /*#__PURE__*/React__default.createElement("div", {
className: "tracker-box",
style: {
top: top,
right: right,
width: width,
height: height,
backgroundImage: "linear-gradient(to right, " + color + " 4px, transparent 4px),\n linear-gradient(to right, " + color + " 4px, transparent 4px),\n linear-gradient(to left, " + color + " 4px, transparent 4px),\n linear-gradient(to left, " + color + " 4px, transparent 4px),\n linear-gradient(" + color + " 4px, transparent 4px),\n linear-gradient(" + color + " 4px, transparent 4px),\n linear-gradient(to top, " + color + " 4px, transparent 4px),\n linear-gradient(to top, " + color + " 4px, transparent 4px)"
}
}, showTimer ? /*#__PURE__*/React__default.createElement("span", {
className: "timer-box"
}, count) : null);
}
var _path$6;
function _extends$7() {
_extends$7 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$7.apply(this, arguments);
}
function SvgDone(props) {
return /*#__PURE__*/createElement("svg", _extends$7({
width: 24,
height: 24,
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, props), _path$6 || (_path$6 = /*#__PURE__*/createElement("path", {
clipRule: "evenodd",
d: "M21.229 6.604a1 1 0 010 1.414L10.256 18.99a1 1 0 01-1.408.006l-6.185-6.075a1 1 0 01-.013-1.414l.7-.714a1 1 0 011.415-.013l4.771 4.687 9.571-9.572a1 1 0 011.415 0l.707.708z"
})));
}
var _path$7;
function _extends$8() {
_extends$8 = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$8.apply(this, arguments);
}
function SvgClose(props) {
return /*#__PURE__*/createElement("svg", _extends$8({
width: 24,
height: 24,
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, props), _path$7 || (_path$7 = /*#__PURE__*/createElement("path", {
d: "M18 18l-6-6m0 0L6 6m6 6l6-6m-6 6l-6 6"
})));
}
function Message(_ref) {
var errorMessage = _ref.errorMessage,
type = _ref.type,
showMessage = _ref.showMessage,
setShowMessage = _ref.setShowMessage;
var _useState = useState(''),
message = _useState[0],
setMessage = _useState[1];
var _useState2 = useState( /*#__PURE__*/React__default.createElement("div", null)),
icon = _useState2[0],
setIcon = _useState2[1];
useEffect(function () {
messageType(type);
}, [type, errorMessage]);
var messageType = function messageType(type) {
var showMesg = true;
var message = '';
var icon = /*#__PURE__*/React__default.createElement("div", null);
switch (type) {
case 'loading':
{
message = 'Loading...';
icon = /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-loader"
});
break;
}
case 'doneLoading':
{
message = 'Loading...';
icon = /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-loader"
});
setTimeout(function () {
return setShowMessage(false);
}, 2000);
break;
}
case 'start':
{
message = 'Scan Starting...';
icon = /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-loader"
});
break;
}
case 'scanning':
{
message = 'Scanning, please wait...';
icon = /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-loader"
});
break;
}
case 'complete':
{
message = 'Scan Completed!';
icon = /*#__PURE__*/React__default.createElement(SvgDone, {
className: "veyetals-view-message__icon--done"
});
break;
}
case 'loadingFaceTracking':
{
message = 'Loading face tracking, please wait before starting scan';
icon = /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-loader"
});
break;
}
case 'doneLoadingFaceTracking':
{
message = 'Loading face tracking, please wait before starting scan';
icon = /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-loader"
});
setTimeout(function () {
return setShowMessage(false);
}, 3000);
break;
}
case 'error':
{
message = errorMessage;
icon = /*#__PURE__*/React__default.createElement(SvgClose, {
className: "veyetals-view-message__icon--close"
});
break;
}
default:
{
message = '';
icon = /*#__PURE__*/React__default.createElement("div", null);
showMesg = false;
break;
}
}
setShowMessage(showMesg);
setMessage(message);
setIcon(icon);
};
return /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-message"
}, showMessage && /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view-message__container"
}, icon, /*#__PURE__*/React__default.createElement("p", {
className: "veyetals-view-message__text"
}, message)));
}
function Modal(_ref) {
var children = _ref.children,
isOpen = _ref.isOpen;
if (!isOpen) return null;
return /*#__PURE__*/React__default.createElement("div", {
className: "modal-overlay"
}, /*#__PURE__*/React__default.createElement("div", {
className: "modal-content"
}, children));
}
function VeyetalsView(_ref) {
var _localVideoRef$curren;
var userId = _ref.userId,
channelId = _ref.channelId,
_ref$onComplete = _ref.onComplete,
onComplete = _ref$onComplete === void 0 ? function (results) {} : _ref$onComplete,
_ref$showUI = _ref.showUI,
showUI = _ref$showUI === void 0 ? true : _ref$showUI,
_ref$modelPath = _ref.modelPath,
modelPath = _ref$modelPath === void 0 ? process.env.PUBLIC_URL + '/models' : _ref$modelPath;
var instance = axios.create({
baseURL: VEYETALS_API_BASE_URL,
headers: {
post: {
'x-api-key': VEYETALS_API_KEY
}
}
});
var channelName = userId + "-" + channelId;
var localVideoRef = useRef();
var _React$useState = React__default.useState(false),
isModelLoaded = _React$useState[0],
setIsModelLoaded = _React$useState[1];
var _useState = useState(false),
showButtons = _useState[0],
setShowButtons = _useState[1];
var _useState2 = useState(true),
isFirstScan = _useState2[0],
setIsFirsatScan = _useState2[1];
var _useState3 = useState(0),
progress = _useState3[0],
setProgress = _useState3[1];
var _useState4 = useState(''),
errorMessage = _useState4[0],
setErrorMessage = _useState4[1];
var _useState5 = useState(''),
messageType = _useState5[0],
setMessageType = _useState5[1];
var _useState6 = useState(true),
showMessage = _useState6[0],
setShowMessage = _useState6[1];
var _useState7 = useState(10),
timer = _useState7[0],
setTimer = _useState7[1];
var _useState8 = useState(false),
showTimer = _useState8[0],
setShowTimer = _useState8[1];
var _useState9 = useState(false),
showVeyetalsButton = _useState9[0],
setShowVeyetalsButton = _useState9[1];
var _useState10 = useState(true),
showRetry = _useState10[0],
setShowRetry = _useState10[1];
var _useState11 = useState({
hr: -1,
hrv: -1,
o2: -1,
systolic: -1,
diastolic: -1,
stress: -2,
glucose: -1,
isValidHeartRate: false,
isValidBloodPressure: false,
snr: -1,
gender: '',
age_low: 0,
age_high: 0,
emotion: ''
}),
veyetalsResults = _useState11[0],
setveyetalsResults = _useState11[1];
var _useState12 = useState({
right: 0,
top: 0,
width: '0px',
height: '0px',
previewColor: '#19be87'
}),
facePosition = _useState12[0],
setFacePosition = _useState12[1];
var _useState13 = useState(false),
openModal = _useState13[0],
setOpenModal = _useState13[1];
var handleOpenModal = function handleOpenModal() {
return setOpenModal(true);
};
var handleCloseModal = function handleCloseModal() {
return setOpenModal(false);
};
useEffect(function () {
setShowButtons(true);
setIsFirsatScan(true);
startMasterUserVideo();
setShowVeyetalsButton(false);
setShowRetry(true);
loadModels();
}, []);
useEffect(function () {
if (progress === 100) {
handleOpenModal();
}
}, [progress]);
var onStatsReport = function onStatsReport(report) {};
useEffect(function () {
localVideoRef.current.onloadedmetadata = function () {
var videoWidth = localVideoRef.current.videoWidth;
var videoHeight = localVideoRef.current.videoHeight;
console.log('Video width: ', videoWidth);
console.log('Video height: ', videoHeight);
var videoTrack = localVideoRef.current.srcObject.getVideoTracks()[0];
var frameRate = videoTrack.getSettings().frameRate;
console.log('Frame rate: ', frameRate);
};
}, [localVideoRef === null || localVideoRef === void 0 ? void 0 : (_localVideoRef$curren = localVideoRef.current) === null || _localVideoRef$curren === void 0 ? void 0 : _localVideoRef$curren.srcObject]);
var resetVeyetals = function resetVeyetals() {
setveyetalsResults({
hr: -1,
hrv: -1,
o2: -1,
resp: -1,
systolic: -1,
diastolic: -1,
stress: -2,
glucose: -1,
isValidHeartRate: false,
isValidBloodPressure: false,
snr: -1,
gender: '',
ageLow: 0,
ageHigh: 0,
emotion: ''
});
window.sessionStorage.setItem('isVeyetalsStarted', false);
handleCloseModal();
setShowRetry(true);
setProgress(0);
};
var updateVeyetals = function updateVeyetals(vitals, statusCode) {
return {
hr: Math.round(vitals.HR),
hrv: Math.round(vitals.HRV),
o2: Math.round(vitals.SpO2),
resp: Math.round(vitals.RR),
systolic: Math.round(vitals.systolic),
diastolic: Math.round(vitals.diastolic),
stress: Math.round(vitals.stress),
glucose: Math.round(vitals.glucose),
isValidHeartRate: true,
isValidBloodPressure: true,
snr: vitals.snr,
gender: vitals.gender,
ageLow: vitals.age_low,
ageHigh: vitals.age_high,
emotion: vitals.emotion
};
};
var loadModels = function loadModels() {
try {
console.log("Model URL: " + modelPath);
Promise.all([nets.ssdMobilenetv1.loadFromUri(modelPath)]).then(setIsModelLoaded(true));
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};
var updateFaceTracker = function updateFaceTracker(detections, videoRef) {
var _videoRef$current, _videoRef$current2, _videoRef$current3, _videoRef$current4;
if (!videoRef) return;
if (detections.length === 0 || detections.length > 1) {
var _errorMessage = detections.length === 0 ? 'No face detected' : 'Too many users';
window.sessionStorage.setItem('isErrorState', true);
window.sessionStorage.setItem('errorMessage', _errorMessage);
return;
} else {
window.sessionStorage.setItem('isErrorState', false);
}
var clientWidth = (videoRef === null || videoRef === void 0 ? void 0 : (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.clientWidth) || 1;
var clientHeight = (videoRef === null || videoRef === void 0 ? void 0 : (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.clientHeight) || 1;
var videoWidth = (videoRef === null || videoRef === void 0 ? void 0 : (_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 ? void 0 : _videoRef$current3.videoWidth) || 1;
var videoHeight = (videoRef === null || videoRef === void 0 ? void 0 : (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.videoHeight) || 1;
var box = detections[0].box;
var _ref2 = [box.x, box.y, box.width, box.height],
x = _ref2[0],
y = _ref2[1],
width = _ref2[2],
height = _ref2[3];
var widthFactor = clientWidth / videoWidth;
var heightFactor = clientHeight / videoHeight;
var _ref3 = [x * widthFactor, y * heightFactor, width * widthFactor, height * heightFactor];
x = _ref3[0];
y = _ref3[1];
width = _ref3[2];
height = _ref3[3];
var faceArea = width * height;
var screenArea = clientWidth > clientHeight ? clientHeight * clientHeight : clientWidth * clientWidth;
setFacePosition({
right: Math.ceil(x),
top: Math.ceil(y),
width: Math.ceil(width) + "px",
height: Math.ceil(height) + "px",
previewColor: faceArea >= 0.15 * screenArea ? '#19be87' : '#ff0000'
});
if (faceArea < 0.15 * screenArea) {
window.sessionStorage.setItem('isErrorState', true);
window.sessionStorage.setItem('errorMessage', 'User is too far');
} else {
window.sessionStorage.setItem('isErrorState', false);
}
};
var onMasterDataMessage = function onMasterDataMessage(event) {
try {
var isErrorState = JSON.parse(window.sessionStorage.getItem('isErrorState'));
console.log("Remote Message: " + event.data + ", Error State: " + isErrorState);
if (event.data) {
try {
var json = JSON.parse(event.data);
if (json.status === 'success') {
if (json.statusCode === 1 || json.statusCode === 2) {
setMessageType('scanning');
setveyetalsResults(updateVeyetals(json.responseData.vitals, json.statusCode));
setProgress(function (prev) {
return json.responseData.vitals.progress > prev ? json.responseData.vitals.progress : prev;
});
}
if (json.statusCode === 2) {
setMessageType('complete');
setShowButtons(true);
window.sessionStorage.setItem('isVeyetalsStarted', false);
var results = updateVeyetals(json.responseData.vitals, json.statusCode);
results.isValidHeartRate = validateHeartRate(results.hr);
results.isValidBloodPressure = validateBP(results.systolic, results.diastolic);
setShowRetry(false);
setveyetalsResults(results);
setProgress(100);
}
} else {
var error = json.message !== undefined ? json.message : 'An unknown error occurred. Please try again';
showError(error);
}
} catch (err) {
console.log("Failed to parse server message " + err);
}
}
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};
var createChannel = function createChannel(channelName) {
try {
var _temp = _catch(function () {
return Promise.resolve(instance.post(VEYETALS_API_CREATE_CHANNEL, {
channelName: channelName
})).then(function (response) {
console.log(response);
});
}, function (error) {
console.log(error);
});
return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
} catch (e) {
return Promise.reject(e);
}
};
var startMasterUserVideo = function startMasterUserVideo() {
setMessageType('loading');
resetVeyetals();
var cognitoIdentityPool = CognitoIdentityPoolCA;
createChannel(channelName).then(function () {
getMasterIdentity(localVideoRef.current, _extends({}, formValuesMaster, {
channelName: channelName
}), cognitoIdentityPool.region, cognitoIdentityPool.identityPoolId, cognitoIdentityPool.roleArn, onStatsReport, onMasterDataMessage)["catch"](function (err) {
console.log(err);
});
});
};
var startVeyetals = function startVeyetals() {
try {
resetVeyetals();
setMessageType('start');
setTimer(10);
setShowTimer(false);
window.sessionStorage.setItem('isVeyetalsStarted', true);
var _temp2 = _catch(function () {
return Promise.resolve(instance.post(VEYETALS_API_START_DEEP, {
userId: userId,
channelId: channelId,
channelName: channelName,
recordId: channelName + "-" + formattedDate()
})).then(function (response) {
window.sessionStorage.setItem('taskARN', response.data.responseData.taskARN);
console.log(response);
});
}, function (error) {
console.log(error);
});
return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
} catch (e) {
return Promise.reject(e);
}
};
var startTimer = function startTimer(seconds, onTimerComplete) {
return new Promise(function (resolve) {
var interval = setInterval(function () {
setTimer(function (prevTime) {
return prevTime - 1;
});
}, 1000);
setTimeout(function () {
clearInterval(interval);
onTimerComplete();
resolve();
}, seconds * 1000);
});
};
var handleStartVeyetals = function handleStartVeyetals() {
setShowMessage(false);
var isErrorState = JSON.parse(window.sessionStorage.getItem('isErrorState'));
if (!isErrorState) {
if (isFirstScan) setIsFirsatScan(false);
setShowTimer(true);
setShowButtons(false);
startTimer(10, startVeyetals);
} else {
showError(window.sessionStorage.getItem('errorMessage'));
setShowMessage(true);
}
};
var validateHeartRate = function validateHeartRate(hr) {
return hr > 0 && hr < 480;
};
var validateBP = function validateBP(sys, dia) {
return sys > 40 && sys < 250 && dia > 30 && dia < 150;
};
var handleVideoOnPlay = function handleVideoOnPlay() {
try {
setMessageType('loadingFaceTracking');
if (!isModelLoaded) {
console.log('Model is not loaded');
return Promise.resolve();
}
return Promise.resolve(detectAllFaces(localVideoRef.current, new SsdMobilenetv1Options())).then(function (detections) {
if (detections) {
setMessageType('doneLoadingFaceTracking');
setShowVeyetalsButton(true);
}
var refreshId = setInterval(function () {
try {
if (!localVideoRef.current) {
clearInterval(refreshId);
}
var _temp3 = function () {
if (localVideoRef.current) {
return Promise.resolve(detectAllFaces(localVideoRef.current, new SsdMobilenetv1Options())).then(function (_faceapi$detectAllFac) {
detections = _faceapi$detectAllFac;
updateFaceTracker(detections, localVideoRef);
});
}
}();
return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
} catch (e) {
return Promise.reject(e);
}
}, 300);
});
} catch (e) {
return Promise.reject(e);
}
};
var handleOnComplete = function handleOnComplete() {
stopMaster();
handleCloseModal();
onComplete(veyetalsResults);
};
var showError = function showError(error) {
setMessageType('error');
setErrorMessage(error);
setShowButtons(true);
};
var renderCards = function renderCards() {
return showUI ? /*#__PURE__*/React__default.createElement(VeyetalsCards, {
result: veyetalsResults,
progress: progress
}) : /*#__PURE__*/React__default.createElement(ProgressBar, {
progress: progress
});
};
return /*#__PURE__*/React__default.createElement("div", {
className: "veyetals-view"
}, /*#__PURE__*/React__default.createElement(Modal, {
isOpen: openModal
}, /*#__PURE__*/React__default.createElement("div", {
c