Microphone Access

We need to be able to use JavaScript to turn the microphone on and off. Once the user has given us permission to use the microphone, it should remember and not request permission again every time the app is started.

Mic On - Start Listening

Mic Off - Stop Listening

This code is working on iPhone when called from App but not when gone to directly in Chrome browser. In iPhone App the Speech to Text is quite good.

On Android it cuts the microphone off before done speaking so the code definitely needs to be changed. Use whatever Speech to Text works best - probably needs to access native phone features.

---

Speakers Access

We use Google Text to Speech which creates MP3 files which we save on the server then the JS plays that MP3.

Use this page to verify the volume does not change after the microphone is used. Currently the JS below does not use native calls but can be changed to do so if necessary.

Start MP3

This will start by playing a ringing MP3, then it will play a greeting MP3. After that each time you click the "Play Next" button it will play the next MP3 in the list.

Play Next

Pause Audio

---

Dialing Access

The current app does not need this feature but I would like to have it prototyped for future applications. Make this work and document how to add the permission request in Android Studio or remove the permission request when not needed. See wtkDialPhone in JavaScript code below.

Call (209)555-1212

---

Camera Access

We need native access to camera. This should allow user to either pick from their photo album or take a photo. The HTML and JS code in this page is what we used in prior iOS Xcode apps.

Camera

This is the most complicated because it requires five steps:

1. HTML page has button which calls takePhoto JavaScript function
2. JavaScript function calls Android passing 2 parameters
3. Android natively allows picking or taking of photo then posts it with requested 2 parameters to PHP page on web server
4. PHP page receives file, renames it, saves it on server, updates SQL database, and returns file name and path to Android via JSON
5. Android then calls original web page sending the path and file name so it can be displayed

You only have to do steps 2, 3 and 5.

The takePhoto JS function below has two parameters. The first is a SQL table name and the second is the UID of the associated table row.

// JavaScript function
function takePhoto(fncTable, fncId) {
	wtkDebugLog('takePhoto ' + pgAccessedBy + ': ' + fncTable + '; id = ' + fncId);
	$('#photoProgressDIV').removeClass('hide');
	switch(pgAccessedBy){
		case 'ios':
			window.ReactNativeWebView.postMessage('photo-' + fncTable + '-' + fncId);
			break;
		case 'android':
			wtkDebugLog('takePhoto: code needs to be added here');
// the code should be similar to the iOS code and send to Android 'photo-' + fncTable + '-' + fncId
			break;
		case 'browser':
			// not applicable because PHP will generate HTML file upload instead of takePhoto JS call
			break;
	} // switch
} // takePhoto

The PHP page that receives the posted file expects to receive it in the following manner so our code will work regardless whether called from iPhones or Android phones. If something needs to be changed for Android, let me know. Note: the PHP code is all written and working. If you want to work on this project PM me and I’ll send you the name and location of this file so you can test uploading to it.

<?php
$pgPostData = file_get_contents("php://input");
$pgJSON = json_decode($pgPostData, true);

$pgApiKey = $pgJSON['wtkApiKey'];	// pass value of 'prototypeWTKApiKey' for validation
$pgTable = $pgJSON['table'];		// fncTable value passed to takePhoto JS function
$pgId = $pgJSON['id'];			// fncId value passed to takePhoto JS function
$pgFileName = $pgJSON['fileName'];	// name of image file you are uploading
$pgFile  = $pgJSON['fileData'];		// base64 version of image file being uploaded

// ... validate API Key or lock out; $pgJSON['wtkApiKey'] better equal 'prototypeWTKApiKey'
// ... if valid save file to server and SQL database ...

$pgPath = '/image/test/';	// path will be based on table name and other logic

$pgFileName = wtkReplace($pgFileName, "'", '');
$pgFileName = wtkReplace($pgFileName, ' ', '');
$pgFileExt  = pathinfo($pgFileName, PATHINFO_EXTENSION);

$pgFileArray = explode(',', $pgFile);
$pgFixedFile = $pgFileArray[1]; // gets rid of data:image/jpeg;base64,

$pgNewFileName = wtkGenerateFileName($pgTable, $pgFileExt); // returns something like 'user4770.png'
$pgUploadFile = '..' . $pgPath . $pgNewFileName;
$pgUploadFile = wtkReplace($pgUploadFile, '....', '../..');

$fp = fopen($pgUploadFile, 'w');
fwrite($fp, base64_decode($pgFixedFile) );
fclose($fp);

$pgJSON = '{"result":"success","path":"' . $pgPath . '","fileName":"' . $pgNewFileName . '"}';

echo $pgJSON;
exit;
?>

We have some "receiver" code written which works for iPhones. Modify as needed to make it work for Android.

// JavaScript code
// BEGIN Receiver to listen for Android sending of photo upload confirmation
const isUIWebView = () => {
    return navigator.userAgent.toLowerCase().match(/\(.*applewebkit(?!.*(version|crios))/)
};

const receiver = isUIWebView() ? window : document;

receiver.addEventListener('message', data => {
    receiveMessage(data);
});
//  END  Receiver to listen for Android sending of photo upload confirmation

Below that in the JavaScript of this page are also the receiveMessage and handleMessage functions but I expect those will not need to be changed.

Debug Log