基于Chrome、Java、WebSocket、WebRTC实现浏览器视频通话
介绍
最近这段时间折腾了一下 WebRTC，看了网上的 https://apprtc.appspot.com/的例子（可能需要访问），这个例子是部署在Google App Engine上的应用程序，依赖GAE的环境，后台的语言是python，而且还依赖Google App Engine Channel API，所以无法在本地运行，也无法扩展。费了一番功夫研读了例子的python端的源代码，决定用Java实现，Tomcat7之后开始支持WebSocket，打算用WebSocket代替Google App Engine Channel API实现前后台的通讯，在整个例子中Java+WebSocket起到的作用是负责客户端之间的通信，并不负责视频的传输，视频的传输依赖于WebRTC。
实例的特点是：
- HTML5
- 不需要任何插件
- 资源占用不是很大，对服务器的开销比较小，只要客户端建立连接，视频传输完全有浏览器完成
- 通过JS实现，理论上只要浏览器支持WebSocket，WebRTC就能运行（目前只在Chrome测试通过，Chrome版本24.0.1312.2 dev-m）
实现
对于前端JS代码及用到的对象大家可以访问 http://www.html5rocks.com/en/tutorials/webrtc/basics/查看详细的代码介绍。我在这里只介绍下我改动过的地方，首先建立一个客户端实时获取状态的连接，在GAE的例子上是通过GAE Channel API实现，我在这里用WebSocket实现，代码：
function openChannel() {
console.log("Opening channel.");
socket = new WebSocket(
"ws://192.168.1.102:8080/RTCApp/websocket?u=${user}");
socket.onopen = onChannelOpened;
socket.onmessage = onChannelMessage;
socket.onclose = onChannelClosed;
}
package org.rtc.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.rtc.websocket.WebRTCMessageInbound;
@WebServlet(urlPatterns = { "/websocket"})
public class WebRTCWebSocketServlet extends WebSocketServlet {
private static final long serialVersionUID = 1L;
private String user;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.user = request.getParameter("u");
super.doGet(request, response);
}
@Override
protected StreamInbound createWebSocketInbound(String subProtocol) {
return new WebRTCMessageInbound(user);
}
}
package org.rtc.websocket;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.WsOutbound;
public class WebRTCMessageInbound extends MessageInbound {
private final String user;
public WebRTCMessageInbound(String user) {
this.user = user;
}
public String getUser(){
return this.user;
}
@Override
protected void onOpen(WsOutbound outbound) {
//触发连接事件，在连接池中添加连接
WebRTCMessageInboundPool.addMessageInbound(this);
}
@Override
protected void onClose(int status) {
//触发关闭事件，在连接池中移除连接
WebRTCMessageInboundPool.removeMessageInbound(this);
}
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
throw new UnsupportedOperationException(
"Binary message not supported.");
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
}
}
package org.rtc.websocket;
import java.io.IOException;
import java.nio.CharBuffer;
import java.util.HashMap;
import java.util.Map;
public class WebRTCMessageInboundPool {
private static final Map connections = new HashMap();
public static void addMessageInbound(WebRTCMessageInbound inbound){
//添加连接
System.out.println("user : " + inbound.getUser() + " join..");
connections.put(inbound.getUser(), inbound);
}
public static void removeMessageInbound(WebRTCMessageInbound inbound){
//移除连接
connections.remove(inbound.getUser());
}
public static void sendMessage(String user,String message){
try {
//向特定的用户发送数据
System.out.println("send message to user : " + user + " message content : " + message);
WebRTCMessageInbound inbound = connections.get(user);
if(inbound != null){
inbound.getWsOutbound().writeTextMessage(CharBuffer.wrap(message));
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
大家可以看看这段代码：
function openChannel() {
console.log("Opening channel.");
socket = new WebSocket(
"ws://192.168.1.102:8080/RTCApp/websocket?u=${user}");
socket.onopen = onChannelOpened;
socket.onmessage = onChannelMessage;
socket.onclose = onChannelClosed;
}
package org.rtc.servlet;
import java.io.IOException;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
import org.rtc.room.WebRTCRoomManager;
@WebServlet(urlPatterns = {"/room"})
public class WebRTCRoomServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String r = request.getParameter("r");
if(StringUtils.isEmpty(r)){
//如果房间为空，则生成一个新的房间号
r = String.valueOf(System.currentTimeMillis());
response.sendRedirect("room?r=" + r);
}else{
Integer initiator = 1;
String user = UUID.randomUUID().toString().replace("-", "");//生成一个用户ID串
if(!WebRTCRoomManager.haveUser(r)){//第一次进入可能是没有人的，所以就要等待连接，如果有人进入了带这个房间好的页面就会发起视频通话的连接
initiator = 0;//如果房间没有人则不发送连接的请求
}
WebRTCRoomManager.addUser(r, user);//向房间中添加一个用户
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + request.getContextPath() +"/";
String roomLink = basePath + "room?r=" + r;
String roomKey = r;//设置一些变量
request.setAttribute("initiator", initiator);
request.setAttribute("roomLink", roomLink);
request.setAttribute("roomKey", roomKey);
request.setAttribute("user", user);
request.getRequestDispatcher("index.jsp").forward(request, response);
}
}
}
function initialize() {
console.log("Initializing; room=${roomKey}.");
card = document.getElementById("card");
localVideo = document.getElementById("localVideo");
miniVideo = document.getElementById("miniVideo");
remoteVideo = document.getElementById("remoteVideo");
resetStatus();
openChannel();
getUserMedia();
}
function getUserMedia() {
try {
navigator.webkitGetUserMedia({
'audio' : true,
'video' : true
}, onUserMediaSuccess, onUserMediaError);
console.log("Requested access to local media with new syntax.");
} catch (e) {
try {
navigator.webkitGetUserMedia("video,audio",
onUserMediaSuccess, onUserMediaError);
console
.log("Requested access to local media with old syntax.");
} catch (e) {
alert("webkitGetUserMedia() failed. Is the MediaStream flag enabled in about:flags?");
console.log("webkitGetUserMedia failed with exception: "
+ e.message);
}
}
}
function onUserMediaSuccess(stream) {
console.log("User has granted access to local media.");
var url = webkitURL.createObjectURL(stream);
localVideo.style.opacity = 1;
localVideo.src = url;
localStream = stream;
// Caller creates PeerConnection.
if (initiator)
maybeStart();
}
function maybeStart() {
if (!started && localStream && channelReady) {
setStatus("Connecting...");
console.log("Creating PeerConnection.");
createPeerConnection();
console.log("Adding local stream.");
pc.addStream(localStream);
started = true;
// Caller initiates offer to peer.
if (initiator)
doCall();
}
}
function doCall() {
console.log("Sending offer to peer.");
if (isRTCPeerConnection) {
pc.createOffer(setLocalAndSendMessage, null, mediaConstraints);
} else {
var offer = pc.createOffer(mediaConstraints);
pc.setLocalDescription(pc.SDP_OFFER, offer);
sendMessage({
type : 'offer',
sdp : offer.toSdp()
});
pc.startIce();
}
}
function setLocalAndSendMessage(sessionDescription) {
pc.setLocalDescription(sessionDescription);
sendMessage(sessionDescription);
}
function sendMessage(message) {
var msgString = JSON.stringify(message);
console.log('发出信息 : ' + msgString);
path = 'message?r=${roomKey}' + '&u=${user}';
var xhr = new XMLHttpRequest();
xhr.open('POST', path, true);
xhr.send(msgString);
}package org.rtc.servlet;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import javax.servlet.ServletException;
import javax.servlet.ServletInputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.rtc.room.WebRTCRoomManager;
import org.rtc.websocket.WebRTCMessageInboundPool;
@WebServlet(urlPatterns = {"/message"})
public class WebRTCMessageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
super.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String r = request.getParameter("r");//房间号
String u = request.getParameter("u");//通话人
BufferedReader br = new BufferedReader(new InputStreamReader((ServletInputStream)request.getInputStream()));
String line = null;
StringBuilder sb = new StringBuilder();
while((line = br.readLine())!=null){
sb.append(line); //获取输入流，主要是视频定位的信息
}
String message = sb.toString();
JSONObject json = JSONObject.fromObject(message);
if (json != null) {
String type = json.getString("type");
if ("bye".equals(type)) {//客户端退出视频聊天
System.out.println("user :" + u + " exit..");
WebRTCRoomManager.removeUser(r, u);
}
}
String otherUser = WebRTCRoomManager.getOtherUser(r, u);//获取通话的对象
if (u.equals(otherUser)) {
message = message.replace("\"offer\"", "\"answer\"");
message = message.replace("a=crypto:0 AES_CM_128_HMAC_SHA1_32",
"a=xrypto:0 AES_CM_128_HMAC_SHA1_32");
message = message.replace("a=ice-options:google-ice\\r\\n", "");
}
//向对方发送连接数据
WebRTCMessageInboundPool.sendMessage(otherUser, message);
}
}
function onChannelMessage(message) {
console.log('收到信息 : ' + message.data);
if (isRTCPeerConnection)
processSignalingMessage(message.data);//建立视频连接
else
processSignalingMessage00(message.data);
}
function processSignalingMessage(message) {
var msg = JSON.parse(message);
if (msg.type === 'offer') {
// Callee creates PeerConnection
if (!initiator && !started)
maybeStart();
// We only know JSEP version after createPeerConnection().
if (isRTCPeerConnection)
pc.setRemoteDescription(new RTCSessionDescription(msg));
else
pc.setRemoteDescription(pc.SDP_OFFER,
new SessionDescription(msg.sdp));
doAnswer();
} else if (msg.type === 'answer' && started) {
pc.setRemoteDescription(new RTCSessionDescription(msg));
} else if (msg.type === 'candidate' && started) {
var candidate = new RTCIceCandidate({
sdpMLineIndex : msg.label,
candidate : msg.candidate
});
pc.addIceCandidate(candidate);
} else if (msg.type === 'bye' && started) {
onRemoteHangup();
}
}请教
还有一个就自己的一个疑问，我定义的WebSocket失效时间是20秒，时间太短了。希望大家指教一下如何设置WebSocket的失效时间。
截图
演示地址
你可以和你的朋友一起进入 http://blog.csdn.net/leecho571/article/details/8207102 ，感受下Ext结合WebSocket、WebRTC构建的即时通讯
建议大家将chrome升级至最新版本 http://www.google.cn/intl/zh-CN/chrome/browser/eula.html?extra=devchannel&platform=win
源码下载
http://download.csdn.net/detail/leecho571/5117399
大家可以按照这种思路去自己实现，建议大家最好用Chrome浏览器进行测试。
大家可以进群：197331959进行交流。