Démarrage rapide : Ajouter des appels vidéo à votre application cliente WebView

  • Article
  • 7 minutes de lecture

La technologie Webview est un navigateur incorporable qui peut être intégré directement dans une application mobile native. Si vous souhaitez développer une application d’appel ACS directement une application Android native, en plus d’utiliser le Kit de développement logiciel (SDK) Azure Communication Calling Android, vous pouvez également utiliser le Kit de développement logiciel (SDK) Azure Communication Calling Web sur Android WebView. Dans ce guide de démarrage rapide, vous allez apprendre à exécuter des applications web développées avec le Kit de développement logiciel (SDK) Azure Communication Calling Web dans un environnement Android WebView.

Prérequis

Important

Les fonctionnalités décrites dans ce document sont actuellement en préversion publique. Cette préversion est fournie sans contrat de niveau de service et n’est pas recommandée pour les charges de travail de production. Certaines fonctionnalités peuvent être limitées ou non prises en charge. Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Ce guide de démarrage rapide suppose que vous disposez déjà d’une application Android WebView. Si vous n’en avez pas, vous pouvez télécharger l’exemple d’application WebViewQuickstart.

Si vous utilisez l’exemple d’application WebViewQuickstart, toutes les configurations et la gestion des autorisations nécessaires sont en place. Vous pouvez passer à Problèmes connus. Il vous suffit de mettre à jour le defaultUrldans MainActivity vers l’URL de l’application web appelante que vous avez déployée et de générer l’application.

Ajouter des autorisations au manifeste de l’application

Pour pouvoir demander les autorisations nécessaires pour effectuer un appel, vous devez d’abord les déclarer ces autorisations dans le manifeste d’application. (app/src/main/AndroidManifest.xml) Vérifiez que les autorisations suivantes sont ajoutées au manifeste de l’application :

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />

Demander des autorisations au moment de l’exécution

L’ajout d’autorisations au manifeste d’application ne suffit pas. Vous devez également demander les autorisations dangereuses au moment de l’exécution pour accéder à la caméra et au microphone.

Vous devez appeler requestPermissions() et remplacer onRequestPermissionsResult. Outre les autorisations d’application, vous devez gérer les demandes d’autorisation du navigateur en remplaçant WebChromeClient.onPermissionRequest

L’exemple d’application WebViewQuickstart montre également comment gérer les demandes d’autorisation du navigateur et demander des autorisations d’application au moment de l’exécution.

Configuration de WebView

Le Kit de développement logiciel (SDK) Azure Communication Calling Web nécessite que JavaScript soit activé. Dans certains cas, nous avons vu play() can only be initiated by a user gesture un message d’erreur dans l’environnement Android WebView et les utilisateurs ne peuvent pas entendre l’audio entrant. Par conséquent, nous vous recommandons de définir MediaPlaybackRequiresUserGesture sur false.

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setMediaPlaybackRequiresUserGesture(false);

Problèmes connus

L’API MediaDevices.enumerateDevices() retourne des étiquettes vides

Il s’agit d’un problème connu sur Android WebView. Le problème affecte l’API suivante dans le Kit de développement logiciel (SDK) web :

  • DeviceManager.getCameras()

  • DeviceManager.getMicrophones()

  • DeviceManager.getSpeakers() (si l’appareil prend en charge l’énumération de l’orateur)

    La valeur du champ name dans l’objet résultat sera une chaîne vide. Ce problème n’affectera pas la fonction de diffusion en continu dans l’appel vidéo, mais les utilisateurs de l’application ne pourront pas connaître l’étiquette de caméra qu’ils sélectionnent pour l’envoi de la vidéo. Pour offrir une meilleure expérience d’interface utilisateur, vous pouvez utiliser la solution de contournement suivante dans l’application web pour obtenir des étiquettes d’appareil et mapper l’étiquette à l’aide de deviceId.

    Bien que nous ne puissions pas obtenir d’étiquettes d’appareil à partir de MediaDevices.enumerateDevices(), nous pouvons obtenir l’étiquette à partir de MediaStreamTrack. Cette solution de contournement nécessite que l’application web utilise getUserMedia pour obtenir le flux et mapper le deviceId. S’il existe de nombreuses caméras et microphones sur l’appareil Android, la collecte des étiquettes peut prendre un certain temps.

async function getDeviceLabels() {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const result = {};
    for (let i = 0; i < devices.length; i++) {
        const device = devices[i];
        if(device.kind != 'audioinput' && device.kind != 'videoinput') continue;
        if(device.label) continue;
        const deviceId = device.deviceId;
        const deviceConstraint = {
            deviceId: {
                exact: deviceId
            }
        };		
        const constraint = (device.kind == 'audioinput') ?
                { audio: deviceConstraint } :
                { video: deviceConstraint };
		try {
            const stream =  await navigator.mediaDevices.getUserMedia(constraint);
            stream.getTracks().forEach(track => {
                let namePrefix = '';
                if (device.kind == 'audioinput') {
                    namePrefix = 'microphone:';
                } else if(device.kind == 'videoinput') {
                    namePrefix = 'camera:';
                }
                if (track.label === '' && deviceId == 'default') {
                    result[namePrefix + deviceId] = 'Default';
                } else {
                    result[namePrefix + deviceId] = track.label;
                }
                track.stop();
            });
		} catch(e) {
		    console.error(`get stream failed: ${device.kind} ${deviceId}`, e);
		}
    }
    return result;
}

