该插件能使两个浏览器间实现实时的音视频流传输。
安装
·下载并解压代码包
·把解压后代码放到你的网站目录下
·打开你的网站
·欣赏代码所呈现的应用
使用
首先把如下HTML代码片段加入到你的相应标签内
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 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> |
然后把如下CSS放到head标签内
|
1 |
<link rel="stylesheet" href="css/fts-webrtc-styles.css"> |
最后是通过JavaScript实现。代码如下：
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 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> |
完整的示例页面如下（把上述的放在一起）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!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> |
浏览器支持情况
被赋予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的简单在线视频聊天系统
文章评论