翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

ウェブアプリケーションを WebRTC リダイレクトと統合する

WebRTC リダイレクトを使用すると、WorkSpaces セッション内で実行されているウェブアプリケーションは、クライアント側のネイティブオーディオデバイスを使用できます。このトピックでは、ウェブアプリケーション開発者が WebRTC リダイレクト環境を検出して統合する方法を示します。

WorkSpace で WebRTC リダイレクトが有効になっている場合、Amazon DCV WebRTC リダイレクトブラウザ拡張機能はプロキシ SDK をウェブページに挿入します。アプリケーションはこのプロキシを検出し、それを使用して、getUserMedia や RTCPeerConnection などの標準の WebRTC API コールを、リモート WorkSpace の仮想デバイスではなく、ユーザーのローカルデバイスにリダイレクトできます。これにより、DCV ディスプレイプロトコルを介したメディアのストリーミングと比較して、パフォーマンスが大幅に向上し、レイテンシーが短縮されます。

アプリケーションは、WebRTC リダイレクトが有効になっている WorkSpace WebRTC リダイレクトが有効になっていない標準ブラウザで実行する場合の両方のケースを処理する必要があります。プロキシはオプションです。存在しない場合、アプリケーションは標準の WebRTC にフォールバックできます。

前提条件

エンドユーザー向け

エンドユーザーには以下が必要です。

デベロッパー向け

ウェブアプリケーションは次の条件を満たす必要があります。

統合方法

統合には、リダイレクト環境の検出、WebRTC APIs上書き、オーディオ要素のマッピング、再接続の処理の 4 つのステップが含まれます。

ステップ 1: リダイレクト環境を検出する

この初期化コードをアプリケーションに追加します。コールバックは、プロキシの準備ができたとき、またはリダイレクトが利用できない場合はタイムアウト後に実行されます。

let proxy = null;

function handleInitCallback(result) {
    if (result.success) {
        // Redirection is available
        proxy = result.proxy;
        console.log('WebRTC redirection enabled, version:', proxy.getVersion());
        console.log('Client info:', proxy.clientInfo);

        // Override WebRTC APIs to use redirection
        proxy.overrideWebRTC();

        // Set up reconnection handling
        setupReconnectionHandling();
    } else {
        // Not in a redirection environment  - use standard WebRTC
        console.log('WebRTC redirection not available:', result.error);
    }
}

// Register the initialization callback
if (globalThis.DCVWebRTCPeerConnectionProxyV2) {
    globalThis.DCVWebRTCPeerConnectionProxyV2.setInitCallback(handleInitCallback, 5000);
}
            

キーポイント:

ステップ 2: 標準の WebRTC APIs

を呼び出した後はoverrideWebRTC()、通常どおり WebRTC APIsを使用します。プロキシはローカルクライアントに透過的にリダイレクトします。

// Get user media  - automatically redirected
const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: false   // Video redirection not yet supported
});

// Create peer connection  - automatically redirected
const pc = new RTCPeerConnection(configuration);

// Everything else works as standard WebRTC
pc.addTrack(stream.getAudioTracks()[0], stream);
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
            

