kurento 6.14.0文档翻译 第六章（第二部分） 教程

书接上回：kurento 6.14.0文档翻译 第六章（第一部分） 教程

 配置媒体处理逻辑：这部分是应用配置kurento怎么处理媒体，换句话说，媒体管道就是在这创建的，kurentoClient对象内创建MediaPipeline对象，使用它这个媒体元素需要我们创建和连接，在这个例子里，我们只是实例化一个WebRtcEndpoint对象去接收WebRTC流和发送它回到客户端。

创建事件监听：Kurento管理的所有对象都有能力发出几种类型的事件，如端点事件，应用程序服务器可以侦听它们，以便对媒体服务器的处理逻辑内部发生的事情有更深入的了解，最好的实践是监听所有的事件，所以客户端应用可获得更多的信息。

WebRTC SDP协商：（ps：SDP全称是Session Description Protocol，翻译过来就是描述会话的协议。主要用于两个会话实体之间的媒体协商。详细可以看https://www.jianshu.com/p/94b118b8fd97），在WebRTC内，SDP提议/应答  模型用于协商音频或者视频端之间的轨道，以及它们支持的功能，通过在一个对等方中生成一个SDP提议，将其发送给另一个对等方，并取回将作为响应而生成的SDP应答，来完成协商。

在这个特定的例子中，这个SDP提议通过浏览器产生并发送到kurento，它必须有一个SDP应答发回到浏览器。

收集ICE候选人：当这个SDP提议/应答协商已经发生，每个对等方都可以开始收集将用于ICE协议的连接候选者，这个处理工作是非常简单的，浏览器通过发出事件RTCPeerConnection.onicecandidate来通知其客户端代码每个新发现的候选对象；同样，kurento的webrtcendpoint使用IceCandidateFound.事件通知客户端应用聚集的候选人。

客户端逻辑

让我们查看客户端应用，在服务端调用之前创建的WebSocket服务，我们用javascript的WebSocket类，我们使用一个名为kurento-utils.js的特定Kurento JavaScript库简化WebRTC与服务器的交互，这个库是基于adapter.js, 这是JavaScript WebRTC由Google维护的实用程序，可抽象化浏览器之间的差异。这些库以Maven依赖项的形式进入项目，该依赖项从WebJars.org下载所有必需的文件。它们被加载到index.html页面中，并在index.js文件中使用。

接下来的片断我们能看到在路径为/helloworld创建了WebSocket，客户端通过onmessage监听websocket实现了json信令协议，注意客户端有三个传入消息：startResponse，error和iceCandidate，采取了方便的措施来实现通信中的每个步骤，例如在start方法内用了kurento-utils.js里的WebRtcPeer. WebRtcPeerSendrecv方法开始一个WebRTC通信。

const ws = new WebSocket('wss://' + location.host + '/helloworld');

ws.onmessage = function(message)

{

  const jsonMessage = JSON.parse(message.data);

  console.log("[onmessage] Received message: " + message.data);

  

  switch (jsonMessage.id) {

    case 'PROCESS_SDP_ANSWER':

      handleProcessSdpAnswer(jsonMessage);

      break;

    case 'ADD_ICE_CANDIDATE':

      handleAddIceCandidate(jsonMessage);

      break;

    case 'ERROR':

      handleError(jsonMessage);

      break;

    default:

      // Ignore the message

      console.warn("[onmessage] Invalid message, id: " + jsonMessage.id);

      break;

  }

}

依赖项

这个java spring应用使用maven实现，pom.xml的相关部分是声明Kurento依赖项的地方，以下片段显示我们需要两个依赖：kurento java客户端依赖（kurento-client），客户端依赖kurento javascript工具包（kurento-utils），其它客户端库由webjars管理。

6.1.2javascript-helloworld

这个web应用程序设计成为javascript开发者介绍使用kurento应用的原理，它包括一个webrtc视频通信的回环，这个教程是假设你有基本的javascript、html、webrtc知识，我们推荐在开始这一章之前你读过 介绍kurento（ps：第一章）。

运行这个例子。

首先你需要安装kurento媒体服务器，启动媒体服务并在后台运行。

安装Node.js,Bower和一个web服务到你的系统里：

我们建议使用简单的Node.js的http-server，但是你也可以用别的web服务。

在这个教程里你需要下载源码，从github上clone它，并启动服务

