OpenVidu 教程（1） - openvidu-hello-world

這是使用 OpenVidu 最簡單的教程。 它具有進行群組視頻通話的基本功能。 您只需幾分鐘就能讓第一個應用程序正常運行！

一、如何運行這個教程

1) 克隆教程:

git clone https://github.com/OpenVidu/openvidu-tutorials.git


2) 您需要在開發計算機中安裝http Web server 才能執行本教程。 如果安裝了node.js，則可以使用 http-server 來提供應用程序文件。 通過如下命令安裝：

npm install -g http-server


3) 運行教程:

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

http-server -S -C cert.pem openvidu-tutorials/openvidu-hello-world/web


4) openvidu-server 和 Kurento Media Server 必須在您開發計算機中啟動並運行。 最簡單的方法是使用Docker容器運行（也可以參考前一篇文字的安裝方式）：

docker run -p 4443:4443 --rm -e openvidu.secret=MY_SECRET openvidu/openvidu-server-kms


5）一旦伺服器運行，我們可以使用瀏覽器打開https://localhost:8080來測試應用程序。 第一次使用docker容器並加入視頻通話時，會提示您接受openvidu-server的自簽名證書。

如果您使用的是Windows，請閱讀此常見問題解答以正確運行本教程

要了解使用OpenVidu開發的一些技巧，請查看此常見問題解答

二、源碼解析

這個應用程序非常簡單。 它只有4個文件：

• openvidu-browser-VERSION.js：openvidu-browser 庫文件， 您不必操縱此文件。
• app.js：示例應用程序主JavaScritp文件，它使用了 openvidu-browser-VERSION.js。
• style.css：一些用於樣式index.html的CSS類。
• index.html：表單的HTML代碼，用於連接視頻通話。 它鏈接到兩個JavaScript文件：

<script src="openvidu-browser-VERSION.js"></script>
<scriptsrc="app.js"></script>


讓我們看看在 app.js 中如何使用openvidu-browser-VERSION.js：

第一行聲明了代碼中不同會話點所需的變數

var OV;
var session;


OV 是我們的 OpenVidu 對象（libray的入口點）。 session是我們視頻通話的連接。 作為joinSession() 方法中的第一句，將識別我們視頻調用的變數進行初始化，該視頻調用從HTML輸入中檢索值。

var mySessionId = document.getElementById("sessionId").value;


初始化 new session 及其 event

OV = new OpenVidu();
session = OV.initSession();

session.on(streamCreated, function (event) {
session.subscribe(event.stream, subscriber);
});


正如您在代碼中看到的，該過程非常簡單：獲取OpenVidu對象並使用它初始化Session對象。

然後，您可以訂閱會話所需的所有事件。 在這種情況下，我們只想訂閱會話中正在創建的每個流：在streamCreated上，我們訂閱特定的流，在event.stream屬性中可用。

您可以查看參考文檔中的所有事件

從OpenVidu Server獲取token

注意：這就是本教程是一個不安全的應用程序的原因。 我們需要向OpenVidu Server請求用戶令牌才能連接到我們的會話。 這個過程應該完全在我們的伺服器端進行，而不是在我們的客戶端。 但是由於本教程中缺少應用程序後端，JavaScript代碼本身將對OpenVidu Server執行POST操作

getToken(mySessionId).then(token => {
// See next point to see how to connect to the session using token
});


現在我們需要一個來自OpenVidu Server的token。 在生產環境中，我們使用 REST API，OpenVidu Java Client 或 OpenVidu Node Client 在應用程序後端執行此操作。 在這裡我們已經在一個getToken()方法中實現了向 OpenVidu Server 發送POST請求，這個 getToken 返回一個帶有token的Promise。 沒有太多細節，這個方法對 OpenVidu Server 執行兩個ajax請求，傳遞 OpenVidu Server secret來驗證它們：

• 首先，ajax執行POST請求到 /api /sessions（我們發送一個customSessionId欄位來命名會話，並使用從HTML輸入中檢索到的mySessionId值）
• 第二個Ajax將POST請求傳遞給 /api/token（我們發送一個sessionId欄位來將該token分配給同一個會話）

您可以在GitHub倉庫中詳細檢查此方法。

使用token連接到session

getToken(mySessionId).then(token => {

var publisher = OV.initPublisher("publisher");
session.publish(publisher);
})
.catch(error => {
console.log("There was an error connecting to the session:", error.code, error.message);
});
});


我們只需要調用session.connect 並向 OpenVidu Server 傳遞最近獲取到的token。 此方法返回您可以訂閱的Promise。

如果訂閱成功，我們首先將視圖設置為活動視頻會話。 然後繼續發布我們的攝像頭。 為此，我們需要使用 OpenVidu.initPublisher 方法生成發布者，一個顯示我們網路攝像頭的新HTML視頻將被添加到ID為「publisher」的元素內的頁面中。

最後比較重要的一點，我們發布這個 publisher 對象需要使用 session.publish。 此時，連接到此會話的其他用戶將觸發其自己的streamCreated事件，並可以開始觀看我們的網路攝像頭。

斷開會話

session.disconnect();


無論何時我們想要用戶斷開會話，我們只需要調用session.disconnect方法。 在這裡它會調用內部的 leaveSession 函數，當用戶點擊「LEAVE」按鈕時觸發。 該功能也將頁面返回到「Join session」視圖。