Partager via

Ajout d’appels audio et vidéo à votre application WebView

La technologie Webview est un navigateur incorporé qui peut être intégré directement dans une application mobile native. Si vous souhaitez développer une application d'appel Azure Communication Services en tant qu'application Android native, vous pouvez non seulement utiliser le Kit de développement logiciel (SDK) Azure Communication Calling pour Android, mais aussi utiliser le Kit de développement logiciel (SDK) Web Azure Communication Calling sur Android WebView.

Cet article explique comment 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.

Conditions préalables

Important

Cette fonctionnalité d’Azure Communication Services est actuellement en préversion. Les fonctionnalités en préversion sont disponibles publiquement et peuvent être utilisées par tous les clients Microsoft nouveaux et existants.

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 ne pas être prises en charge ou les fonctionnalités peuvent être limitées.

Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Cet article suppose que vous disposez déjà d’une application WebView Android.

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 directement aux problèmes connus.

Il vous suffit de mettre à jour le defaultUrl dans MainActivity avec l'URL de l'application web appelante que vous avez déployée, puis de construire l'application.

Ajouter des autorisations au manifeste de l’application

Pour demander les autorisations requises pour effectuer un appel, vous devez déclarer les autorisations dans le manifeste de l’application (app/src/main/AndroidManifest.xml).

Vérifiez que vous disposez des autorisations suivantes 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 n’est pas suffisant. Vous devez également demander les autorisations dangereuses lors 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 à partir du navigateur et demander des autorisations d’application au moment de l’exécution.

Configuration de WebView

Le Kit de développement logiciel (SDK) Web Azure Communication Calling nécessite l’activation de JavaScript.

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 la valeur false.

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

Problèmes connus

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

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 de nom dans l’objet de résultat est une chaîne vide. Ce problème n’affecte pas la fonction de diffusion en continu dans l’appel vidéo, mais les utilisateurs de l’application ne connaissent pas 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 par 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, il peut prendre un certain temps pour collecter des étiquettes.

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 lier l’étiquette à id partir 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 Azure Communication Services sur iOS, outre l’utilisation du Kit de développement logiciel (SDK) iOS Azure Communication Calling, vous pouvez également utiliser le Kit de développement logiciel (SDK) Web Azure Communication Calling 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.

Conditions préalables

Important

Cette fonctionnalité d’Azure Communication Services est actuellement en préversion. Les fonctionnalités en préversion sont disponibles publiquement et peuvent être utilisées par tous les clients Microsoft nouveaux et existants.

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 ne pas être prises en charge ou les fonctionnalités peuvent être limitées.

Pour plus d’informations, consultez Conditions d’Utilisation Supplémentaires relatives aux Évaluations Microsoft Azure.

Ce guide de démarrage rapide part du principe que vous connaissez le développement d’applications iOS. Nous mentionnons la configuration et les conseils nécessaires lors du développement d’une application WKWebView iOS pour le Kit de développement logiciel (SDK) Azure Communication Services Calling.

Ajouter des clés dans Info.plist

Pour effectuer un appel vidéo, vérifiez que vous disposez des clés suivantes 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 le navigateur Safari sur iOS, les utilisateurs peuvent voir la demande de permissions plus fréquemment que sur d’autres plateformes. C’est parce que Safari ne conserve pas les autorisations pendant longtemps, sauf s’il existe un flux acquis.

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

Voici un exemple. L’autorisation du navigateur est accordée dans decisionHandler, de sorte que les utilisateurs ne voient pas l’invite d’autorisation du 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) Web Azure Communication Calling nécessite l’activation de JavaScript.

allowsInlineMediaPlayback doit également ê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 du système iOS WkWebView et azure Communication Services Calling Web SDK ne mute pas le microphone.

La connexion tombe peu après que l’application passe en arrière-plan

Il s’agit également du comportement de l’application iOS. Lorsque nous basculeons vers une autre application audio/vidéo, la connexion tombe environ 30 secondes plus tard.

Ce n’est pas un problème si l’application reste uniquement en arrière-plan pendant une courte période. Lorsque l’application revient au premier plan, l’appel se récupère.

Si l’application reste en arrière-plan pendant une période plus longue, le serveur inscrit que l’utilisateur est absent et supprime l’utilisateur de la liste des participants.

Dans ce cas, lorsque l’utilisateur bascule l’application WkWebView au premier plan, l’appel se déconnecte et ne récupère pas.

Étapes suivantes

Pour plus d’informations, consultez les articles suivants :