1 实现方法

复制下面的代码，保存为一个html文件

　　修改里面的nick：‘wuhan’为自己的名字，用firefox或chrome打开，即可开始测试。

2 效果

界面简陋了点，上面是收发消息，下面是本地和远程的视频图：

3 原理

先简单介绍下SimpleWebRTC，它是WebRTC的一个封装类库。

WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量，但实际应用编程还是有点复杂，尤其调用RTCPeerConnection必须对怎样建立连接、交换信令的流程和细节有较深入的理解。因此有高人为我们开发了WebRTC封装库，将WebRTC的调用细节封装起来，包装成更简单的API，使开发应用程序更简单。封装库的还有一个目的是为了屏蔽不同浏览器之间的差异，比如上面说的API名称的差异。当然，这些库都是开源的，能够依据自己的须要又一次改动。

眼下网上找到的有两种WebRTC封装库，一个是webrtc.io，网址是，上面有具体说明和用法，有非常多demo使用它；还有一个是SimpleWebRTC，网址是，貌似比webrtc.io用起来更简单。

3.1 视频聊天

这是官方第一个demo，三步创建视频聊天：

3.1.1 html页面

3.1.2 创建web RTC对象

var webrtc = new SimpleWebRTC({  // the id/element dom element that will hold "our" video  localVideoEl: 'localVideo',  // the id/element dom element that will hold remote videos  remoteVideosEl: 'remotesVideos',  // immediately ask for camera access  autoRequestMedia: true});

3.1.3 进入房间

// we have to wait until it's readywebrtc.on('readyToCall', function () {  // you can name it anything  webrtc.joinRoom('wuhan');});

3.2 文本聊天

这个是最基本的功能，但官方文档里居然没有介绍，很奇怪。

3.2.1 html内容

3.2.2 发消息

// Send a chat message$('#send').click(function () {   var msg = $('#text').val();   webrtc.sendToAll('chat', { message: msg, nick: webrtc.config.nick });   $('#messages').append('
You:
' + msg + '\n');   $('#text').val('');});

3.3.3 收消息

// Await messages from others  webrtc.connection.on('message', function (data) {      if (data.type === 'chat') {          console.log('chat received', data);          $('#messages').append('
' + data.payload.nick + ':
' + data.payload.message+ '\n');      }  });

转载于:https://www.cnblogs.com/wolfocme110/p/5544748.html

你可能感兴趣的文章