Senden und Empfangen von Bildern

Product deprecation notice

Effective April 30th, 2026, Vonage In-App Messaging will no longer be available. Access for new users will be closed, and the service will be discontinued for all existing users.

If you have any questions regarding this product’s discontinuation, please contact your account manager or our support team.

Übersicht

Diese Anleitung behandelt das Senden und Empfangen von Bildern innerhalb einer Konversation.

Bevor Sie beginnen, stellen Sie sicher, dass Sie das SDK zu Ihrer Anwendung hinzugefügt und Sie sind in der Lage ein Gespräch führen.

HINWEIS: Eine Schritt-für-Schritt-Anleitung zur Erstellung einer Chat-Anwendung ist verfügbar hier.

Dieser Leitfaden stützt sich auf die folgenden Concepts:

  • Konversation Veranstaltungen - message Ereignisse, die bei einer Konversation ausgelöst werden, nachdem Sie ein Mitglied sind

Ein Bild senden

Bei einer Unterhaltung, an der Sie bereits beteiligt sind:

// Scenario #1: Send an image from a URL
conversation.sendMessage({
    "message_type": "image",
    "image": {
        "url": "https://example.com/image.jpg"
    }
}).then((event) => {
    console.log("message was sent", event);
}).catch((error)=>{
    console.error("error sending the message", error);
});

// Scenario #2: Upload an image from a file input to Vonage, then send
// Note: the URL will need to be downloaded using the fetch image method mentioned in the next section.
    
const fileInput = document.getElementById('fileInput');
const params = {
    quality_ratio : "90",
    medium_size_ratio: "40",
    thumbnail_size_ratio: "20"
}
conversation.uploadImage(fileInput.files[0], params).then((imageRequest) => {
    imageRequest.onreadystatechange = () => {
        if (imageRequest.readyState === 4 && imageRequest.status === 200) {
            try {
                const { original, medium, thumbnail } = JSON.parse(imageRequest.responseText);
                const message = {
                    message_type: 'image',
                    image: {
                        url: original.url ?? medium.url ?? thumbnail.url
                    }
                }
                return conversation.sendMessage(message);
            } catch (error) {
                console.error("error sending the image", error);
            }
        }
        if (imageRequest.status !== 200) {
            console.error("error uploading the image");
        }
    };
    return imageRequest;
}).catch((error) => {
    console.error("error uploading the image ", error);
});

Empfangen einer Bild-URL

A message Konversationsereignis wird empfangen, wenn ein Mitglied ein Bild an eine Konversation sendet:

conversation.on('message', (sender, event) => {
  if (event.body.message_type === 'image'){
    console.log('*** Image sender: ', sender);
    console.log('*** Image event: ', event);
  }
});

Bilder von Vonage herunterladen

Web-Client

Um ein Bild herunterzuladen, müssen Sie die Bild abrufen Methode.

Mobiler Client (Android, iOS)

Um ein Bild herunterzuladen, müssen Sie der Bildabrufanfrage einen JWT hinzufügen. Das JWT wird als Autorisierungs-Header übergeben (Authorization: Bearer <JWT> Format). Dies ist das JWT, das zur Anmeldung des Benutzers verwendet wurde.

Verschiedene Bildbibliotheken handhaben Anfrage-Header unterschiedlich, daher finden Sie unten ein vollständiges Beispiel für die gängigsten Bibliotheken. Beachten Sie, dass der JWT als Authorization Header für die Anfrage:

// ==== LOAD IMAGE USING COIL ==== 
// https://github.com/coil-kt/coil
private fun loadImageUsingCoil(url: String, jwt: String, context: Context) {
    imageView.load(
        Uri.parse(url),
        context.imageLoader,
    ) {
        addHeader("Authorization", "bearer $jwt")
    }
}

// ==== LOAD IMAGE USING GLIDE ==== 
// https://github.com/bumptech/glide
private fun loadImageUsingGlide(url: String, jwt: String, context: Context) {
    val build = LazyHeaders.Builder()
        .addHeader("Authorization", "bearer $jwt")
        .build()

    val glideUrl = GlideUrl(url, build)

    Glide.with(context)
        .load(glideUrl)
        .into(imageView)
}

// ==== LOAD IMAGE USING PICASSO ====
// https://github.com/square/picasso

// Define custom Authentication interceptor
class AuthenticationInterceptor(private val jwt: String) : Interceptor {
    override fun intercept(chain: Interceptor.Chain): Response = chain.request().let {
        val newRequest = it.newBuilder()
            .header("Authorization", "bearer $jwt")
            .build()

        chain.proceed(newRequest)
    }
}

// Create Picasso instance that uses the Authenticator
private fun getPicassoInstance(jwt: String): Picasso {
    val okHttpClient = OkHttpClient.Builder()
        .addInterceptor(AuthenticationInterceptor(jwt))
        .build()

    return Picasso.Builder(requireContext()).downloader(OkHttp3Downloader(okHttpClient)).build()
}

// Load image using custom picasso instance (that under the hood uses the authentication interceptor)
private fun loadImageUsingPicasso(url: String, jwt: String, context: Context) {
    getPicassoInstance(jwt)
        .load(url)
        .into(imageView)
}

Referenz