Bereiten Sie das Browser- - AWS SDK for JavaScript

Helfen Sie uns, dasAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation durch Feedback unter Verwendung derFeedbackLink oder erstellen Sie ein Problem oder ziehen Sie eine Anfrage anGitHubaus.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-API-Referenzbeschreibt ausführlich alle API-Operationen für dieAWS SDK for JavaScriptVersion 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Bereiten Sie das Browser-

Dieses Thema ist Teil eines Tutorials zum Erstellen einer App, die Sprachnachrichten für authentifizierte Benutzer transkribiert und anzeigt. Um am Anfang des Tutorials zu beginnen, lesen Sie Erstellen Sie eine Transkriptions-App mit authentifizierten Benutzern.

Es gibt drei Akten,index.html,recorder.js, undhelper.js, die Sie zu einem einzigen bündeln müssenmain.jsVerwenden von Webpack. Dieses Thema beschreibt ausführlich nur die Funktionen inindex.jsdie das SDK für JavaScript verwenden, welches verfügbar isthier auf GitHubaus.

Anmerkung

recorder.jsundhelper.jssind erforderlich, aber weil sie keinen Code Node.js enthalten, werden in den Inline-Kommentaren erklärthierundhierbeziehungsweise GitHub.

Definieren Sie zunächst die Parameter.COGNITO_IDist der Endpunkt für den Amazon Cognito Cognito-Benutzerpool, den Sie imErstellen derAWSRessourcen Thema dieses Tutorials. Es ist formatiertcognito-idp.AWS_REGION.amazonaws.com/USER_POOL_IDaus. Die Benutzerpool-ID lautetID_TOKENimAWSAnmeldeinformationen Token, das von der App-URL entfernt wirdgetTokenFunktion in der Datei 'helper.js'. Dieses Token wird an dieloginData-Variable, die den Amazon Transcribe- und Amazon S3 S3-Clientobjekten Logins bereitstellt. Ersetzen„REGION“mit demAWSRegion und„-BUCKET“mit dem Ersetzen„IDENTITY_POOL_ID“mit demIdentityPoolIdausBeispielseitedes Amazon Cognito Cognito-Identitäten-Pools, den Sie für dieses Beispiel erstellt haben. Dies wird auch an jedes Client-Objekt übergeben.

// Import the required AWS SDK clients and commands for Node.js import "./helper.js"; import "./recorder.js"; import { CognitoIdentityClient } from"@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool, } from"@aws-sdk/credential-provider-cognito-identity"; import { CognitoIdentityProviderClient, GetUserCommand, } from"@aws-sdk/client-cognito-identity-provider"; import { S3RequestPresigner } from"@aws-sdk/s3-request-presigner"; import { createRequest } from"@aws-sdk/util-create-request"; import { formatUrl } from"@aws-sdk/util-format-url"; import { TranscribeClient, StartTranscriptionJobCommand, } from"@aws-sdk/client-transcribe"; import { S3Client, PutObjectCommand, GetObjectCommand, ListObjectsCommand, DeleteObjectCommand, } from"@aws-sdk/client-s3"; import fetch from "node-fetch"; // Set the parameters. // 'COGINTO_ID' has the format 'cognito-idp.eu-west-1.amazonaws.com/COGNITO_ID'. let COGNITO_ID = "COGNITO_ID"; // Get the Amazon Cognito ID token for the user. 'getToken()' is in 'helper.js'. let idToken = getToken(); let loginData = { [COGNITO_ID]: idToken, }; const params = { Bucket: "BUCKET", // The Amazon Simple Storage Solution (S3) bucket to store the transcriptions. Region: "REGION", // The AWS Region identityPoolID: "IDENTITY_POOL_ID", // Amazon Cognito Identity Pool ID. }; // Create an Amazon Transcribe service client object. const client = new TranscribeClient({ region: params.Region, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: params.Region }), identityPoolId: params.identityPoolID, logins: loginData, }), }); // Create an Amazon S3 client object. const s3Client = new S3Client({ region: params.Region, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: params.Region }), identityPoolId: params.identityPoolID, logins: loginData, }), });

Wenn die HTML-Seite geladen wird, wird derupdateUserInterfaceerstellt einen Ordner mit dem Namen des Benutzers im Amazon S3 S3-Bucket, wenn er sich zum ersten Mal bei der App angemeldet hat. Wenn nicht, aktualisiert es die Benutzeroberfläche mit allen Transkripten aus den vorherigen Sitzungen des Benutzers.

