Freigeben über

Schnellstart: Hinzufügen von Videoanrufen zu Ihrer WebView-Client-App

Webview-Technologie ist ein einbettbarer Browser, der direkt in eine native mobile Anwendung integriert werden kann. Wenn Sie eine Azure Communication Services-Anrufanwendung direkt eine systemeigene Android-Anwendung entwickeln möchten, neben der Verwendung des Azure Communication Calling Android SDK, können Sie auch das Azure Communication Calling Web SDK unter Android WebView verwenden. In dieser Schnellstartanleitung erfahren Sie, wie Sie Webapps ausführen, die mit dem Azure Communication Calling Web SDK in einer Android WebView-Umgebung entwickelt wurden.

Voraussetzungen

Wichtig

Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau. Features in der Vorschau sind öffentlich verfügbar und können von allen neuen und vorhandenen Microsoft-Kunden verwendet werden.

Diese Vorschauversion wird ohne Vereinbarung zum Servicelevel bereitgestellt und ist nicht für Produktionsworkloads vorgesehen. Bestimmte Features werden möglicherweise nicht unterstützt oder Funktionen sind eingeschränkt.

Weitere Informationen finden Sie unter Zusätzliche Nutzungsbestimmungen für Microsoft Azure-Vorschauen.

In diesem Schnellstarthandbuch wird davon ausgegangen, dass Sie bereits über eine Android WebView-Anwendung verfügen. Wenn Sie nicht über eine verfügen, können Sie die WebViewQuickstart-Beispiel-App herunterladen.

Wenn Sie die WebViewQuickstart-Beispiel-App verwenden, sind alle erforderlichen Konfigurationen und die Berechtigungsbehandlung vorhanden. Sie können zu bekannten Problemen springen. Alles, was Sie tun müssen, ist, defaultUrl in MainActivity auf die URL der aufrufenden Webanwendung, die Sie bereitgestellt haben, zu aktualisieren und die Anwendung zu erstellen.

Hinzufügen von Berechtigungen zum Anwendungsmanifest

Um die zum Aufrufen erforderlichen Berechtigungen anzufordern, müssen Sie die Berechtigungen im Anwendungsmanifest deklarieren. (app/src/main/AndroidManifest.xml) Stellen Sie sicher, dass Sie dem Anwendungsmanifest die folgenden Berechtigungen hinzugefügt haben:

    <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" />

Anfordern von Berechtigungen zur Laufzeit

Das Hinzufügen von Berechtigungen zum Anwendungsmanifest reicht nicht aus. Für den Zugriff auf Kamera und Mikrofon müssen Sie außerdem zur Laufzeit die problematischen Berechtigungen anfordern.

Sie müssen requestPermissions() aufrufen und onRequestPermissionsResult überschreiben. Neben den App-Berechtigungen müssen Sie die Browser-Berechtigungsanfragen durch Überschreiben behandeln. WebChromeClient.onPermissionRequest

Die WebViewQuickstart-Beispiel-App zeigt auch, wie Berechtigungsanforderungen von Browsern verarbeitet und App-Berechtigungen zur Laufzeit angefordert werden.

WebView-Konfiguration

Das Azure Communication Calling Web SDK erfordert JavaScript aktiviert. In einigen Fällen wurde in der Android WebView-Umgebung eine Fehlermeldung angezeigt play() can only be initiated by a user gesture , und Benutzer können eingehende Audiodaten nicht hören. Daher wird empfohlen, die Einstellung MediaPlaybackRequiresUserGesture auf "false" festzulegen.

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

Bekannte Probleme

MediaDevices.enumerateDevices() API gibt leere Bezeichnungen zurück.

Es ist ein bekanntes Problem in Android WebView. Das Problem wirkt sich auf die folgende API im Web SDK aus:

  • Geräte-Manager.getKameras()

  • DeviceManager.getMicrophones()

  • DeviceManager.getSpeakers() (Wenn das Gerät die Lautsprecherenumeration unterstützt)

    Der Wert des Namensfelds im Ergebnisobjekt ist eine leere Zeichenfolge. Dieses Problem wirkt sich nicht auf die Funktion des Streamings im Videoanruf aus, aber die Anwendungsbenutzer können die Kamerabezeichnung, die sie zum Senden des Videos auswählen, nicht kennen. Um eine bessere Benutzeroberfläche bereitzustellen, können Sie die folgende Problemumgehung in der Webanwendung verwenden, um Gerätebezeichnungen abzurufen und die Bezeichnung nach deviceId zuzuordnen.

    Obwohl wir keine Gerätebezeichnungen von MediaDevices.enumerateDevices() abrufen können, können wir die Bezeichnung von MediaStreamTrack abrufen. Für diese Problemumgehung muss die Webanwendung „getUserMedia“ verwenden, um den Stream abzurufen und deviceId zuzuordnen. Wenn es viele Kameras und Mikrofone auf dem Android-Gerät gibt, kann es eine Weile dauern, um Etiketten zu sammeln.

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;
}

