src/main/webapp/samples/publish_webrtc.html

<!DOCTYPE html>
<html>

<head>
	<title>WebRTC Samples > Publish</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../css/external/bootstrap4/bootstrap.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../css/samples.css" />
	<script src="../js/external/adapter-latest.js"></script>
	<script type="text/javascript" src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>

</head>

<body>
	<div>
		<div class="jumbotron">
			<div class="col-sm-12 form-group">
				<video id="localVideo" autoplay muted controls playsinline></video>
			</div>

			<div class="form-group col-sm-12 text-left">
				<input type="text" class="form-control" id="streamId" name="streamIdTextBox"
					placeholder="Type stream ID">

			</div>
			<div class="col-sm-12 text-right">
				<button type="button" id="options" class="btn btn-outline-primary btn-sm">Options</button>
			</div>
			<div class="form-group col-sm-12 text-left options">

				<label class=" mr-2" for="inlineFormCustomSelectPref">Max Video Bitrate(Kbps):</label>
				<div class="form-inline">
					<input type="text" class="form-control  mr-sm-2" id="maxBandwidthTextBox" name="maxBandwidthTextBox"
						value="900">

					<button type="button" class="btn btn-outline-primary btn-sm" id="max_bandwidth_apply">Apply</button>
				</div>
				<div class="dropdown-divider"></div>
				<legend class="col-form-label video-source-legend">Video Source</legend>
				<a id="browser_screen_share_doesnt_support" href="https://caniuse.com/#search=getDisplayMedia">Your
					browser doesn't support screen share. You can see supported browsers in this link </a>
				<div class="dropdown-divider"></div>
				<legend class="col-form-label audio-source-legend">Audio Source</legend>


				<legend class="col-form-label microphone-gain-legend">Microphone Gain</legend>
				<div class="form-inline"><input type=range id="volume_change_input" min=0 max=1 value=1 step=0.01></div>
				<legend class="col-form-label audio-quality-legend">Audio Quality</legend>
				<div class="form-check-inline form-inline">
					<div class="custom-control custom-switch">
						<input type="checkbox" class="custom-control-input" name="noiseSuppression"
							id="noiseSuppression">
						<label class="custom-control-label" for="noiseSuppression">Noise Supression</label>
					</div>
				</div>
				<div class="form-check-inline form-inline">
					<div class="custom-control custom-switch">
						<input type="checkbox" class="custom-control-input" name="echoCancellation"
							id="echoCancellation">
						<label class="custom-control-label" for="echoCancellation">Echo Cancellation</label>
					</div>
				</div>

			</div>
			<div class="form-group col-sm-12 text-left options">
				<label>Data Channel Messages</label>
				<div id="all-messages" class="message_area"></div>
				<div class="form-row">
					<div class="form-group col-sm-8">
						<input type="text" class="form-control" id="dataTextbox"
							placeholder="Write your message to send players">
					</div>
					<div class="form-group col-sm-2">
						<button type="button" id="send" class="btn btn-outline-primary btn-block">Send</button>
					</div>
					<div class="form-group col-sm-2">
						<button id="send-image-button" type="button" class="btn btn-outline-primary btn-block">
							Image
						</button>
						<input id="file-input" type="file" name="name" accept="image/x-png,image/gif,image/jpeg"
							style="display: none" />
					</div>
				</div>
			</div>

			<div class="form-group col-sm-12 text-center" id="offlineInfo" >
				<div class="form-group col-sm-4 offset-sm-4 text-center" style="margin-bottom: 8px;font-size:1em;">
					<a href="" target="_blank">&nbsp;</a> <!-- this is a place holder to keep the same alignment -->
				</div>
				<div class="form-group col-sm-4 offset-sm-4 text-center" style="font-size:1.2em">
					<span class="badge  badge-secondary">Status: Offline</span>
				</div>
			</div>
			<div class="form-group col-sm-12 text-center" id="broadcastingInfo" style="display: none;">
				<div class="form-group text-center"  style="margin-bottom: 8px;font-size:1em;">
					<a href="" id="playlink" target="_blank" data-toggle="tooltip" title="Opens in New Tab">Play with WebRTC</a>
				</div>
				<div class="form-group text-center" style="font-size:1.2em">
					<span class="badge  badge-success" >Status: Publishing</span>
				</div>
			</div>

			<div class="form-group">
				<button class="btn btn-primary" disabled id="start_publish_button">Start Publishing</button>
				<button class="btn btn-primary" disabled id="stop_publish_button">Stop Publishing</button>
			</div>
			<div class="col-sm-10 offset-sm-1" id="stats_panel">
				<div class="row text-muted text-left">
					<div class="col-sm-6">
						<small>
							<div id="average_bit_rate_container">Average Bitrate(Kbps): <span
									id="average_bit_rate"></span></div>
							<div id="latest_bit_rate_container">Latest Bitrate(Kbps): <span id="latest_bit_rate"></span>
							</div>
							<div id="packet_lost_container">PacketsLost: <span id="packet_lost_text"></span></div>
							<div id="jitter_text_container">Jitter(Secs): <span id="jitter_text"></span></div>
							<div>Audio Level: <span id="audio_level_text"></span> <meter id="audio_level_text_container"
									high="0.25" max="1" value="0"></meter></div>
						</small>
					</div>
					<div class="col-sm-6">
						<small>
							<div id="round_trip_time_container">Round Trip Time(Secs): <span
									id="round_trip_time"></span></div>
							<div id="source_resolution_container">Source WidthxHeight: <span id="source_width"></span> x
								<span id="source_height"></span>
							</div>
							<div id="ongoing_resolution_container">On-going WidthxHeight: <span
									id="ongoing_width"></span> x <span id="ongoing_height"></span></div>
							<div id="on_going_fps_container">On-going FPS: <span id="on_going_fps"></span></div>

						</small>
					</div>
				</div>
			</div>
		</div>
		<footer class="footer text-left">
			<div class="row">
				<div class="col-sm-6 text-left"><a target="_parent" href="https://github.com/ant-media/StreamApp/tree/master/src/main/webapp/samples/publish_webrtc.html">View Source on Github</a></div>
				<div class="col-sm-6 text-right">
					<a href="http://antmedia.io" target="_parent">antmedia.io</a>
				</div>
			</div>
		</footer>

	
	</div>
	<script src="../js/external/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
	<script src="../js/external/popper.min.js" crossorigin="anonymous"></script>
	<script src="../js/external/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
