Webrtc WebSocket实现音视频通讯
来源:互联网 发布:在淘宝买手机可靠吗 编辑:程序博客网 时间:2024/05/23 01:59
一般的浏览器都集成了webrtc的功能,因此是不需要webrtc服务器就可以在局域网内进行点对点的音视频通讯。
本文主要利用websocket进行通讯,支持个google浏览器,无法兼容Firefox浏览器,同时对于Tomcat要求8.0以上,同时由于最新的webrtc要么用localhost访问,如果要用IP访问,则只能用https协议进行访问,因此这些都是需要解决的问题,本文只是一个demon程序。
<%@ page language="java" pageEncoding="UTF-8" %><!DOCTYPE html><html><head> <title>Java后端WebSocket的Tomcat实现</title></head><body> Welcome<br/><input id="text" type="text"/> <button onclick="send()">发送消息</button> <hr/> <button onclick="closeWebSocket()">关闭WebSocket连接</button> <hr/> <div id="message"></div> <video id="vid1" width="640" height="480" autoplay></video><video id="vid2" width="640" height="480" autoplay></video><br><a id="create" href="/Websocket/#true" onclick="init()">点击此链接新建聊天室</a><br><p id="tips" style="background-color:red">请在其他浏览器中打开:http://此电脑 加入此视频聊天</p></body><script type="text/javascript">var isCaller = window.location.href.split('#')[1]; var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8080/Websocket/websocket"); } else { alert('当前浏览器 Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function () { setMessageInnerHTML("WebSocket连接发生错误"); }; //连接成功建立的回调方法 websocket.onopen = function () { setMessageInnerHTML("WebSocket连接成功"); } // 创建PeerConnection实例 (参数为null则没有iceserver,即使没有stunserver和turnserver,仍可在局域网下通讯)var pc = new webkitRTCPeerConnection(null);// 发送ICE候选到其他客户端pc.onicecandidate = function(event) {setMessageInnerHTML("我看看 1");if (event.candidate !== null) {setMessageInnerHTML("我看看 2");websocket.send(JSON.stringify({"event" : "_ice_candidate","data" : {"candidate" : event.candidate}}));}}; //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML("接收到的信息"); setMessageInnerHTML(event.data); if(event.data=="new user") {console.log("new user");location.reload();} else {var json = JSON.parse(event.data);console.log('onmessage: ', json);//如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述if (json.event === "_ice_candidate") {pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));} else {pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));// 如果是一个offer,那么需要回复一个answerif (json.event === "_offer") {pc.createAnswer(sendAnswerFn, function(error) {console.log('Failure callback: ' + error);});}}} } //连接关闭的回调方法 websocket.onclose = function () { setMessageInnerHTML("WebSocket连接关闭"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var message = document.getElementById('text').value; websocket.send(message); } // stun和turn服务器var iceServer = {"iceServers" : [ {"url" : "stun:stun.l.google.com:19302"}, {"url" : "turn:numb.viagenie.ca","username" : "webrtc@live.com","credential" : "muazkh"} ]};// 如果检测到媒体流连接到本地,将其绑定到一个video标签上输出pc.onaddstream = function(event) {document.getElementById('vid2').src = URL.createObjectURL(event.stream);};// 发送offer和answer的函数,发送本地session描述var sendOfferFn = function(desc) {pc.setLocalDescription(desc);websocket.send(JSON.stringify({"event" : "_offer","data" : {"sdp" : desc}}));}, sendAnswerFn = function(desc) {pc.setLocalDescription(desc);websocket.send(JSON.stringify({"event" : "_answer","data" : {"sdp" : desc}}));};// 获取本地音频和视频流navigator.webkitGetUserMedia({"audio" : true,"video" : true},function(stream) {//绑定本地媒体流到video标签用于输出document.getElementById('vid1').src = URL.createObjectURL(stream);//向PeerConnection中加入需要发送的流pc.addStream(stream);//如果是发起方则发送一个offer信令if (isCaller) {pc.createOffer(sendOfferFn, function(error) {console.log('Failure callback: ' + error);});} }, function(error) {//处理媒体流创建失败错误console.log('getUserMedia error: ' + error);});window.onload=function(){ if(isCaller==null||isCaller==undefined) {var tips = document.getElementById("tips");tips.remove();} else {var create = document.getElementById("create");create.remove();}};function init() {location.reload();}</script></html>
package me.gacl.websocket;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;import javax.websocket.*;import javax.websocket.server.ServerEndpoint;/** * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端, * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端 */@ServerEndpoint("/websocket")public class WebSocketTest { //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。 private static int onlineCount = 0; //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识 private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>(); //与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session; /** * 连接建立成功调用的方法 * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据 */ @OnOpen public void onOpen(Session session){ this.session = session; webSocketSet.add(this); //加入set中 addOnlineCount(); //在线数加1 System.out.println(session.getId()+"有新连接加入!当前在线人数为" + getOnlineCount()); } /** * 连接关闭调用的方法 */ @OnClose public void onClose(){ webSocketSet.remove(this); //从set中删除 subOnlineCount(); //在线数减1 System.out.println(session.getId()+"有一连接关闭!当前在线人数为" + getOnlineCount()); } /** * 收到客户端消息后调用的方法 * @param message 客户端发送过来的消息 * @param session 可选的参数 */ @OnMessage public void onMessage(String message, Session session) { System.out.println(session.getId()+"来自客户端的消息:" + message); //群发消息 for(WebSocketTest item: webSocketSet){ try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); continue; } } } /** * 发生错误时调用 * @param session * @param error */ @OnError public void onError(Session session, Throwable error){ System.out.println("发生错误"); error.printStackTrace(); } /** * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。 * @param message * @throws IOException */ public void sendMessage(String message) throws IOException{ this.session.getBasicRemote().sendText(message); //this.session.getAsyncRemote().sendText(message); } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketTest.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketTest.onlineCount--; }}
阅读全文
1 0
- Webrtc WebSocket实现音视频通讯
- websocket+webrtc+tomcat 实现视频监考功能
- Java+WebSocket+WebRTC实现视频通话实例
- 基于Chrome、Java、WebSocket、WebRTC实现浏览器视频通话
- 基于Chrome、Java、WebSocket、WebRTC实现浏览器视频通话
- 基于Chrome、Java、WebSocket、WebRTC实现浏览器视频通话
- 基于Chrome、Java、WebSocket、WebRTC实现浏览器视频通话
- Java通过WebSocket WebRTC实现视频通话实例
- Java使用websocket和WebRTC实现视频通话
- 基于webrtc的android和windows音视频通讯
- websocket实现语音通讯
- java使用websocket和WebRTC视频通话
- webRtc+websocket多人视频通话
- WebRTC音视频同步机制实现分析
- 基于webrtc的一对多音视频通讯
- 基于webrtc的一对多音视频通讯
- iOS websocket 及时通讯实现
- 抛弃websocket,前端直接打通信道,webRTC搭建音视频聊天
- 运营商手机号正则验证
- 设计模式(2)-Builder 建造者模式
- MongoDB 与 MySQL 性能测试分析
- 位与&,位或|,位异或^运算,以及运用场景
- Spring事务管理
- Webrtc WebSocket实现音视频通讯
- Android debug functions
- .NET 定时执行任务
- 动画框架
- Maven Update projec jre变成1.5
- 蓝桥-BASIC-18-矩形面积交
- 设计模式原则详解
- 想想来时的路,看看现在的你
- Java中的单例模式