Capture d’écran du résultat getDeviceLabels().

Une fois que vous avez obtenu le mappage entre deviceId et étiquette, vous pouvez l’utiliser pour associer l’étiquette au id de DeviceManager.getCameras() ou DeviceManager.getMicrophones()

Capture d’écran montrant la solution de contournement du nom de l’appareil.

iOS WKWebView vous permet d’incorporer du contenu web en toute transparence dans l’interface utilisateur de votre application. Si vous souhaitez développer une application d’appel ACS sur iOS, en plus d’utiliser le kit de développement logiciel (SDK) Azure Communication Calling iOS, vous pouvez également utiliser le kit de développement logiciel (SDK) Azure Communication Calling Web avec iOS WKWebView. Dans ce guide de démarrage rapide, vous allez apprendre à exécuter des applications web développées avec le kit de développement logiciel (SDK) Azure Communication Calling Web dans un environnement iOS WKWebView.

Prérequis

Important

Les fonctionnalités décrites dans ce document sont actuellement en préversion publique. Cette préversion est fournie sans contrat de niveau de service et n’est pas recommandée pour les charges de travail de production. Certaines fonctionnalités peuvent être limitées ou non prises en charge. Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Ce guide de démarrage rapide suppose que vous êtes familiarisé avec le développement d’applications iOS. Nous allons mentionner la configuration et les conseils nécessaires lors du développement d’une application IOS WKWebView pour le kit de développement logiciel (SDK) d’appel ACS.

Ajouter des clés dans Info.plist

Pour effectuer un appel vidéo, vérifiez que les clés suivantes sont ajoutées à info.plist :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>NSMicrophoneUsageDescription</key>
	<string>Camera access is required to make a video call</string>
	<key>NSCameraUsageDescription</key>
	<string>Microphone access is required to make an audio call</string>
</dict>
</plist>

Gérer l’invite d’autorisation

Sur iOS Safari, les utilisateurs peuvent voir l’invite d’autorisation plus fréquemment que sur d’autres plateformes, car Safari ne conserve pas les autorisations pendant une longue période, sauf si un flux est acquis.

WKWebView permet de gérer l’invite d’autorisation du navigateur à l’aide de WKUIDelegate.webView. Cette API est uniquement disponible sur iOS 15.0+.

Voici un exemple. Dans cet exemple, l’autorisation de navigateur est accordée dans decisionHandler, de sorte que les utilisateurs ne voient pas l’invite d’autorisation de navigateur après avoir accordé les autorisations d’application.

import WebKit
import SwiftUI

struct WebView: UIViewRepresentable {
    private(set) var url: URL
    private var webView: WKWebView

    init(url: String) {
        self.url = URL(string: url)!

        let prefs = WKWebpagePreferences()
        prefs.allowsContentJavaScript = true
        prefs.preferredContentMode = .recommended

        let configuration = WKWebViewConfiguration()
        configuration.defaultWebpagePreferences = prefs
        configuration.allowsInlineMediaPlayback = true
        configuration.mediaTypesRequiringUserActionForPlayback = []
        let webView = WKWebView(frame: CGRect(), configuration: configuration)
        self.webView = webView
    }

    class Coordinator: NSObject, WKUIDelegate {
        let parent: WebView
        init(_ parent: WebView) {
            self.parent = parent
        }
        func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin, initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType, decisionHandler: @escaping (WKPermissionDecision) -> Void) {
            decisionHandler(WKPermissionDecision.grant)
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIView(context: Context) -> WKWebView {
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.uiDelegate = context.coordinator
        uiView.load(URLRequest(url: self.url))
    }
}

Configuration de WebView

Le Kit de développement logiciel (SDK) Azure Communication Calling Web nécessite que JavaScript soit activé.

allowsInlineMediaPlayback est également requis pour être true.

let prefs = WKWebpagePreferences()
prefs.allowsContentJavaScript = true
prefs.preferredContentMode = .recommended

let configuration = WKWebViewConfiguration()
configuration.defaultWebpagePreferences = prefs
configuration.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: CGRect(), configuration: configuration)

Problèmes connus

Le microphone est désactivé lorsque l’application passe en arrière-plan

Lorsqu’un utilisateur verrouille l’écran ou que l’application WkWebView passe en arrière-plan, l’entrée du microphone est désactivée jusqu’à ce que l’application revienne au premier plan. Il s’agit du comportement normal du système iOS WkWebView, et le microphone n’est pas désactivé par le kit de développement logiciel (SDK) web d’appel ACS.

La connexion est annulée peu après que l’application passe en arrière-plan

Il s’agit également du comportement normal de l’application iOS. Lorsque nous basculons vers une autre application audio/vidéo, la connexion sera interrompue environ 30 secondes plus tard. Ce n’est pas un problème si l’application reste en arrière-plan seulement pendant une courte période. Lorsque l’application revient au premier plan, l’appel est récupéré. Si l’application reste en arrière-plan pendant une période plus longue, le serveur pense que l’utilisateur est absent et le supprime de la liste des participants. Dans ce cas, lorsque l’utilisateur retourne l’application WkWebView au premier plan, l’appel se déconnecte et ne se récupère pas.

Étapes suivantes

Pour plus d’informations, consultez les articles suivants :