<script type="module" lang="javascript">
	import { WebRTCAdaptor } from "../js/webrtc_adaptor.js"
	import { getUrlParameter } from "../js/fetch.stream.js"
	import { SoundMeter } from "../js/soundmeter.js"
	import { generateRandomString, getWebSocketURL  } from "../js/utility.js"
	import {Analytics} from "../js/analytics.js"

	var debug = getUrlParameter("debug");
	if (debug == null) {
		debug = false;
	}


	function init() {
		$('[data-toggle="tooltip"]').tooltip()
		var id = getUrlParameter("id");
		if (typeof id != "undefined") {
			$("#streamId").val(id);
		}
		else {
			id = getUrlParameter("name");
			if (typeof id != "undefined") {
				$("#streamId").val(id);
			}
			else {
				$("#streamId").val("streamId_" + generateRandomString(9));
			}
		}
	}
	$(function () {
		init();
	});

	var max_bandwidth_input = document.getElementById("maxBandwidthTextBox");

	var max_bandwidth_apply = document.getElementById("max_bandwidth_apply");
	max_bandwidth_apply.addEventListener("click", setBitrateValue, false);

	var maxVideoBitrateKbps = 900;
	var subscriberId = getUrlParameter("subscriberId");
	var subscriberCode = getUrlParameter("subscriberCode");
	var streamName = getUrlParameter("streamName");
	var mainTrack = getUrlParameter("mainTrack");
	var playType = getUrlParameter("play");
	var customerId = getUrlParameter("customerId");
	var bitmovinKey = getUrlParameter("bitmovinKey");
	var applicationName = location.pathname.split('/').filter(Boolean)[0];
	var analytics =new Analytics(bitmovinKey);
	

	var playTitle;
	if (playType == "hls") {
		playTitle = "HLS";
	}
	else if (playType == "dash") {
		playTitle = "Dash";
	}
	else {
		playTitle = "WebRTC";
		playType = "webrtc";
	}

	//TODO: Migrate these methods to Jquery
	var start_publish_button = document.getElementById("start_publish_button");
	start_publish_button.addEventListener("click", startPublishing, false);
	var stop_publish_button = document.getElementById("stop_publish_button");
	stop_publish_button.addEventListener("click", stopPublishing, false);
	var options = document.getElementById("options");
	options.addEventListener("click", toggleOptions, false);
	var send = document.getElementById("send");
	send.addEventListener("click", sendData, false);

	var streamIdBox = document.getElementById("streamId");

	var toggleNoiseSuppression = document.getElementById("noiseSuppression");
	toggleNoiseSuppression.addEventListener("click", changeAudioConstraints, false);
	var toggleEchoCancellation = document.getElementById("echoCancellation");
	toggleEchoCancellation.addEventListener("click", changeAudioConstraints, false);

	/**
	 * If publishing stops for any reason, it tries to republish again.
	 */
	var autoRepublishEnabled = true;
	/**
	 * Timer job that checks the WebRTC connection 
	 */
	var autoRepublishIntervalJob = null;

	var streamId;

	var token = getUrlParameter("token");

	// It should be true
	var rtmpForward = getUrlParameter("rtmpForward");

	var volume_change_input = document.getElementById("volume_change_input");
	volume_change_input.addEventListener("change", changeVolume);

	function changeVolume() {
		/**
			  * Change the gain levels on the input selector.
			  */
		if (document.getElementById('volume_change_input') != null) {
			webRTCAdaptor.setVolumeLevel(this.value);
		}
	}

	function setBitrateValue() {

		var bitrateBoxValue = max_bandwidth_input.value;

		if (bitrateBoxValue == "unlimited" || bitrateBoxValue == NaN) {
			maxVideoBitrateKbps = "unlimited"
			console.log("input bitrate: " + maxVideoBitrateKbps);
		}
		else {
			var bitrate = parseInt(bitrateBoxValue);
			if (bitrate == NaN) {
				maxVideoBitrateKbps = 900;
			}
			else if (bitrate < 100) {
				maxVideoBitrateKbps = 100;
			}
			else {
				maxVideoBitrateKbps = bitrate;
			}
			console.log("input bitrate: " + maxVideoBitrateKbps);
		}

		// Check stream is publishing
		// If it's publishing then call changeBandwidth function
		if (start_publish_button.disabled) {
			webRTCAdaptor.changeBandwidth(maxVideoBitrateKbps, $("#streamId").val());
		}

	}

	let meterRefresh = null;


	const instantMeter = document.querySelector('#audio_level_text_container');
	const instantValueDisplay = document.querySelector('#audio_level_text');

	function enableAudioLevel() {
		webRTCAdaptor.enableAudioLevelForLocalStream((value) => {
			instantMeter.value = instantValueDisplay.innerText = value;
		}, 200);
	};

	var file_input = document.getElementById("file-input");
	file_input.addEventListener("change", send_image);

	var connect_channel_button = document.getElementById("send-image-button");
	connect_channel_button.addEventListener("click", () => file_input.click());

	function send_image() {
		var imageURL = file_input.files[0];

		var reader = new FileReader();
		reader.onload = function (e) {
			var arrayBuffer = this.result;
			var bytes = new Uint8Array(arrayBuffer);
			var blob = new Blob([bytes.buffer]);
			var urlCreator = window.URL || window.webkitURL;
			var imageBlobUrl = urlCreator.createObjectURL(blob);

			$('<img src =' + imageBlobUrl + ' style="width:100px;"><br>').appendTo($("#all-messages"));
			sendBinaryData(arrayBuffer);

		};

		reader.readAsArrayBuffer(imageURL);
	}

	function sendBinaryData(data) {
		try {
			var iceState = webRTCAdaptor.iceConnectionState(streamIdBox.value);
			if (
				iceState != null &&
				iceState != "failed" &&
				iceState != "disconnected"
			) {
				webRTCAdaptor.sendData(streamIdBox.value, data);
			} else {
				alert("WebRTC connection is not active. Please click start first");
			}
		} catch (exception) {
			console.error(exception);
			alert(
				"Message cannot be sent. Make sure you've enabled data channel on server web panel"
			);
		}
	}

	function handleImageData(data) {
		var bytes = new Uint8Array(data);
		var blob = new Blob([bytes.buffer]);
		var urlCreator = window.URL || window.webkitURL;
		var imageUrl = urlCreator.createObjectURL(blob);

		$('<img src =' + imageUrl + ' style="width:100px;"><br>').appendTo($("#all-messages"));
	}

	function startPublishing() {
		setBitrateValue();
		webRTCAdaptor.bandwidth = maxVideoBitrateKbps;
		streamId = streamIdBox.value;
		webRTCAdaptor.publish(streamId, token, subscriberId, subscriberCode, streamName, mainTrack);
		analytics.analyze(Analytics.publisher,streamId,applicationName,customerId,Analytics.webrtc,"localVideo");

	}

	function stopPublishing() {
		if (autoRepublishIntervalJob != null) {
			clearInterval(autoRepublishIntervalJob);
			autoRepublishIntervalJob = null;
		}
		webRTCAdaptor.stop(streamId);
	}

	function switchVideoMode(chbx) {
		//If video device changes manually 

		if (chbx.value == "screen") {
			//webRTCAdaptor.switchDesktopWithMicAudio(streamId);
			webRTCAdaptor.switchDesktopCapture(streamId);
		}
		else if (chbx.value == "screenwithcamera") {
			webRTCAdaptor.switchDesktopCaptureWithCamera(streamId);
		}
		else {
			webRTCAdaptor.switchVideoCameraCapture(streamId, chbx.value);
		}
	}

	function switchAudioMode(chbx) {
		webRTCAdaptor.switchAudioInputSource(streamId, chbx.value);
	}

	function getCameraRadioButton(deviceName, deviceId) {
		return "<div class=\"form-check form-check-inline\">" +
			"<input class=\"form-check-input video-source\" name=\"videoSource\" type=\"radio\" value=\"" + deviceId + "\" id=\"" + deviceId + "\">" +
			"<label class=\"form-check-label font-weight-light\" name=\"videoSource\" for=\"" + deviceId + "\" style=\"font-weight:normal\">" +
			deviceName +
			"</label>" +
			"</div>";
	}
	function getScreenButton() {
		return "<div class=\"form-check form-check-inline\">" +
			"<input class=\"form-check-input video-source\" name=\"videoSource\" type=\"radio\" value=\"screen\" id=\"screen_share_checkbox\">" +
			"<label class=\"form-check-label font-weight-light\" name=\"videoSource\" for=\"screen_share_checkbox\" style=\"font-weight:normal\">" +
			"Screen" +
			"</label>" +
			"</div>"
	}
	function getScreenWithCamButton() {
		return "<div class=\"form-check form-check-inline\">" +
			"<input class=\"form-check-input video-source\" name=\"videoSource\" type=\"radio\" value=\"screenwithcamera\" id=\"screen_share_with_camera_checkbox\">" +
			"<label class=\"form-check-label font-weight-light\" name=\"videoSource\" for=\"screen_share_with_camera_checkbox\" style=\"font-weight:normal\">" +
			"Screen with Camera" +
			"</label>" +
			"</div>"
	}
	function getAudioRadioButton(deviceName, deviceId) {
		return "<div class=\"form-check form-check-inline\">" +
			"<input class=\"form-check-input audio-source\" name=\"audioDeviceSource\" type=\"radio\" value=\"" + deviceId + "\" id=\"" + deviceId + "\">" +
			"<label class=\"form-check-label font-weight-light\" name=\"audioDeviceSource\" for=\"" + deviceId + "\" style=\"font-weight:normal\">" +
			deviceName +
			"</label>" +
			"</div>";
	}

	function toggleOptions() {
		$(".options").toggle();
	}

	function sendData() {
		try {
			var iceState = webRTCAdaptor.iceConnectionState(streamId);
			if (iceState != null && iceState != "failed" && iceState != "disconnected") {

				webRTCAdaptor.sendData($("#streamId").val(), $("#dataTextbox").val());
				$("#all-messages").append("Sent: " + $("#dataTextbox").val() + "<br>");
				$("#dataTextbox").val("");
			}
			else {
				alert("WebRTC publishing is not active. Please click Start Publishing first")
			}
		}
		catch (exception) {
			console.error(exception);
			alert("Message cannot be sent. Make sure you've enabled data channel on server web panel");
		}
	}


	function checkAndRepublishIfRequired() {
		var iceState = webRTCAdaptor.iceConnectionState(streamId);
		console.log("Ice state checked = " + iceState);

		if (iceState == null || iceState == "failed" || iceState == "disconnected") {
			webRTCAdaptor.stop(streamId);
			webRTCAdaptor.closePeerConnection(streamId);
			webRTCAdaptor.closeWebSocket();
			initWebRTCAdaptor(true, autoRepublishEnabled);
		}
	}

	function startAnimation() {
		$("#offlineInfo").hide();
		$("#broadcastingInfo").show();
		$("#playlink").attr("href", "../play.html?id=" + streamId+"&playOrder="+playType);
		$("#playlink").text("Play with " + playTitle);
		$("#playlink").show();

		setTimeout(function () {
			var state = webRTCAdaptor.signallingState(streamId);
			if (state != null && state != "closed") {
				var iceState = webRTCAdaptor.iceConnectionState(streamId);
				if (iceState != null && iceState != "failed" && iceState != "disconnected") {
					startAnimation();
				}
				else {
					$("#playlink").hide();
					$("#broadcastingInfo").hide();
					$("#offlineInfo").show();
				}
			}
			else {
				$("#playlink").hide();
				$("#broadcastingInfo").hide();
				$("#offlineInfo").show();
			}
		}, 200);

	}

	function changeAudioConstraints() {
		var constraint = { audio: {} };
		switch (this.name) {
			case 'noiseSuppression': {
				constraint.audio.noiseSuppression = this.checked;
				break;
			}
			case 'echoCancellation': {
				constraint.audio.echoCancellation = this.checked;
				break;
			}
			default: {
				break;
			}
		}
		webRTCAdaptor.applyConstraints(constraint);
	}

	var websocketURL = getWebSocketURL(location, rtmpForward);

	var webRTCAdaptor = null;
	var selectedRadio = null;
	var selectedAudio = null;

	function initWebRTCAdaptor(publishImmediately, autoRepublishEnabled) {
		webRTCAdaptor = new WebRTCAdaptor({
			websocket_url: websocketURL,
			localVideoId: "localVideo",
			debug: debug,
			bandwidth: maxVideoBitrateKbps,
			dataChannelEnabled: true,
			callback: (info, obj) => {
				if (info == "initialized") {
					console.log("initialized");
					start_publish_button.disabled = false;
					stop_publish_button.disabled = true;
					if (publishImmediately) {
						webRTCAdaptor.publish(streamId, token, subscriberId, subscriberCode, streamName)
					}

				} else if (info == "publish_started") {
					//stream is being published
					console.log("publish started");
					start_publish_button.disabled = true;
					stop_publish_button.disabled = false;
					startAnimation();
					if (autoRepublishEnabled && autoRepublishIntervalJob == null) {
						autoRepublishIntervalJob = setInterval(() => {
							checkAndRepublishIfRequired();
						}, 3000);
					}
					webRTCAdaptor.enableStats(obj.streamId);
					enableAudioLevel();
				} else if (info == "publish_finished") {
					//stream is being finished
					console.log("publish finished");
					start_publish_button.disabled = false;
					stop_publish_button.disabled = true;
					$("#stats_panel").hide();
				}
				else if (info == "browser_screen_share_supported") {
					$(".video-source").prop("disabled", false);

					console.log("browser screen share supported");
					browser_screen_share_doesnt_support.style.display = "none";
				}
				else if (info == "screen_share_stopped") {
					//choose the first video source. It may not be correct for all cases. 
					$(".video-source").first().prop("checked", true);
					console.log("screen share stopped");
				}
				else if (info == "closed") {
					//console.log("Connection closed");
					if (typeof obj != "undefined") {
						console.log("Connecton closed: " + JSON.stringify(obj));
					}
				}
				else if (info == "pong") {
					//ping/pong message are sent to and received from server to make the connection alive all the time
					//It's especially useful when load balancer or firewalls close the websocket connection due to inactivity
				}
				else if (info == "refreshConnection") {
					checkAndRepublishIfRequired();
				}
				else if (info == "ice_connection_state_changed") {
					console.log("iceConnectionState Changed: ", JSON.stringify(obj));
				}
				else if (info == "updated_stats") {
					//obj is the PeerStats which has fields
					//averageOutgoingBitrate - kbits/sec
					//currentOutgoingBitrate - kbits/sec
					console.log("Average outgoing bitrate " + obj.averageOutgoingBitrate + " kbits/sec"
						+ " Current outgoing bitrate: " + obj.currentOutgoingBitrate + " kbits/sec"
						+ " video source width: " + obj.resWidth + " video source height: " + obj.resHeight
						+ "frame width: " + obj.frameWidth + " frame height: " + obj.frameHeight
						+ " video packetLost: " + obj.videoPacketsLost + " audio packetsLost: " + obj.audioPacketsLost
						+ " video RTT: " + obj.videoRoundTripTime + " audio RTT: " + obj.audioRoundTripTime
						+ " video jitter: " + obj.videoJitter + " audio jitter: " + obj.audioJitter);

					analytics.setStats(obj);

					$("#average_bit_rate").text(obj.averageOutgoingBitrate);
					if (obj.averageOutgoingBitrate > 0) {
						$("#average_bit_rate_container").show();
					}
					else {
						$("#average_bit_rate_container").hide();
					}

					$("#latest_bit_rate").text(obj.currentOutgoingBitrate);
					if (obj.currentOutgoingBitrate > 0) {
						$("#latest_bit_rate_container").show();
					}
					else {
						$("#latest_bit_rate_container").hide();
					}
					var packetLost = parseInt(obj.videoPacketsLost) + parseInt(obj.audioPacketsLost);

					$("#packet_lost_text").text(packetLost);
					if (packetLost > -1) {
						$("#packet_lost_container").show();
					}
					else {
						$("#packet_lost_container").hide();
					}
					var jitter = ((parseFloat(obj.videoJitter) + parseInt(obj.audioJitter)) / 2).toPrecision(3);
					$("#jitter_text").text(jitter);
					if (jitter > 0) {
						$("#jitter_container").show();
					}
					else {
						$("#jitter_container").hide();
					}

					var rtt = ((parseFloat(obj.videoRoundTripTime) + parseFloat(obj.audioRoundTripTime)) / 2).toPrecision(3);
					$("#round_trip_time").text(rtt);
					if (rtt > 0) {
						$("#round_trip_time_container").show();
					}
					else {
						$("#round_trip_time_container").hide();
					}

					$("#source_width").text(obj.resWidth);
					$("#source_height").text(obj.resHeight);
					if (obj.resWidth > 0 && obj.resHeight > 0) {
						$("#source_resolution_container").show();
					}
					else {
						$("#source_resolution_container").hide();
					}

					$("#ongoing_width").text(obj.frameWidth);
					$("#ongoing_height").text(obj.frameHeight);
					if (obj.frameWidth > 0 && obj.frameHeight > 0) {
						$("#ongoing_resolution_container").show();
					}
					else {
						$("#ongoing_resolution_container").hide();
					}

					$("#on_going_fps").text(obj.currentFPS);
					if (obj.currentFPS > 0) {
						$("#on_going_fps_container").show();
					}
					else {
						$("#on_going_fps_container").hide();
					}

					$("#stats_panel").show();

				}
				else if (info == "data_received") {
					var data = obj.data;
					if (data instanceof ArrayBuffer) {
						handleImageData(data);
					}
					else {
						$("#all-messages").append("Received: " + data + "<br>");
					}
				}
				else if (info == "available_devices") {
					var videoHtmlContent = "";
					var audioHtmlContent = "";
					var devices = new Array();

					var i = 0;
					var cameraIndex = 0;
					var micIndex = 0;
					obj.forEach(function (device) {
						var label = device.label;

						devices.forEach(function (same) {
							if (same == device.label) {
								i += 1;
								label = device.label + " - " + i
							}
						});

						if (device.kind == "videoinput") {
							if (typeof label == "undefined" || label == "") {
								label = "Cam-" + cameraIndex;
							}
							cameraIndex++;
							videoHtmlContent += getCameraRadioButton(label, device.deviceId);
						}
						else if (device.kind == "audioinput") {
							if (typeof label == "undefined" || label == "") {
								label = "Mic-" + micIndex;
							}
							micIndex++;
							audioHtmlContent += getAudioRadioButton(label, device.deviceId);
						}
						devices.push(device.label)
					});
					$('[name="videoSource"]').remove();
					$('[name="audioDeviceSource"]').remove();

					videoHtmlContent += getScreenButton();
					videoHtmlContent += getScreenWithCamButton();

					$(videoHtmlContent).insertAfter(".video-source-legend");
					$(".video-source").first().prop("checked", true);

					$(audioHtmlContent).insertAfter(".audio-source-legend");
					$(".audio-source").first().prop("checked", true);


					if (document.querySelector('input[name="videoSource"]')) {
						document.querySelectorAll('input[name="videoSource"]').forEach((elem) => {
							elem.addEventListener("change", function (event) {
								var item = event.target;
								switchVideoMode(item)
								selectedRadio = item.value;
							});
						});
					}
					if (document.querySelector('input[name="audioDeviceSource"]')) {
						document.querySelectorAll('input[name="audioDeviceSource"]').forEach((elem) => {
							elem.addEventListener("change", function (event) {
								var item = event.target;
								switchAudioMode(item)
								selectedAudio = item.value;
							});
						});
					}
					$(":radio[value=" + selectedRadio + "]").prop("checked", true);
					$(":radio[value=" + selectedAudio + "]").prop("checked", true);
				}
				else if (info == "session_restored") {
					start_publish_button.disabled = true;
					stop_publish_button.disabled = false;
					startAnimation();
					console.log(info + "notification received");
				}
				else {
					console.log(info + " notification received");
				}
			},
			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("WebSocketNotConnected") != -1) {
					errorMessage = "WebSocket Connection is disconnected.";
				}
				else if (error.indexOf("not_initialized_yet") != -1) {
					errorMessage = "Server is getting initialized.";
				}
				else if (error.indexOf("data_store_not_available") != -1) {
					errorMessage = "Data store is not available. It's likely that server is initialized or getting closed";
				}
				else {
					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 are already in use and they cannot be opened. Choose another video/audio source if you have on the page below ";

						$(".options").show();

					}
					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("getUserMediaIsNotAllowed") != -1) {
						errorMessage = "You are not allowed to reach devices from an insecure origin, please enable ssl";
					}
					else if (error.indexOf("ScreenSharePermissionDenied") != -1) {
						errorMessage = "You are not allowed to access screen share";
						$(".video-source").first().prop("checked", true);
					}
					else if (error.indexOf("UnsecureContext") != -1) {
						errorMessage = "Please Install SSL(https). Camera and mic cannot be opened because of unsecure context. ";
					}
					else {
						errorMessage = error
					}
					alert(errorMessage);

				}
				console.error(errorMessage);
				if (message !== undefined) {
					console.error(message);
				}
			}
		});
	}

	//initialize the WebRTCAdaptor
	initWebRTCAdaptor(false, autoRepublishEnabled);

	window.webRTCAdaptor = webRTCAdaptor;
</script>

</html>