Screenshot des getDeviceLabels()-Ergebnisses.

Nachdem Sie die Zuordnung zwischen deviceId und Bezeichnung erhalten haben, können Sie sie verwenden, um die Bezeichnung mit der ID (id) von DeviceManager.getCameras() oder DeviceManager.getMicrophones() zu verknüpfen.

Screenshot der Problemumgehung mit dem Gerätenamen.

Mit iOS WKWebView können Sie Webinhalte nahtlos in Ihre App-UI einbetten. Wenn Sie eine Azure Communication Services-Anrufanwendung unter iOS entwickeln möchten, neben dem Azure Communication Calling iOS SDK, können Sie auch das Azure Communication Calling Web SDK mit iOS WKWebView verwenden. In dieser Schnellstartanleitung erfahren Sie, wie Sie Webapps ausführen, die mit dem Azure Communication Calling Web SDK in einer iOS WKWebView-Umgebung entwickelt wurden.

Voraussetzungen

Wichtig

Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau. Features in der Vorschau sind öffentlich verfügbar und können von allen neuen und vorhandenen Microsoft-Kunden verwendet werden.

Diese Vorschauversion wird ohne Vereinbarung zum Servicelevel bereitgestellt und ist nicht für Produktionsworkloads vorgesehen. Bestimmte Features werden möglicherweise nicht unterstützt oder Funktionen sind eingeschränkt.

Weitere Informationen finden Sie unter Zusätzliche Nutzungsbestimmungen für Microsoft Azure-Vorschauen.

In diesem Schnellstarthandbuch wird davon ausgegangen, dass Sie mit der Entwicklung von iOS-Anwendungen vertraut sind. Wir werden die erforderliche Konfiguration und Tipps bei der Entwicklung der iOS-WKWebView-Anwendung für Azure Communication Services Calling SDK erwähnen.

Hinzufügen von Schlüsseln in Info.plist

Um einen Videoanruf zu tätigen, stellen Sie sicher, dass Sie die folgenden Schlüssel zur Info.plist hinzugefügt haben:

<?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>

Verarbeiten einer Berechtigungsaufforderung

In iOS Safari können Benutzer die Berechtigungsaufforderung häufiger sehen als auf anderen Plattformen. Das liegt daran, dass Safari Berechtigungen nicht lange beibehält, sofern kein Stream erfasst wird.

WKWebView bietet eine Möglichkeit zum Behandeln der Browserberechtigungsaufforderung mithilfe von WKUIDelegate.webView. Diese API ist nur unter iOS 15.0+ verfügbar.

Hier ist ein Beispiel. In diesem Beispiel werden die Browserberechtigungen in decisionHandler erteilt, sodass den Benutzern nach dem Erteilen der App-Berechtigungen keine Aufforderung zur Gewährung von Browserberechtigungen angezeigt wird.

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))
    }
}

WebView-Konfiguration

Das Azure Communication Calling Web SDK erfordert JavaScript aktiviert.

allowsInlineMediaPlaybackmuss auch true sein.

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)

Bekannte Probleme

Mikrofon wird stummgeschaltet, wenn die App in den Hintergrund wechselt

Wenn ein Benutzer den Bildschirm sperrt oder die WkWebView-App in den Hintergrund wechselt, wird die Mikrofoneingabe stummgeschaltet, bis die App wieder im Vordergrund angezeigt wird. Dies ist das iOS-WkWebView-Systemverhalten, und das Mikrofon wird nicht vom Azure Communication Services Calling Web SDK stummgeschaltet.

Die Verbindung wird bald nach dem Wechsel der App in den Hintergrund abgebrochen.

Dies ist auch iOS-App-Verhalten. Wenn wir zu einer anderen Audio-/Video-App wechseln, wird die Verbindung ungefähr 30 Sekunden später abgebrochen. Dies ist kein Problem, wenn die App nur für kurze Zeit im Hintergrund bleibt. Wenn die App wieder im Vordergrund angezeigt wird, wird der Aufruf wiederhergestellt. Wenn die App länger im Hintergrund bleibt, denkt der Server, dass der Benutzer abwesend ist und den Benutzer aus der Teilnehmerliste entfernt. Wenn der Benutzer die WkWebView-App in diesem Fall wieder in den Vordergrund wechselt, wird der Anruf unterbrochen und kann nicht wiederhergestellt werden.

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln: