OpenVidu

https://openvidu.io/

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 => {

session.connect(token)
.then(() => {
document.getElementById(“session-header”).innerText = mySessionId;
document.getElementById(“join”).style.display = “none”;
document.getElementById(“session”).style.display = “block”;

  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”视图。