使用HTML5网络 RTC ROAP ( RTC网络提供应答协议) 模型进行视频聊天

分享于 

19分钟阅读

Web开发

  繁體

介绍

对于网络爱好者来说,这将是一篇有趣的文章,同时也是对多媒体非常感兴趣的文章。 你知道技术的增长速度,我们可以说每一天都是一个革命。 我想要introdue我们的英雄"html5"被认为是网络领域的革命性。 很快你会注意到这个人是如何能够让许多事情发生的 !

HTML5是世界范围内最新和最伟大的核心语言版本。 HTML5是HTML的超集。 HTML5在设计和构建网络技术方面做了一场革命。 Javascript是官方脚本语言,因为添加了许多支持新功能的Javascript api,所以它只能被认为是HTML5支持的语言。 HTML5绝对是一个进行中的工作。 它在 2004开始恢复,正式规范可能直到才真正完整。

什么是 HTML5?

HTML5是由一系列的技术组成的。 它包含了HTML标记本身,它已经扩展为包含一些新元素;。 而且还包括JavaScript和一组全新的JavaScript api,这些api可以供你使用。

  • HTML5是关于多媒体的。
  • 它是关于更具描述性的标记。
  • 是关于富互联网客户的。 不使用 Plug-Ins 构建客户端,如 Flash。
  • HTML5是客户端存储和缓存功能。
  • 它的全部内容是让网页更有响应。
  • 它都是高级选择器,动画。
  • 它的全部位置。
  • 我们可以说HTML5是所有这些技术的家族。

HTML5支持的特性

  • 视频
  • 音频
  • 二维和 3D 图形
  • 脱机缓存
  • 增强表单
  • 网络插座
  • 地理位置
  • 拖放&拖放
  • 网络worker
  • 本地存储

家庭的支持者

  • HTML: 它提供了HTML页面的结构。
  • JavaScript: 为HTML页面提供操作。
  • CSS3: 为html页面提供设计。

Background

很多人都看到了很多实时应用,其中之一就是视频聊天。 在 buddy的帮助下,实时通讯实现变得非常简单。 HTML5支持通过 to ( 网络实时通信。) 实现实时通信,我想介绍 HTML5 ( 网络 RTC ) 支持的特性和实现视频聊天功能所需的步骤。 就像我所解释的,HTML5是技术家族,我将使用一些家族成员如网络套接字。HTML5视频标签和支持 Javacript api的网络RTC实现视频聊天。

Prerequists

我们需要设置 web socket服务器和web服务器来完成或者要求在HTML5中实现视频聊天。 below 是创建视频聊天环境的步骤。

  • VC++运行时:我们需要使用运行时来执行它的某些模块。 因此,请安装VC++运行时作为第一步,你可以找到可以执行下载链接: 这里是
  • python 2.7.3: 我们需要的web socket服务器也使用 python 运行时。 请安装 python 2.7,因为仅使用这里版本测试应用程序。 你可以找到下载链接: 这里是
  • Nodejs: Node.js 是为编写高度可以伸缩的互联网应用程序而设计的软件系统,特别是web服务器。 所以要安装 web socket,任何用Javascript编写的web socket服务器。 你可以在这里找到下载链接
  • 网络套接字服务器 1.0.3: 请使用以下步骤安装 web socket服务器:
  • 打开 命令提示符.
  • 移动nodejs安装目录。
  • 类型"安装 websocket@1.0.3"
  • Chrome V.21. 0.1180.89: 使用ROAP模型开发。 由于最新的Chrome 浏览器在实现远程通信方面有一些更新,而且它使用的实现模型是 JSEP ( Javascript会话建立协议)。 基于 Chrome的新版本视频聊天将在下一系列视频聊天教程中讲述。 你可以找到指定 Chrome 版本的下载链接: 这里是

    注意:如果已经安装了 Chrome 浏览器,请将它的卸载,并使用 Chrome 版本 21.0.118下载。 不安装下载的Chrome。 下面是将 Chrome 浏览器作为独立使用的步骤。

  • 如果已经安装,则卸载 Chrome 浏览器。
  • 使用winrar解压下载的Chrome 版本 21.0.118 0.89.
  • 再次解压缩获取的压缩文件。
  • 移动到解压目录并复制 chrome.exe 到相同级别的目录 exisitng。
  • 单击 chrome.exe 以将它的用作独立浏览器。
  • 请按照下面的步骤让应用程序按预期工作。 这是在大量 R 和D 工作之后观察到的。

使用应用程序

要运行应用程序,我们需要确保正确地遵循了 上面 所规定的步骤。 接下来是宿主应用程序的宿主和 web socket服务器的启动。 以下是观看视频聊天演示的步骤:

注意:server。js是服务器文件的NAME。 一旦启动服务器,你就可以看到命令提示的样子