let updateUserInterface; window.onload = updateUserInterface = async () => { // Set the parameters. const userParams = { // Get the access token. 'GetAccessToken()' is in 'helper.js'. AccessToken: getAccessToken(), }; // Create a CognitoIdentityProviderClient client object. const client = new CognitoIdentityProviderClient({ region: params.Region }); try { const data = await client.send(new GetUserCommand(userParams)); const username = data.Username; // Export username for use in 'recorder.js'. exports.username = username; try { // If this is user's first sign-in, create a folder with user's name in Amazon S3 bucket. // Otherwise, no effect. const Key = `${username}/`; try { const data = await s3Client.send( new PutObjectCommand({ Key: Key, Bucket: params.Bucket }) ); console.log("Folder created for user ", data.Username); } catch (err) { console.log("Error", err); } try { // Get a list of the objects in the Amazon S3 bucket. const data = await s3Client.send( new ListObjectsCommand({ Bucket: params.Bucket, Prefix: username }) ); // Create a variable for the list of objects in the Amazon S3 bucket. const output = data.Contents; // Loop through the objects, populating a row on the user interface for each object. for (var i = 0; i < output.length; i++) { var obj = output[i]; const objectParams = { Bucket: params.Bucket, Key: obj.Key, }; // Get the name of the object from the Amazon S3 bucket. const data = await s3Client.send(new GetObjectCommand(objectParams)); // Extract the body contents, a readable stream, from the returned data. const result = data.Body; // Create a variable for the string version of the readable stream. let stringResult = ""; // Use 'yeidlUnit8Chunks' to convert the readable streams into JSON. for await (let chunk of yieldUint8Chunks(result)) { stringResult += String.fromCharCode.apply(null, chunk); } // The setTimeout function waits while readable stream is converted into JSON. setTimeout(function () { // Parse JSON into human readable transcript, which will be displayed on user interface (UI). const outputJSON = JSON.parse(stringResult).results.transcripts[0] .transcript; // Create name for transcript, which will be displayed. const outputJSONTime = JSON.parse(stringResult) .jobName.split("/")[0] .replace("-job", ""); i++; // // Display the details for the transcription on the UI. // 'displayTranscriptionDetails()' is in 'helper.js'. displayTranscriptionDetails( i, outputJSONTime, objectParams.Key, outputJSON ); }, 1000); } } catch (err) { console.log("Error", err); } } catch (err) { console.log("Error creating presigned URL", err); } } catch (err) { console.log("Error", err); } }; // Convert readable streams. async function* yieldUint8Chunks(data) { const reader = data.getReader(); try { while (true) { const { done, value } = await reader.read(); if (done) return; yield value; } } finally { reader.releaseLock(); } }

Wenn der Benutzer eine Sprachnachricht für Transkriptionen aufzeichnet, wird deruploadLädt die Aufzeichnungen in den Amazon S3 S3-Bucket hoch. Diese Funktion wird von derrecorder.jsfile.

// Upload recordings to Amazon S3 bucket window.upload = async function (blob, userName) { // Set the parameters for the recording recording. const Key = `${userName}/test-object-${Math.ceil(Math.random() * 10 ** 10)}`; // Create a presigned URL to upload the transcription to the Amazon S3 bucket when it is ready. try { // Create an Amazon S3RequestPresigner object. const signer = new S3RequestPresigner({ ...s3Client.config }); // Create the request. const request = await createRequest( s3Client, new PutObjectCommand({ Key, Bucket: params.Bucket }) ); // Define the duration until expiration of the presigned URL. const expiration = new Date(Date.now() + 60 * 60 * 1000); // Create and format the presigned URL. let signedUrl; signedUrl = formatUrl(await signer.presign(request, expiration)); console.log(`\nPutting "${Key}"`); } catch (err) { console.log("Error creating presigned URL", err); } try { // Upload the object to the Amazon S3 bucket using a presigned URL. response = await fetch(signedUrl, { method: "PUT", headers: { "content-type": "application/octet-stream", }, body: blob, }); // Create the transcription job name. In this case, it's the current date and time. const today = new Date(); const date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); const time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds(); const jobName = date + "-time-" + time; // Call the "createTranscriptionJob()" function. createTranscriptionJob( "s3://" + params.Bucket + "/" + Key, jobName, params.Bucket, Key ); } catch (err) { console.log("Error uploading object", err); } }; // Create the AWS Transcribe transcription job. const createTranscriptionJob = async (recording, jobName, bucket, key) => { // Set the parameters for transcriptions job const params = { TranscriptionJobName: jobName + "-job", LanguageCode: "en-US", // For example, 'en-US', OutputBucketName: bucket, OutputKey: key, Media: { MediaFileUri: recording, // For example, "https://transcribe-demo.s3-REGION.amazonaws.com/hello_world.wav" }, }; try { // Start the transcription job. const data = await client.send(new StartTranscriptionJobCommand(params)); console.log("Success - transcription submitted", data); } catch (err) { console.log("Error", err); } };

deleteTranscriptionlöscht eine Transkription von der Benutzeroberfläche unddeleteRowlöscht eine vorhandene Transkription aus dem Amazon S3 S3-Bucket. Beide werden durch dieLöschen-Taste auf der Benutzeroberfläche.

// Delete a transcription from the Amazon S3 bucket. window.deleteJSON = async (jsonFileName) => { try { const data = await s3Client.send( new DeleteObjectCommand({ Bucket: params.Bucket, Key: jsonFileName, }) ); console.log("Success - JSON deleted"); } catch (err) { console.log("Error", err); } }; // Delete a row from the user interface. window.deleteRow = function (rowid) { const row = document.getElementById(rowid); row.parentNode.removeChild(row); };

Führen Sie schließlich an der Eingabeaufforderung Folgendes aus, um das JavaScript für dieses Beispiel in einer Datei mit dem Namen zu bündelnmain.js:

webpack index.js --mode development --target web --devtool false -o main.js
Anmerkung

Weitere Informationen zur Installation von Webpack finden Sie unterAnwendungsbündelung mit Webpackaus.