元のブラウザ APIs にアクセスする必要がある場合 (ローカルクライアントではなくリモートブラウザからビデオをキャプチャする場合など）、それらは に保持されますproxy.overridenApis。

// Get the original getUserMedia (runs in remote browser, not redirected)
const originalGetUserMedia = proxy.overridenApis.get('navigator.mediaDevices.getUserMedia');

// Available original APIs:
// 'navigator.mediaDevices.getUserMedia'
// 'navigator.mediaDevices.addEventListener'
// 'navigator.mediaDevices.removeEventListener'
// 'navigator.mediaDevices.enumerateDevices'
// 'navigator.mediaDevices.getDisplayMedia'
// 'window.RTCPeerConnection'
// 'window.RTCPeerConnection.generateCertificate'
// 'window.AudioContext'
// 'window.Worker' (experimental)

const remoteStream = await originalGetUserMedia.call(navigator.mediaDevices, {
    audio: false,
    video: true
});
            

ステップ 3: オーディオ要素をマッピングする

オーディオ再生の場合は、オーディオ要素で を設定するmapAudioElement()前に srcObjectを呼び出します。

const audioElement = document.querySelector('audio#remote-audio');

// Map the audio element before setting srcObject
proxy.mapAudioElement(audioElement);

// Now use the audio element normally
audioElement.srcObject = remoteStream;
await audioElement.play();

// Control playback
audioElement.pause();
audioElement.volume = 0.8;
audioElement.muted = false;

// Change output device
await audioElement.setSinkId(deviceId);
            

ステップ 4: 再接続を処理する

リダイレクトサービスは、ネットワークの問題やクライアントの再接続などにより、一時的に使用できなくなる可能性があります。

function setupReconnectionHandling() {
    proxy.addStatusChangeEventListener((event) => {
        switch (event.status) {
            case 'unavailable':
                console.error('Redirection lost');
                handleRedirectionLost();
                break;
            case 'available':
                console.info('Redirection restored');
                handleRedirectionRestored();
                break;
        }
    });
}

function handleRedirectionLost() {
    // Try to close cleanly  - proxies may throw exceptions after reconnection
    try {
        if (peerConnection) { peerConnection.close(); }
    } catch (error) {
        console.warn('Error closing peer connection (proxy may be invalid):', error);
    }
    showReconnectingMessage();
}

function handleRedirectionRestored() {
    // IMPORTANT: All existing proxy objects are invalid after reconnection.
    // Create new RTCPeerConnection, MediaStream, and other WebRTC objects.
    hideReconnectingMessage();
    restartCall(); // Must create fresh WebRTC objects
}
            

ハートビートのタイミングをカスタマイズできます。

proxy.resetHeartbeat({
    heartbeatTimeoutMs: 5000,      // Time before marking unavailable
    heartbeatIntervalPeriodMs: 500 // How often to check
});
            

デバイス列挙

デバイスの変更 - ヘッドセットをプラグインするユーザーなど - は自動的に検出されます。を使用してmakeMediaDevicesProxy()、ローカルクライアントでデバイスの変更をリッスンします。

const mediaDevices = proxy.makeMediaDevicesProxy();
mediaDevices.ondevicechange = async () => {
    const devices = await navigator.mediaDevices.enumerateDevices();
    updateDeviceList(devices);
};
        

を使用してproxy.clientInfo、ユーザーが接続元のクライアントプラットフォームを決定します。

// clientInfo contains:
// - platform: 'web' | 'windows' | 'macOS' | 'linux'
// - version: SDK version string
// - userAgent: browser user agent string
// - browserDetails: { browser: string, version: string }

switch (proxy.clientInfo.platform) {
    case 'web':     console.log('Connecting from web client'); break;
    case 'windows': console.log('Connecting from Windows native client'); break;
    case 'macOS':   console.log('Connecting from macOS native client'); break;
    case 'linux':   console.log('Connecting from Linux native client'); break;
}
        

アドバンスト: Web Audio API によるオーディオ処理

Web Audio API を使用して、ピア接続を介してオーディオストリームを送信する前にオーディオストリームを処理できます。

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(micStream);
const gainNode = audioContext.createGain();
const destination = audioContext.createMediaStreamDestination();

source.connect(gainNode);
gainNode.connect(destination);

// Control microphone volume
gainNode.gain.value = 0.5; // 50% volume

// Use the processed stream
pc.addTrack(destination.stream.getAudioTracks()[0], destination.stream);
        

完全な例

次の例は、初期化、再接続処理、デバイス変更検出、通話設定との完全な統合を示しています。

let proxy = null;
let peerConnection = null;
let localStream = null;

function initializeRedirection() {
    if (globalThis.DCVWebRTCPeerConnectionProxyV2) {
        globalThis.DCVWebRTCPeerConnectionProxyV2.setInitCallback((result) => {
            if (result.success) {
                proxy = result.proxy;
                proxy.overrideWebRTC();
                proxy.addStatusChangeEventListener(handleStatusChange);
                proxy.resetHeartbeat({ heartbeatTimeoutMs: 5000, heartbeatIntervalPeriodMs: 500 });
                setupDeviceChangeListener();
            } else {
                console.log('Redirection not available:', result.error);
            }
        }, 5000);
    }
}

function handleStatusChange(event) {
    if (event.status === 'unavailable') {
        try {
            if (peerConnection) { peerConnection.close(); peerConnection = null; }
            if (localStream) { localStream.getTracks().forEach(t => t.stop()); localStream = null; }
        } catch (error) {
            console.warn('Error cleaning up (proxies invalid):', error);
            peerConnection = null;
            localStream = null;
        }
    } else if (event.status === 'available') {
        startCall(); // Create fresh WebRTC objects
    }
}

function setupDeviceChangeListener() {
    const mediaDevices = proxy.makeMediaDevicesProxy();
    mediaDevices.ondevicechange = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        updateDeviceUI(devices);
    };
}

async function startCall() {
    try {
        localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
        peerConnection = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

        peerConnection.ontrack = (event) => {
            const remoteAudio = document.querySelector('audio#remote');
            if (proxy) { proxy.mapAudioElement(remoteAudio); }
            remoteAudio.srcObject = event.streams[0];
            remoteAudio.play();
        };

        peerConnection.onicecandidate = (event) => {
            if (event.candidate) { sendToSignalingServer({ type: 'ice-candidate', candidate: event.candidate }); }
        };

        const offer = await peerConnection.createOffer();
        await peerConnection.setLocalDescription(offer);
        sendToSignalingServer({ type: 'offer', sdp: offer });
    } catch (error) {
        console.error('Failed to start call:', error);
    }
}

initializeRedirection();
        

統合のテスト

リダイレクトなし

アプリケーションは、拡張機能がインストールされていない場合、WorkSpace の外部で実行されている場合、またはグループポリシーで WebRTC リダイレクトが有効になっていない場合に正常に動作します。通常のブラウザでアプリケーションを開いてテストします。

リダイレクトあり

リダイレクトを有効にしてテストするには:

ベストプラクティス

WebRTC リダイレクトと統合する場合は、次の推奨事項に従ってください。

トラブルシューティング

リダイレクトが検出されません

オーディオまたはビデオが機能しない

再接続の問題

API リファレンス

プロキシ API の概要を次に示します。

interface DCVWebRTCProxy {
    // Version and client info
    getVersion(): string;
    clientInfo: {
        platform: 'web' | 'windows' | 'macOS' | 'linux';
        version: string;
        userAgent: string;
        browserDetails: { browser: string; version: string; };
    };

    // Core methods
    overrideWebRTC(): void;
    mapAudioElement(element: HTMLAudioElement): void;

    // Device management
    makeMediaDevicesProxy(): MediaDevices;

    // Status monitoring
    addStatusChangeEventListener(callback: (event: StatusChangeEvent) => void): void;
    resetHeartbeat(config: { heartbeatTimeoutMs: number, heartbeatIntervalPeriodMs: number }): void;

    // Access original (non-redirected) browser APIs
    overridenApis: Map<string, Function>;
}

interface StatusChangeEvent {
    status: 'available' | 'unavailable';
    lastHeartbeat?: number;
}