注意:请确保两者都位于同一网络中,并且你不是 behind 任何代理服务器。 这是因为代理服务器有时可能阻塞ws协议。

  • 连接网络凸轮,如果它是桌面PC或者忽略笔记本电脑的内置凸轮。
  • 在任何web服务器( 可能是apache或者 IIS ) 下载演示项目并将它的托管
  • 下载本文提供的服务器javascript文件,并将它的放在nodejs安装目录中。
  • 使用以下步骤启动 web socket服务器
  • 打开命令提示符
  • 移动到nodejs安装目录
  • 类型 server.js"
  • 移动到视频聊天应用程序目录( 承载在web服务器上) 并打开位于js目录中的main.js 文件。
  • 更改文件 IE的第一行,将ip地址替换为 web socket服务器运行的地址
    ( 在 Ex:var socket=new服务器上使用 WebSocket('ws://: 1337/') ;( 替换标记为 web socket服务器的ip地址)。 它通常是你的系统的IP。
  • :Chrome 浏览器and在地址栏中输入"在视频元素中启用媒体源 API"chrome://flags,请启用和"启用 peerconnection"标志,因为HTML5功能仍处于开发中,而且不可用。

  • 使用独立 Chrome 访问web服务器中承载的视频聊天应用程序。
  • 从其他系统中访问视频聊天应用程序,该系统作为应用程序的对等点。
  • 使用任何 NAME 登录,将显示在你的应用程序的好友列表中。
  • 使用放置在第一个视频元素下面的开始按钮启动流
  • 浏览器提示你允许启动相机,请点击 yes"。
  • 你可以找到视频流。 另一个对等点在另一个对等点上。
  • 所以一旦视频从web凸轮提取出来,点击流按钮开始交换 iframe,然后跟随内容。
  • 最后,你在第二个视频元素中找到你的好友视频,反之亦然。

使用代码( 生成应用程序)

HTML5提供了一个非常有趣的功能网络 RTC。 这个网络RTC提供了一种实时通信方式,不需要任何第三方插件。 就像你所知,最新的谷歌挂起使用gtalk插件来实现视频聊天。 但是这个网络RTC提供了一个干净的方法来实现视频聊天,没有任何困难,没有任何第三方插件或者模块的介入。 提供的视频标签和api可以很容易地为你提供你的方式。 为了实现视频聊天,应用程序经历了三个阶段:

  • 获取 videostream。( 从连接的视频设备)
  • 通过连接到Google服务器获取 SDP ( 会话描述协议)
  • 使用 web socket服务器与对等点交换 SDP,反之亦然。( 信令)

获取视频流

Web提供了一个非常好和有趣的api来从连接的视频设备获取视频流。 接收到流之后,流将作为源添加到视频标记中,你可以在其中查看视频设备的实时数据。 所有的Web RTC javascript都是事件驱动的和基于回调的。 在这里你可以找到执行相同操作的代码段:

try{
 //Get the reference of video elements. sourcevid = document.getElementById('liveVideo');
 remotevid = document.getElementById('remotevideo');
 //Get the video stream from the connected deivce.//Api to fetch the user media that is the meida from connected device. You can observer here successCallback and errorCallbacks navigator.webkitGetUserMedia({audio: true, video: true}, successCallback, errorCallback);
}catch (e) {
 //getUserMedia("video,audio", successCallback, errorCallback); navigator.webkitGetUserMedia("video,audio", successCallback, errorCallback);
}//On success of fetching the video the underlying function is called with argument as stream object.function successCallback(stream) {
 //Provide the stream object to video element. sourcevid.src = window.webkitURL.createObjectURL(stream);
 localStream = stream;
}
 //On Error of fetching the video the underlying function is called with argument as error object.function errorCallback(error) {
 //log the error code to the console. It can be viewed in the inspect element of the browser. console.error('An error occurred: [CODE ' + error.code + ']');
}

获取 SDP

iframe代表会话描述协议,它的中包含Ip地址。视频格式等等的所有细节。 这可以通过使用 webkitPeerConnection API连接到Google服务器来获得。 你可以找到执行相同操作的代码 Fragment。

try{
 //Create peerconnection object with the arguments as Google STUN server and callback function on success peerConn = new webkitDeprecatedPeerConnection("STUN stun.l.google.com:19302", onSignal);
}catch (e)
{
 try {
 //This is the API which is supported in chrome which we are referring in this tutorial. Now this is replaced by webkitPeerConnection00(JSEP model) peerConn = new webkitPeerConnection("STUN stun.l.google.com:19302", onSignal);
 }
 catch (e)
 {
 //This prints the messsage in the chrome console. You can open chrome console to see if any errors.(Inspect element) console.log("Failed to create PeerConnection, exception:" + e.message);
 }
}

webkitPeerConnection 接受两个参数。 第一个是google服务器位置,第二个是接收SDP消息的成功回调函数。 因此一旦收到SDP消息,那么就使用 web socket服务器将消息发送到对等点。 这个过程称为"信号符号"。 信号不是网络RTC的一部分。 你需要选择或者找到使用某些方法在对等点之间握手的方法。 在这里,我选择了 web socket服务器来实现信令部分,因为它是HTML5支持的新特性。

使用 web socket服务器与对等方交换 SDP

