implement serviceaccount

Author: thegamerhat

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+.DS_Store
+
+# Ignore the output video from Git but not videos you import into src/.
+out
+.env
+
+# GCP credentials
+serviceaccount.json

.env.example

@@ -1,12 +1,16 @@
 SERVER_PORT=5050
 
-GOOGLE_CLOUD_PRIVATE_KEY=
-GOOGLE_CLOUD_CLIENT_EMAIL=
-GOOGLE_CLOUD_CLIENT_ID=
-
 FIREBASE_API_KEY=
 FIREBASE_AUTH_DOMAIN=
 FIREBASE_PROJECT_ID=
 FIREBASE_STORAGE_BUCKET=
 FIREBASE_MESSAGING_SENDER_ID=
 FIREBASE_APP_ID=
+
+GOOGLE_APPLICATION_CREDENTIALS="serviceaccount.json"
+
+# NOT REQUIRED IF YOU HAVE `GOOGLE_APPLICATION_CREDENTIALS`
+#
+# GOOGLE_CLOUD_PRIVATE_KEY=
+# GOOGLE_CLOUD_CLIENT_EMAIL=
+# GOOGLE_CLOUD_CLIENT_ID=

.gitignore

@@ -5,3 +5,6 @@ dist
 # Ignore the output video from Git but not videos you import into src/.
 out
 .env
+
+# GCP credentials
+serviceaccount.json

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+		
+	]
+}

README.md

@@ -9,46 +9,90 @@
   </a>
 </p>
 
+## PROBLEMS TO FIX:
+
+1. Must kill the express server after render finishes.
+
 Welcome to your TTS Remotion project!
 
 ## Get Started
 
