Webrtc WebSocket实现音视频通讯

最新推荐文章于 2024-05-13 16:25:06 发布

xiaoying910517

最新推荐文章于 2024-05-13 16:25:06 发布

阅读量4.7k

点赞数

文章标签： webrtc websocket

转载地址：http://blog.csdn.net/chenhande1990chenhan/article/details/72831782

一般的浏览器都集成了webrtc的功能，因此是不需要webrtc服务器就可以在局域网内进行点对点的音视频通讯。

本文主要利用websocket进行通讯，支持个google浏览器，无法兼容Firefox浏览器，同时对于Tomcat要求8.0以上，同时由于最新的webrtc要么用localhost访问，如果要用IP访问，则只能用https协议进行访问，因此这些都是需要解决的问题，本文只是一个demon程序。

[html]view plain copy
<%@ 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，那么需要回复一个answer  
                if (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>  

[java]view plain copy
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--;  
    }  
}  

xiaoying910517

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Webrtc WebSocket实现音视频通讯

转载地址：http://blog.csdn.net/chenhande1990chenhan/article/details/72831782一般的浏览器都集成了webrtc的功能，因此是不需要webrtc服务器就可以在局域网内进行点对点的音视频通讯。本文主要利用websocket进行通讯，支持个google浏览器，无法兼容Firefox浏览器，同时对于Tomcat要求8.0以上，同时由于最新的w...
复制链接

扫一扫