从谷歌STUN服务器收到SDP消息后,SDP消息被发送到 web socket服务器。 web socket服务器又将它发送到连接的远程对等方。 web socket服务器是用JavaScript编写的,我们将在本文后面的部分讨论它。 一旦远程对等方接收到 iframe,它将处理消息,并且将会摘要它的内容。 现在,它是远程对等方的角色,用同样的方式将它的发送到它的远程对等( 发送SDP的人)。 第一个对等方从远程对等方接收到SDP消息后立即对它的进行摘要。 这种握手方式通过网络套接字服务器进行握手。 代码Fragment显示了如何接收和发送 SDP。

//This is a success call back function which receives SDP message from the Google STUN server.function onSignal(message) 
{
 //As soon as the SDP is received from Google STUN server it is messaged to websocket server. socket.send(message);
}//register the event which is invoked when websocket sends the message.// accept connection request socket.addEventListener("message", onMessage, false);
 function onMessage(evt) {
 console.log("RECEIVED:"+evt.data);
 if (!started) {
 createPeerConnection();
 console.log('Adding local stream...');
 peerConn.addStream(localStream);
 started = true;
 }
 // Message returned from other side console.log('Processing signaling message...');
 peerConn.processSignalingMessage(evt.data);
 }

这里还有许多检查和条件,但在代码Fragment中没有显示。 所涉及的主要逻辑和api集中在。 下载演示应用程序后,你可以遍历所有的检查和条件。 这里函数在远程对等方中调用。

web socket服务器( 服务器。js )

Web socket服务器是负责信令部分的人。 它接收来自对等点的消息并将消息发送给。 HTML5完全支持 web socket特性,web socket服务器的一个主要优势是,连接是持久的。 web socket现在只支持utf8文本数据和对二进制数据的部分支持。 在nodejs上运行的web socket服务器的代码段为 below:

var WebSocketServer = require('websocket').server;var http = require('http');var clients = [];var server = http.createServer(function(request, response) {
});//Log the message on which the server is listening.server.listen(1337, function() {
 console.log(" Server is listening on port 1337");
});// create the serverwsServer = new WebSocketServer({
 httpServer: server
});//Log if any errorfunction sendCallback(err) {
 if (err) console.error("send() error:" + err);
}//This is called when any client connects to the server.wsServer.on('request', function(request) {
 console.log(' Connection from origin ' + request.origin + '.');
 var connection = request.accept(null, request.origin);
 console.log(' Connection ' + connection.remoteAddress);
 clients.push(connection);
 //All the messages are handled here connection.on('message', function(message) {
 if (message.type === 'utf8') {
 // Display the received message console.log(' Received Message ' + message.utf8Data);
 //Broadcast to all the users connected. clients.forEach(function (outputConnection) {
 if (outputConnection!= connection) {
 outputConnection.send(message.utf8Data, sendCallback);
 }
 });
 }
 });
 connection.on('close', function(connection) {
 // close user connection console.log((new Date()) + " Peer disconnected."); 
 });
});

因为 web socket服务器被认为是回送服务器并且只支持文本数据。 你可以下载服务器代码并遍历它以了解实现。 connection.on('message', function(message) 是服务器在这里处接收消息的主要部分。 使用条件解释消息,并处理这些消息以执行所需的操作。 web socket在这里充当信令 medium。 WebRTC中的任何信令过程,如SIP服务器,广告歌,但在Html5中也是一个重要概念,我使用 web socket来更好地理解它。

Points of Interest

这是一个非常有趣的概念,只是使用HTML5的特性来实现视频聊天。 这让我想到了客户端和服务器。 我非常喜欢做它,因为它给了我的大脑一些工作。 实际上当你下载应用程序并遍历时,你会发现有些事情很烦人。 它需要一些时间来了解在对等点上运行哪部分代码,因为本地和远程对等方都运行相同的脚本 https://www.codeproject.com/script/Forums/Images/smiley_smile.gif。 你可以通过一个代码来清除你的许多疑虑。 我在做这些事情时有很好的经验。 请花一些时间去分析和分析代码,你会很喜欢的。

要注意的点:

  • HTML5是一系列技术。
  • Javascript是HTML5的官方语言。
  • HTML5支持使用网络RTC进行实时通信
  • web sockets支持utf8文本和二进制数据。
  • SDP代表会话描述协议( 从SIP派生的术语)
  • SDP包含建立会话。数据格式。编解码器详细信息等会话所需的所有信息。
  • web socket协议是持久的( 保持连接的状态)
  • web socket服务器可以有效地用于基于文本的聊天应用程序。

便笺

这里演示使用ROAP模型,Chrome 版本 上面 20和 below 22支持该模型。 最新的Chrome 使用JSEP模型,在实现方法中有细微的变化。 JSEP模型可以成为网络RTC的final 和稳定方法。 JSEP使用 xmlHttpRequest 进行信号处理。 JSEP模型演示将在下一篇文章中展示。 使用JSEP模型,应用程序可以在最新的Chrome 版本中运行。 请为本文投票并根据需要提供建议。


WEB  模式  Html5  视频  proto  protocol  
相关文章