WebRTC jQuery 插件

该插件能使两个浏览器间实现实时的音视频流传输。

安装

·下载并解压代码包
·把解压后代码放到你的网站目录下
·打开你的网站
·欣赏代码所呈现的应用

使用

首先把如下HTML代码片段加入到你的相应标签内

<!-- main container -->
<div id="mainContainer" class="main-container">
<!-- local video -->
<video id="localVideo" class="local-video"></video>
<!-- remote video -->
<video id="remoteVideo" class="remote-video" autoplay></video>
<!-- video status & room entry bar -->
<div id="videoStatus" class="video-status"></div>
</div>

</div>

然后把如下CSS放到head标签内

<link rel="stylesheet" href="css/fts-webrtc-styles.css">

1	<link rel="stylesheet" href="css/fts-webrtc-styles.css">

最后是通过JavaScript实现。代码如下：

<!-- JavaScript Ressources -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.fresh-tilled-soil-webrtc.js"></script>
<!-- Plugin Initialization -->
<script type="text/javascript">
$(function() {
$('#mainContainer').createVideoChat();
});
</script>

$(function() {

$('#mainContainer').createVideoChat();

});

</script>

完整的示例页面如下（把上述的放在一起）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fresh Tilled Soil Video Conference | WebRTC jQuery Plug-in Demo</title>
<!-- Stylesheet Resources -->
<link rel="stylesheet" href="css/fts-webrtc-styles.css">
</head>
<body>
<!-- main container -->
<div id="mainContainer" class="main-container">
<!-- local video -->
<video id="localVideo" class="local-video"></video>
<!-- remote video -->
<video id="remoteVideo" class="remote-video" autoplay></video>
<!-- video status & room entry bar -->
<div id="videoStatus" class="video-status"></div>
</div>
<!-- JavaScript Ressources -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.fresh-tilled-soil-webrtc.js"></script>
<!-- Plugin Initialization -->
<script type="text/javascript">
$(function() {
$('#mainContainer').createVideoChat();
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Fresh Tilled Soil Video Conference | WebRTC jQuery Plug-in Demo</title>

</head>

<body>

</div>

$(function() {

$('#mainContainer').createVideoChat();

});

</script>

</body>

</html>

浏览器支持情况

被赋予WebRtc新颖特性的JQuery插件已经支持主流的浏览器，这些浏览器支持最近起草的WebRtc标准，如下列表列出了最近支持该标准的浏览器：
Chrome
Chrome Beta for Android (for tablet & mobile phone support)
FireFox
Internet Explorer 10 (requires Google Chrome Frame plug-in)
Chromium
Chrome Canary
FireFox Aurora
FireFox Nightly

代码下载地址：webrtc-jquery-plugin-master

示例页面：基于WebRTC的简单在线视频聊天系统