基于 SimpleWebRTC 实现网页在线视频聊天

学习笔记 马富天 2016-09-10 16:56:12 80 1

【摘要】大三大四的时候就特别想做一个在线视频聊天室,后来一直在尝试的实现它,可是一年过去了也没有实现这个功能,本来想做一个在线面试的毕业设计的,最终没有实现。今天终于完成了这个功能,是基于 SimpleWebRTC 实现的在线视频聊天。

直接看网页源代码吧,将下面的代码直接复制到HTML文件中,放置在本地服务器下访问它就可以实现在线聊天了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  6.     <script src="http://simplewebrtc.com/latest.js"></script>
  7.     <script>
  8.  
  9.         var webrtc = new SimpleWebRTC({
  10.             // the id/element dom element that will hold "our" video
  11.             localVideoEl: 'localVideo',
  12.             // the id/element dom element that will hold remote videos
  13.             remoteVideosEl: 'remoteVideos',
  14.             // immediately ask for camera access
  15.             autoRequestMedia: true,
  16.             //url:'http://111.172.238.250:8888'
  17.             nick: 'wuhan'
  18.         });
  19.  
  20.  
  21.  
  22.         // we have to wait until it's ready
  23.         webrtc.on('readyToCall', function () {
  24.             // you can name it anything
  25.             webrtc.joinRoom('room1');
  26.  
  27.             // Send a chat message
  28.             $('#send').click(function () {
  29.                 var msg = $('#text').val();
  30.                 webrtc.sendToAll('chat', { message: msg, nick: webrtc.config.nick });
  31.                 $('#messages').append('<br>You:<br>' + msg + '\n');
  32.                 $('#text').val('');
  33.             });
  34.         });
  35.  
  36.         //For Text Chat ------------------------------------------------------------------
  37.         // Await messages from others
  38.         webrtc.connection.on('message', function (data) {
  39.             if (data.type === 'chat') {
  40.                 console.log('chat received', data);
  41.                 $('#messages').append('<br>' + data.payload.nick + ':<br>' + data.payload.message+ '\n');
  42.             }
  43.         });
  44.         
  45.     </script>
  46.     <style>
  47.         #remoteVideos video {
  48.             height: 150px;
  49.         }
  50.  
  51.         #localVideo {
  52.             height: 150px;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <textarea id="messages" rows="5" cols="20"></textarea><br />
  58.     <input id="text" type="text" />
  59.     <input id="send" type="button" value="send" /><br />
  60.     <video id="localVideo"></video>
  61.     <div id="remoteVideos"></div>
  62. </body>
  63. </html>

运行效果如下图:

请输入图片名称

至于实现的原理就在此不做细谈了,只要实现功能即可。

版权归 马富天PHP博客 所有

本文标题:《基于 SimpleWebRTC 实现网页在线视频聊天》

本文链接地址:http://www.mafutian.net/200.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

1

1

上一篇《 Ubuntu14.04安装php-Redis和简单配置 》 下一篇《 phpMyAdmin 的安装简介 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码