Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@davutcavdar @mekya
359 lines (308 sloc) 9.63 KB
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/webrtc_adaptor.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
video {
width: 100%;
max-width: 320px;
height: 100%;
max-height: 240px;
}
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header, .marketing, .footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media ( min-width : 768px) {
.container {
/*max-width: 730px;
*/
width: 100%;
}
}
.container-narrow>hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header, .marketing, .footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav navbar-pills pull-right">
<li><a href="http://antmedia.io">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">WebRTC Conference</h3>
</div>
<div class="jumbotron">
<div class="row">
<div class="col-sm-6">
<video id="localVideo" autoplay muted></video>
</div>
<div class="col-sm-6">
<video id="remoteVideo0" autoplay></video>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<video id="remoteVideo1" autoplay></video>
</div>
<div class="col-sm-6">
<video id="remoteVideo2" autoplay></video>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p>
<input type="text" class="form-control" value="room1"
id="roomName" placeholder="Type room name">
</p>
<p>
<button onclick="joinRoom()" class="btn btn-info" disabled
id="join_publish_button">Join Room</button>
<button onclick="leaveRoom()" class="btn btn-info" disabled
id="stop_publish_button">Leave Room</button>
</p>
<span class="label label-success" id="broadcastingInfo"
style="font-size: 14px; display: none" style="display: none">Publishing</span>
</div>
</div>
</div>
<footer class="footer">
<p>
<a href="http://antmedia.io">Ant Media Server Enterprise
Edition</a>
</p>
</footer>
</div>
</body>
<script>
var token = "<%= request.getParameter("token") %>";
var streamId = "<%= request.getParameter("streamId") %>";
var join_publish_button = document.getElementById("join_publish_button");
var stop_publish_button = document.getElementById("stop_publish_button");
var roomNameBox = document.getElementById("roomName");
var remoteVideos = new Array();
var roomOfStream = new Array();
var remoteVideoIndex = 0;
var publishStreamId;
function joinRoom() {
webRTCAdaptor.joinRoom(roomNameBox.value, streamId);
}
function leaveRoom() {
webRTCAdaptor.leaveFromRoom(roomNameBox.value);
for ( var key in remoteVideos) {
console.log("index: " + key);
remoteVideos[key].srcObject = null;
remoteVideos[key] = null;
delete remoteVideos[key];
}
remoteVideoIndex = 0;
}
function publish(streamName, token) {
publishStreamId = streamName;
webRTCAdaptor.publish(streamName, token);
}
function startAnimation() {
$("#broadcastingInfo")
.fadeIn(
800,
function() {
$("#broadcastingInfo")
.fadeOut(
800,
function() {
var state = webRTCAdaptor
.signallingState(publishStreamId);
if (state != null
&& state != "closed") {
var iceState = webRTCAdaptor
.iceConnectionState(publishStreamId);
if (iceState != null
&& iceState != "failed"
&& iceState != "disconnected") {
startAnimation();
}
}
});
});
}
var pc_config = null;
var sdpConstraints = {
OfferToReceiveAudio : false,
OfferToReceiveVideo : false
};
var mediaConstraints = {
video : true,
audio : true
};
var path = location.hostname + ":" + location.port
+ "/WebRTCAppEE/websocket";
var websocketURL = "ws://" + path;
if (location.protocol.startsWith("https")) {
websocketURL = "wss://" + path;
}
var webRTCAdaptor = new WebRTCAdaptor(
{
websocket_url : websocketURL,
mediaConstraints : mediaConstraints,
peerconnection_config : pc_config,
sdp_constraints : sdpConstraints,
localVideoId : "localVideo",
debug : true,
callback : function(info, obj) {
if (info == "initialized") {
console.log("initialized");
join_publish_button.disabled = false;
stop_publish_button.disabled = true;
} else if (info == "joinedTheRoom") {
var room = obj.ATTR_ROOM_NAME;
roomOfStream[obj.streamId] = room;
console.log("joined the room: "
+ roomOfStream[obj.streamId]);
console.log(obj)
publish(obj.streamId, token);
var streams = obj.streams;
if (obj.streams != null) {
obj.streams.forEach(function(item) {
console.log(item);
webRTCAdaptor.play(item, token, roomNameBox.value);
});
}
} else if (info == "streamJoined") {
console.debug("stream joined with id " + obj.streamId);
webRTCAdaptor.play(obj.streamId, token, roomNameBox.value);
} else if (info == "newStreamAvailable") {
var room = roomOfStream[obj.streamId];
console.log("new stream available with id: "
+ obj.streamId + "on the room:" + room);
if (remoteVideos[obj.streamId] == null) {
console
.log("getting video object from DOM with index: "
+ remoteVideoIndex);
remoteVideos[obj.streamId] = document
.getElementById("remoteVideo"
+ remoteVideoIndex);
remoteVideoIndex++;
}
remoteVideos[obj.streamId].srcObject = obj.track;
} else if (info == "streamLeaved") {
console.debug(" stream leaved with id " + obj.streamId);
if (remoteVideos[obj.streamId] != null) {
remoteVideos[obj.streamId].srcObject = null;
remoteVideos[obj.streamId] = null;
delete remoteVideos[obj.streamId];
remoteVideoIndex--;
}
} else if (info == "publish_started") {
//stream is being published
console.debug("publish started to room: "
+ roomOfStream[obj.streamId]);
join_publish_button.disabled = true;
stop_publish_button.disabled = false;
startAnimation();
} else if (info == "publish_finished") {
//stream is being finished
console.debug("publish finished");
join_publish_button.disabled = false;
stop_publish_button.disabled = true;
} else if (info == "leavedFromRoom") {
var room = obj.ATTR_ROOM_NAME;
console.debug("leaved from the room:" + room);
} else if (info == "closed") {
//console.log("Connection closed");
if (typeof obj != "undefined") {
console.log("Connecton closed: "
+ JSON.stringify(obj));
}
}
},
callbackError : function(error, message) {
//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
console.log("error callback: " + JSON.stringify(error));
var errorMessage = JSON.stringify(error);
if (typeof message != "undefined") {
errorMessage = message;
}
var errorMessage = JSON.stringify(error);
if (error.indexOf("NotFoundError") != -1) {
errorMessage = "Camera or Mic are not found or not allowed in your device.";
} else if (error.indexOf("NotReadableError") != -1
|| error.indexOf("TrackStartError") != -1) {
errorMessage = "Camera or Mic is being used by some other process that does not not allow these devices to be read.";
} else if (error.indexOf("OverconstrainedError") != -1
|| error.indexOf("ConstraintNotSatisfiedError") != -1) {
errorMessage = "There is no device found that fits your video and audio constraints. You may change video and audio constraints."
} else if (error.indexOf("NotAllowedError") != -1
|| error.indexOf("PermissionDeniedError") != -1) {
errorMessage = "You are not allowed to access camera and mic.";
} else if (error.indexOf("TypeError") != -1) {
errorMessage = "Video/Audio is required.";
}
else if (error.indexOf("UnsecureContext") != -1) {
errorMessage = "Fatal Error: Browser cannot access camera and mic because of unsecure context. Please install SSL and access via https";
}
else if (error.indexOf("WebSocketNotSupported") != -1) {
errorMessage = "Fatal Error: WebSocket not supported in this browser";
}
alert(errorMessage);
}
});
</script>
</html>
You can’t perform that action at this time.