请注意，浏览器需要HTTPS才能启用WebRTC，所以web服务必须用SSL和一个证书文件，可以查看配置javascript应用使用https（ps:21章）,为了方便这个教程已经提供了自签名证书（但是浏览器也会有一个安全警告）

当你的web服务已经启动并运行，使用与WebRTC兼容的浏览器（firefox，chrome）打开教程页面：

如果KMS运行到你的本机

如果运行在远程机器

如果你想web服务器运行的远程的你必须要做以下三件事：

1. 配置KMS是安全的websocket，更多相关的信息看“安全的kurento媒体服务”(ps:第21章第2节)
2. 在index.js文件修改ws_url为安全的websocket（ws://换成wss://）, 正确的KMS端口（8433而不是8888）
3. 如第1步中的链接所述，如果您将KMS配置为使用带有自签名证书的安全 WebSocket，则现在必须浏览到https：// {KMS_HOST}：8433 / kurento并单击以接受不可信的证书。

理解这个例子

Kurento给开发者提供一个kurento javascript客户端控制kurento媒体服务，客户端库任何类型的javascript程序：桌面应用，手机浏览器。

这个helloworld演示了一个简单的web应用的kurento，以下图片为这个演示程序的运行截图

这个应用（一个html页面）由两个html5<video>标签组成：一个显示本地视频流（来源网络摄像头）另一个显示来源于媒体服务回传的远程流。

这个应用的逻辑很简单，本地流发送到kurento媒本服务，服务不修改的回传该流，实现这个行为，我们需要创建由单个媒体元素组成的媒体管道，比如WebRtcEndpoint，它具有交换webrtc媒体流的全双工能力（双向的），该媒体元素已连接到自身，以便发送（从浏览器）接收到的媒体返回（至浏览器），下图说明了这个媒体管道。

这是一个web应用，是C/S架构，不过基于这个事实，我们使用javascript客户端，这里不需要使用应用服务。应用的所有的逻辑都在浏览器，这个kurento的javascript客户端通过双向的websocket与KMS进行通信。

接下来章节将要分析客户端（javascript）代码，依赖和怎么运行这个程序，全部的源码可以从github上找到(https://github.com/Kurento/kurento-tutorial-js/tree/master/kurento-hello-world)

Javascript逻辑

这个kurento的hello-world是一个单页面架构（SPA），接口都在index.html页面，这个web页面链接两个javascript库

• kurento-client.js : 实现 Kurento 的JavaScript 客户端.

• kurento-utils.js : Kurento 工具库具有简单的WebRTC管理在浏览器里，此外这两个javascript库是必须的。

• Bootstrap : 开发好的web网站Web 框架

• jquery.js : 跨平台的javascript库，设计成简单的操作html

• adapter.js : 这是JavaScript WebRTC由Google维护的实用程序，可抽象化浏览器之间的差异.

• ekko-lightbox : Bootstrap里打开图片、视频和画廊的模块

• demo-console : 通用的JavaScript控制台

这个helloworld示例具体的逻辑都在index.js文件，在这个文件里，当点击这个界面的绿色start按钮就会调用这个方法

这个WebRtcPeer.WebRtcPeerSendrecv方法抽像了webrtc的内部细节，（比如PeerConnection 和 getUserStream）使得可以全双工的webrtc通信，使用html的video标签，id是videoInput显示本地视频流，id是videoOuput显示远程KMS提供的流。

在这个方法内部，调用generateOffer方法，这个方法接收一个SDP提议的回调，在这个回调我们创建了一个kurentoClient类的实例去管理与KMS的通信，所以我们需要提供一个指向WebSocket的URI，在这个例子我们假设它监听的是8888端口并与HTTP服务应用是同一个主机。

一旦我们有一个kurnetoClient实例，我们需要创建一个媒体管道，像以下一样

如果所有的都工作的很好，我们将有一个媒体管道实例（在这个例子是_pipeline变量），我们可以创建媒体元素在这个例子只要单个WebRtcEndpint

在WebRtc，SDP是用于媒体应用之前相互协商，这种协商基于SDP提议/答复交换机制，通过如下收集ICE候选者。

完成后，这个WebRtcEndpoint连接他自已（回环）

提示：TURN和STUN服务可以通过简单的在应用的URL添加ice_servers参数去完成配置，如

依赖

可以使用Bower获得此演示的所有依赖项，依赖的集合定义在bower.json文件：

获得这些依赖只需要运行以下命令就行

提示：我们正在积极发展，你可以找到kurneto javascript客户端的最新版本在bower（https://bower.io/search/?q=kurento-client）