如何使用 ZEGOCLOUD 建立同性戀約會應用程式-js教程-PHP中文網

How to Build a Gay Dating App with ZEGOCLOUD

想要建立一個同性戀約會應用程式嗎？您需要良好的規劃和正確的工具。 ZEGOCLOUD 為您提供為 LGBTQ 社群創建安全空間所需的正確即時通訊工具。本指南向您展示如何為您的應用程式添加聊天和視訊通話等關鍵功能。您將學習設定應用程式和幫助用戶相互聯繫的基本步驟。

我們知道約會應用程式中的隱私問題，因此我們將向您展示如何確保用戶資料的安全。我們將介紹使約會應用程式正常運作的所有基本要素。無論您是開始第一個專案的開發人員還是希望進入市場的企業主，本指南都將幫助您創建 2025 年最好的同性戀約會應用程式之一。

如何建立同性戀視訊通話應用程式

ZEGOCLOUD 可以輕鬆為同性戀約會應用程式建立引人入勝的視訊通話功能。我們的服務旨在在用戶之間創建親密、安全和高品質的視訊連接。無論您是建立新的約會應用程式還是為現有平台添加影片功能，ZEGOCLOUD 的 Express Video SDK 都能提供您進行有意義的線上連線所需的一切。

在本節中，我們將使用 ZEGOCLOUD 的 Express Video SDK 為您的同性戀約會應用程式添加清晰的視訊通話功能。這將使您的用戶能夠無縫、安全地從基於文字的聊天轉變為面對面的對話。

ZEGOCLOUD Express 影片的主要特色：

高品質視訊通話：ZEGOCLOUD 提供水晶般清晰的視訊和音訊質量，實現流暢、自然的對話。我們的低延遲技術可確保即時通信，不會出現尷尬的延遲，使虛擬約會感覺更加個人化和有吸引力。
可靠的連線：我們的全球伺服器網路確保全球穩定的連線。 SDK 會自動處理較差的網路條件，即使網路條件不理想也能維持通話品質。
隱私控制：內建功能可讓使用者輕鬆控制他們的攝影機和麥克風。用戶可以快速切換影片或將自己靜音，確保他們始終感覺自己的隱私處於掌控之中。
**螢幕分享功能：**用戶可以在通話期間共享螢幕，非常適合共享照片、一起觀看內容或在虛擬約會期間展示他們最喜歡的線上內容。
跨平台支援：對行動和網路平台的支援確保您的用戶可以從任何裝置連接，使約會變得更加容易和方便。

先決條件

在我們開始之前，讓我們確保您擁有所需的一切：

註冊ZEGOCLOUD開發者帳號。
從ZEGOCLOUD管理儀表板取得您的AppID。
在您的電腦上安裝 Node.js。
確保您的專案設定為使用 npm 進行依賴項管理。
JavaScript 或 TypeScript 開發的基礎。
支援 WebRTC 的現代瀏覽器。
確保您的裝置已連接到網路。

1. 建立一個新項目

在整合視訊通話功能之前，您需要設定專案結構。

建立具有以下結構的專案資料夾：

project-folder/
├── index.html
├── index.js

登入後複製

新增 HTML 和 JavaScript 檔案：

index.html 將包含視訊通話介面的基本結構。
index.js 將保存初始化和管理 SDK 的所有邏輯。

範例：此程式碼將在我們的index.html中使用，為您的視訊通話應用程式提供基本使用者介面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gay Dating Video Call</title>
    <style>
        #video-container {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .video-wrapper {
            width: 48%;
            position: relative;
        }
        video {
            width: 100%;
            height: 400px;
            background-color: #000;
            border-radius: 12px;
        }
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            margin: 0 5px;
            border-radius: 20px;
            border: none;
            background: #ff4d7d;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background: #ff3366;
        }
    </style>
</head>
<body>
    <div id="video-container">
        <div class="video-wrapper">
            <video id="localVideo" autoplay muted></video>
        </div>
        <div class="video-wrapper">
            <video id="remoteVideo" autoplay></video>
        </div>
    </div>
    <div class="controls">
        <button id="toggleCamera">Toggle Camera</button>
        <button id="toggleMic">Toggle Mic</button>
        <button id="endCall">End Call</button>
    </div>
    <script src="index.js"></script>
</body>
</html>

登入後複製

2.安裝所需的SDK

使用 npm 安裝視訊通話所需的 SDK：

npm i zego-express-engine-webrtc

登入後複製

如果您在 macOS 或 Linux 上遇到權限錯誤，請使用 sudo:

sudo npm i zego-express-engine-webrtc

登入後複製

3.導入SDK

在您的index.js 檔案中，匯入用於視訊通話的 Zego Express 引擎：

import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

登入後複製

或者，如果您在非模組環境中工作，則可以使用 require：

const ZegoExpressEngine = require('zego-express-engine-webrtc').ZegoExpressEngine;

登入後複製

4.初始化SDK

在專案資料夾中建立一個名為index.js的新文件，並新增以下程式碼來初始化Zego Express引擎：

const appID = 123456789; // Replace with your actual AppID
const server = 'wss://your-server-url'; // Replace with your actual server URL
// Initialize the ZegoExpressEngine instance
const zg = new ZegoExpressEngine(appID, server);

登入後複製

5. 設定視訊通話邏輯

將此程式碼新增至您的index.js 檔案以處理視訊通話功能：

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

async function startVideoCall() {
    try {
        const userID = 'user_' + new Date().getTime();
        const token = 'your_token_here'; // Replace with your token
        const roomID = 'dating_room_' + Math.floor(Math.random() * 1000);

        // Log in to the room
        await zg.loginRoom(roomID, token, { userID, userName: userID });

        // Create and play the local video stream
        const localStream = await zg.createStream({
            camera: {
                video: true,
                audio: true
            }
        });
        localVideo.srcObject = localStream;

        // Publish the local stream
        await zg.startPublishingStream(`${roomID}_${userID}`, localStream);

        // Set up controls
        setupControls(localStream);

        // Listen for remote stream updates
        zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
            if (updateType === 'ADD') {
                const remoteStream = await zg.startPlayingStream(streamList[0].streamID);
                remoteVideo.srcObject = remoteStream;
            }
        });
    } catch (err) {
        console.error('Error starting video call:', err);
    }
}

// Set up control buttons
function setupControls(localStream) {
    const toggleCamera = document.getElementById('toggleCamera');
    const toggleMic = document.getElementById('toggleMic');
    const endCall = document.getElementById('endCall');

    let isCameraOn = true;
    let isMicOn = true;

    toggleCamera.onclick = async () => {
        isCameraOn = !isCameraOn;
        await zg.mutePublishStreamVideo(localStream, !isCameraOn);
        toggleCamera.textContent = isCameraOn ? 'Turn Off Camera' : 'Turn On Camera';
    };

    toggleMic.onclick = async () => {
        isMicOn = !isMicOn;
        await zg.mutePublishStreamAudio(localStream, !isMicOn);
        toggleMic.textContent = isMicOn ? 'Mute Mic' : 'Unmute Mic';
    };

    endCall.onclick = async () => {
        await zg.destroyStream(localStream);
        await zg.logoutRoom();
        zg.destroyEngine();
    };
}

// Start video call when page loads
window.onload = () => {
    startVideoCall();
};

登入後複製

6. 處理清理

當使用者離開頁面或結束通話時，請確保清理資源：

window.onbeforeunload = async () => {
    // Log out from the room
    await zg.logoutRoom();
    // Destroy the Zego Express Engine
    zg.destroyEngine();
};

登入後複製