-- Create Azure Account
-- Create TTS service on Azure
-- Create AWS Account
-- Setup S3 Bucket with public access
-  - Configure bucket policy
-    ```json
-    {
-    	"Version": "2008-10-17",
-    	"Statement": [
-    		{
-    			"Sid": "AllowPublicRead",
-    			"Effect": "Allow",
-    			"Principal": {
-    				"AWS": "*"
-    			},
-    			"Action": "s3:GetObject",
-    			"Resource": "arn:aws:s3:::<YOUR-BUCKET-NAME>/*"
-    		}
-    	]
+1. Create Firebase Project
+   ![Create project](./assets/firebase-create.png)
+
+2. Go to Project Settings. In the "General" tab, go to "Your apps" section and register a "Web App".
+
+<!-- VIDEO -->
+
+/assets/firebase-register.mp4
+
+3. Copy the config credentials and paste into `.env`
+
+4. Enable storage, create storage bucket, and edit rules to allow read, write for `remotion-gtts` directory (or any other directory that you have specified for `audioDirectoryInBucket` in the `constants.ts` file).
+
+<!-- VIDEO -->
+
+/assets/firebase-storage-enable.mp4
+
+- Configure bucket rules
+
+```js
+  rules_version = '2';
+  service firebase.storage {
+    match /b/{bucket}/o {
+      match /remotion-gtts/{allPaths=**} {
+        allow read, write: if true;
+      }
     }
-    ```
-  - Configure bucket CORS
-    - Use it only as a template, we recommend you to edit "AllowedOrigins" entering your origin
-    ```json
-    [
-    	{
-    		"AllowedHeaders": ["*"],
-    		"AllowedMethods": ["HEAD", "GET", "PUT", "POST", "DELETE"],
-    		"AllowedOrigins": ["*"],
-    		"ExposeHeaders": ["ETag", "x-amz-meta-custom-header"]
-    	}
-    ]
-    ```
-- Copy `.env.example` to `.env` entering your secrets
-  - ⚠️ Ensure your AWS credentials only allow reading and uploading to a specific S3 bucket `s3:GetObject` and `s3:PutObject` to not compromise your credentials if you deploy your Remotion project
-- Use method `textToSpeech` from `src/TextToSpeech/tts.ts` to convert Text to Audio, this method will return file url, you can use it as source of `<Audio />` component
+  }
+```
+
+> Maybe you should have better security validation instead of just allowing `write` to everyone.
+
+![Create rules](./assets/firebase-storage-rules.png)
+
+5. Enable TTS API on GCP
+
+- You will probably already have a project set up in GCP with the same name as the Firebase project you created earlier. Just use that, to keep things simple.
+
+- Open hambuger menu, go to APIs and Services -> Library
+- Search for "text to speech", and enable **Cloud Text-to-Speech API**. You may be required to enable billing, by creating a billing account. (Be sure to also review the pricing tab)
+
+![Create credentials](/assets/gcp-enable-api.png)
+
+<!-- VIDEO -->
+
+/assets/gcp-enable-api.mp4
+
+6. Create Credentials
+
+- After API is enabled, click on **Manage** -> **Credentials** (on sidebar)
+
+![Create credentials](/assets/gcp-manage-api.png)
+
+- Click on **CREATE CREDENTIALS** and select Service Account
+
+![Create credentials](/assets/gcp-create-credentials.png)
+
+- Fill relevant fields, select the _Basic_ role of **_Owner_**, and skip the other optional fields if not required.
+
+<!-- VIDEO -->
+
+/assets/gcp-create-serviceaccount.mp4
+
+- Now create a JSON key to download credentials as a `.json` file.
+
+<!-- VIDEO -->
+
+/assets/gcp-create-key.mp4
+
+- Name the JSON file as `serviceaccount.json` and place it in the root of your project - `/serviceaccount.json`
+
+> **IMPORTANT:** This file must never be committed, and must be added to .gitignore, .dockerignore, etc. if you change its name to something different.
+
+> If you change the location of this file, make sure to also update `GOOGLE_APPLICATION_CREDENTIALS` in `.env`
+
+7. Copy `.env.example` to `.env` and enter your secrets.
 
 ## Example
 

assets/firebase-create.png

@@ -4,7 +4,7 @@
 	"description": "My Remotion video",
 	"scripts": {
 		"start": "npm run audioserver & remotion preview",
-		"build": "remotion render HelloWorld out/video.mp4",
+		"build": "npm run audioserver & sleep 5; remotion render HelloWorld out/video.mp4; pkill -f \"npm run audioserver\"",
 		"audioserver": "ts-node src/server/index.ts",
 		"upgrade": "remotion upgrade",
 		"test": "eslint src --ext ts,tsx,js,jsx && tsc"

assets/firebase-register.mp4

@@ -2,36 +2,38 @@ import {Composition} from 'remotion';
 import {HelloWorld} from './HelloWorld';
 
 export const RemotionRoot: React.FC = () => {
-	// If (!process.env.AZURE_TTS_KEY) {
-	// 	throw new Error(
-	// 		'AZURE_TTS_KEY environment variable is missing. Read the instructions in README.md file and complete the setup.'
-	// 	);
-	// }
-	// if (!process.env.AZURE_TTS_REGION) {
-	// 	throw new Error(
-	// 		'AZURE_TTS_REGION environment variable is missing. Read the instructions in README.md file and complete the setup.'
-	// 	);
-	// }
-	// if (!process.env.AWS_S3_BUCKET_NAME) {
-	// 	throw new Error(
-	// 		'AWS_S3_BUCKET_NAME environment variable is missing. Read the instructions in README.md file and complete the setup.'
-	// 	);
-	// }
-	// if (!process.env.AWS_S3_REGION) {
-	// 	throw new Error(
-	// 		'AWS_S3_REGION environment variable is missing. Read the instructions in README.md file and complete the setup.'
-	// 	);
-	// }
-	// if (!process.env.AWS_ACCESS_KEY_ID) {
-	// 	throw new Error(
-	// 		'AWS_ACCESS_KEY_ID environment variable is missing. Read the instructions in README.md file and complete the setup.'
-	// 	);
-	// }
-	// if (!process.env.AWS_SECRET_ACCESS_KEY) {
-	// 	throw new Error(
-	// 		'AWS_SECRET_ACCESS_KEY environment variable is missing. Read the instructions in README.md file and complete the setup.'
-	// 	);
-	// }
+	if (!process.env.GOOGLE_APPLICATION_CREDENTIALS)
+		throw new Error(
+			'GOOGLE_APPLICATION_CREDENTIALS environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
+
+	if (!process.env.FIREBASE_API_KEY)
+		throw new Error(
+			'FIREBASE_API_KEY environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
+	if (!process.env.FIREBASE_AUTH_DOMAIN)
+		throw new Error(
+			'FIREBASE_AUTH_DOMAIN environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
+
+	if (!process.env.FIREBASE_PROJECT_ID)
+		throw new Error(
+			'FIREBASE_PROJECT_ID environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
+	if (!process.env.FIREBASE_STORAGE_BUCKET)
+		throw new Error(
+			'FIREBASE_STORAGE_BUCKET environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
+
+	if (!process.env.FIREBASE_MESSAGING_SENDER_ID)
+		throw new Error(
+			'FIREBASE_MESSAGING_SENDER_ID environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
+
+	if (!process.env.FIREBASE_APP_ID)
+		throw new Error(
+			'FIREBASE_APP_ID environment variable is missing. Read the instructions in README.md file and complete the setup.'
+		);
 
 	return (
 		<>
@@ -44,7 +46,7 @@ export const RemotionRoot: React.FC = () => {
 				height={1080}
 				defaultProps={{
 					titleText:
-						'Text to speech on Remotion v4, working with Firebase + Google Cloud, with realtime text changes...',
+						'Text to speech on Remotion v4, working with Firebase + Google Cloud!',
 					titleColor: 'black',
 				}}
 			/>

assets/firebase-storage-enable.mp4

@@ -18,9 +18,6 @@ export const getTTSFromServer = async (
 			})
 		).json();
 
-		console.log(`DEBUG: You got result!!!!`);
-		console.log(result);
-
 		return result.url;
 	} catch (err) {
 		console.error(err);

assets/firebase-storage-rules.png

@@ -12,7 +12,6 @@ export const uploadFileToFirebase = async (
 
 	// Upload file
 	const uploadedFile = await uploadBytes(storageRef, audioData);
-	console.log('🫰🏼 File uploaded!');
 	return uploadedFile;
 }; // Will return big object
 
@@ -34,7 +33,7 @@ export const checkIfAudioHasAlreadyBeenSynthesized = async (
 
 		// Return URL for download
 		const url = await getDownloadURL(ref(storage, filePath));
-		console.log(`DEBUG: File exists! 🥳`);
+		// Console.log(`Requested file already exists!`);
 		return url;
 	} catch {
 		return false;

assets/gcp-create-credentials.png

@@ -9,13 +9,7 @@ import {
 import {audioDirectoryInBucket, voices} from './constants';
 import textToSpeech from '@google-cloud/text-to-speech';
 
-const client = new textToSpeech.TextToSpeechClient({
-	credentials: {
-		private_key: process.env.GOOGLE_CLOUD_PRIVATE_KEY,
-		client_email: process.env.GOOGLE_CLOUD_CLIENT_EMAIL,
-		client_id: process.env.GOOGLE_CLOUD_CLIENT_ID,
-	},
-});
+const client = new textToSpeech.TextToSpeechClient();
 
 export const createTextToSpeechAudio = async (
 	text: string,

assets/gcp-create-key.mp4

@@ -15,8 +15,6 @@ dotenv.config();
 const app = express();
 const port = process.env.SERVER_PORT || 5050;
 
-// Const tmpDir = fs.promises.mkdtemp(path.join(os.tmpdir(), 'remotion-'));
-
 // This setting will reveal the real IP address of the user, so we can apply rate limiting.
 app.set('trust proxy', 1);
 
@@ -40,5 +38,5 @@ app.post(`/getdata`, async (req, res) => {
 });
 
 app.listen(port, () => {
-	console.log(`DEBUG: Umm audio server actually listening on ${port}`);
+	console.log(`TTS server listening on ${port}`);
 });