Changes for WebRTC (BAEL-3198) (#8213)
* Adding webrtc changes * formatting * formatting pom * formatting * Adding space instead of tabs for indentation * formatting changes * Updating tabs to spaces
This commit is contained in:
parent
c20e18723b
commit
93b79e272d
2
pom.xml
2
pom.xml
|
@ -635,6 +635,7 @@
|
|||
<module>spring-boot-nashorn</module>
|
||||
<module>java-blockchain</module>
|
||||
<module>machine-learning</module>
|
||||
<module>webrtc</module>
|
||||
<module>wildfly</module>
|
||||
<module>quarkus-extension</module>
|
||||
</modules>
|
||||
|
@ -883,7 +884,6 @@
|
|||
|
||||
<module>spring-boot-nashorn</module>
|
||||
<module>java-blockchain</module>
|
||||
|
||||
</modules>
|
||||
|
||||
</profile>
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
|
||||
<artifactId>webrtc</artifactId>
|
||||
<version>0.0.1</version>
|
||||
|
||||
<parent>
|
||||
<artifactId>parent-boot-2</artifactId>
|
||||
<groupId>com.baeldung</groupId>
|
||||
<version>0.0.1-SNAPSHOT</version>
|
||||
<relativePath>../parent-boot-2</relativePath>
|
||||
</parent>
|
||||
|
||||
<dependencies>
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-websocket</artifactId>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
|
||||
<properties>
|
||||
<java.version>1.8</java.version>
|
||||
</properties>
|
||||
|
||||
<build>
|
||||
<plugins>
|
||||
<plugin>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-maven-plugin</artifactId>
|
||||
</plugin>
|
||||
</plugins>
|
||||
</build>
|
||||
|
||||
</project>
|
|
@ -0,0 +1,31 @@
|
|||
package com.baeldung.webrtc;
|
||||
|
||||
import org.springframework.stereotype.Component;
|
||||
import org.springframework.web.socket.TextMessage;
|
||||
import org.springframework.web.socket.WebSocketSession;
|
||||
import org.springframework.web.socket.handler.TextWebSocketHandler;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.util.List;
|
||||
import java.util.concurrent.CopyOnWriteArrayList;
|
||||
|
||||
@Component
|
||||
public class SocketHandler extends TextWebSocketHandler {
|
||||
|
||||
List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();
|
||||
|
||||
@Override
|
||||
public void handleTextMessage(WebSocketSession session, TextMessage message) throws InterruptedException, IOException {
|
||||
|
||||
for (WebSocketSession webSocketSession : sessions) {
|
||||
if (webSocketSession.isOpen() && !session.getId().equals(webSocketSession.getId())) {
|
||||
webSocketSession.sendMessage(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
|
||||
sessions.add(session);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
package com.baeldung.webrtc;
|
||||
|
||||
import org.springframework.boot.SpringApplication;
|
||||
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||
|
||||
@SpringBootApplication
|
||||
public class WebRTCDemoApplication {
|
||||
|
||||
public static void main(String[] args) {
|
||||
SpringApplication.run(WebRTCDemoApplication.class, args);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
package com.baeldung.webrtc;
|
||||
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.web.socket.config.annotation.EnableWebSocket;
|
||||
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
|
||||
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
|
||||
|
||||
@Configuration
|
||||
@EnableWebSocket
|
||||
public class WebSocketConfiguration implements WebSocketConfigurer {
|
||||
|
||||
@Override
|
||||
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
|
||||
registry.addHandler(new SocketHandler(), "/socket")
|
||||
.setAllowedOrigins("*");
|
||||
}
|
||||
}
|
|
@ -0,0 +1,116 @@
|
|||
//connecting to our signaling server
|
||||
var conn = new WebSocket('ws://localhost:8080/socket');
|
||||
|
||||
conn.onopen = function() {
|
||||
console.log("Connected to the signaling server");
|
||||
initialize();
|
||||
};
|
||||
|
||||
conn.onmessage = function(msg) {
|
||||
console.log("Got message", msg.data);
|
||||
var content = JSON.parse(msg.data);
|
||||
var data = content.data;
|
||||
switch (content.event) {
|
||||
// when somebody wants to call us
|
||||
case "offer":
|
||||
handleOffer(data);
|
||||
break;
|
||||
case "answer":
|
||||
handleAnswer(data);
|
||||
break;
|
||||
// when a remote peer sends an ice candidate to us
|
||||
case "candidate":
|
||||
handleCandidate(data);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function send(message) {
|
||||
conn.send(JSON.stringify(message));
|
||||
}
|
||||
|
||||
var peerConnection;
|
||||
var dataChannel;
|
||||
var input = document.getElementById("messageInput");
|
||||
|
||||
function initialize() {
|
||||
var configuration = null;
|
||||
|
||||
peerConnection = new RTCPeerConnection(configuration, {
|
||||
optional : [ {
|
||||
RtpDataChannels : true
|
||||
} ]
|
||||
});
|
||||
|
||||
// Setup ice handling
|
||||
peerConnection.onicecandidate = function(event) {
|
||||
if (event.candidate) {
|
||||
send({
|
||||
event : "candidate",
|
||||
data : event.candidate
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// creating data channel
|
||||
dataChannel = peerConnection.createDataChannel("dataChannel", {
|
||||
reliable : true
|
||||
});
|
||||
|
||||
dataChannel.onerror = function(error) {
|
||||
console.log("Error occured on datachannel:", error);
|
||||
};
|
||||
|
||||
// when we receive a message from the other peer, printing it on the console
|
||||
dataChannel.onmessage = function(event) {
|
||||
console.log("message:", event.data);
|
||||
};
|
||||
|
||||
dataChannel.onclose = function() {
|
||||
console.log("data channel is closed");
|
||||
};
|
||||
}
|
||||
|
||||
function createOffer() {
|
||||
peerConnection.createOffer(function(offer) {
|
||||
send({
|
||||
event : "offer",
|
||||
data : offer
|
||||
});
|
||||
peerConnection.setLocalDescription(offer);
|
||||
}, function(error) {
|
||||
alert("Error creating an offer");
|
||||
});
|
||||
}
|
||||
|
||||
function handleOffer(offer) {
|
||||
peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
|
||||
|
||||
// create and send an answer to an offer
|
||||
peerConnection.createAnswer(function(answer) {
|
||||
peerConnection.setLocalDescription(answer);
|
||||
send({
|
||||
event : "answer",
|
||||
data : answer
|
||||
});
|
||||
}, function(error) {
|
||||
alert("Error creating an answer");
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
function handleCandidate(candidate) {
|
||||
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
|
||||
};
|
||||
|
||||
function handleAnswer(answer) {
|
||||
peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
|
||||
console.log("connection established successfully!!");
|
||||
};
|
||||
|
||||
function sendMessage() {
|
||||
dataChannel.send(input.value);
|
||||
input.value = "";
|
||||
}
|
|
@ -0,0 +1,67 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>WebRTC demo</title>
|
||||
<!--Bootstrap only for styling-->
|
||||
<link rel="stylesheet"
|
||||
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
|
||||
<script
|
||||
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script
|
||||
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
|
||||
<!--Bootstrap only for styling-->
|
||||
</head>
|
||||
<style>
|
||||
.container {
|
||||
background: rgb(148, 144, 144);
|
||||
margin: 50px auto;
|
||||
max-width: 80%;
|
||||
text-align: center;
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: rgb(148, 144, 144);
|
||||
text-align: center;
|
||||
padding: 2%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>A Demo for messaging in WebRTC</h1>
|
||||
|
||||
<h3>
|
||||
Run two instances of this webpage along with the server to test this
|
||||
application.<br> Create an offer, and then send the message. <br>Check
|
||||
the browser console to see the output.
|
||||
</h3>
|
||||
|
||||
<!--WebRTC related code-->
|
||||
<button type="button" class="btn btn-primary" onclick='createOffer()'>Create
|
||||
Offer</button>
|
||||
<input id="messageInput" type="text" class="form-control"
|
||||
placeholder="message">
|
||||
<button type="button" class="btn btn-primary" onclick='sendMessage()'>SEND</button>
|
||||
<script src="client.js"></script>
|
||||
<!--WebRTC related code-->
|
||||
|
||||
</div>
|
||||
<div class="footer">This application is intentionally made simple
|
||||
to avoid cluttering with non WebRTC related code.</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue