Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

<dialog class = "ready-dialog mdl-dialog"> html code works only on chrome browser #20

Open
burakguder opened this issue Jan 19, 2021 · 0 comments
Open

<dialog class = "ready-dialog mdl-dialog"> html code works only on chrome browser #20

burakguder opened this issue Jan 19, 2021 · 0 comments

Comments

@burakguder
Copy link

burakguder commented Jan 19, 2021 •
edited
Loading

The session cannot be attended because other browsers do not support the dialog feature.

I replaced this with $('#modalinfo').modal

www/index.html 

<html>
	<head>
	<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link href="css/getmdl-select.min.css" rel="stylesheet" type="text/css"/>
	<link href="css/flag-icon.min.css" rel="stylesheet" type="text/css"/>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/jquery-2.2.4.min.js"></script>
	<script src="js/common_scripts.js"></script>
	<script src="js/jquery-ui-1.8.22.min.js"></script>

	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<script src="js/transaction-manager.js" type="text/javascript"></script>
	<script src="js/getmdl-select.js" type="text/javascript"></script>
	<script src="js/soundmeter.js" type="text/javascript"></script>
	<script src="js/sfu.js" type="text/javascript"></script>
	<style>
		body {
			background: #e2e1e0;
			text-align: center;
			margin: 0px;
			padding: 0px;
		}

		.scroll {
			overflow: auto;
			overflow: overlay;
			z-index: 9;
			scroll-snap-type: proximity;
		}
		.scroll::-webkit-scrollbar {
			position: absolute;
			width: 12px;
			height: 12px;
		}
		.scroll::-webkit-scrollbar-button {
			width: 0px;
			height: 0px;
		}
		.scroll::-webkit-scrollbar-corner {
			background-color: transparent;
		}
		.scroll::-webkit-scrollbar-track {
			border: 4px solid transparent;
			border-radius: 50px;
			background-clip: content-box;
			background-color: transparent;
		}
		.scroll::-webkit-scrollbar-thumb {
			border: 4px solid transparent;
			border-radius: 50px;
			background-clip: content-box;
			background-color: rgba(0, 0, 0, 0.2);
			min-height: 40px;
		}
		.scroll.dark::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.4);
			min-height: 40px;
		}
		.scroll:hover::-webkit-scrollbar-track {
			background-color: rgba(0, 0, 0, 0.1);
		}
		.scroll.dark:hover::-webkit-scrollbar-track {
			background-color: rgba(255, 255, 255, 0.2);
		}
		.scroll:hover::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.3);
		}
		.scroll.dark:hover::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.6);
		}
		.scroll:hover::-webkit-scrollbar-track:hover {
			background-color: rgba(0, 0, 0, 0.2);
		}
		.scroll.dark:hover::-webkit-scrollbar-track:hover {
			background-color: rgba(255, 255, 255, 0.3);
		}
		.scroll:hover::-webkit-scrollbar-thumb:hover {
			background-color: rgba(0, 0, 0, 0.5);
		}
		.scroll.dark:hover::-webkit-scrollbar-thumb:hover {
			background-color: rgba(255, 255, 255, 0.8);
		}
		.scroll:hover::-webkit-scrollbar-thumb:active {
			background-color: rgba(0, 0, 0, 0.8);
		}
		.scroll.dark:hover::-webkit-scrollbar-thumb:active {
			background-color: rgba(255, 255, 255, 0.8);
		}
		.scroll.scroll-big::-webkit-scrollbar {
			width: 24px;
			height: 24px;
		}
		.scroll.scroll-big::-webkit-scrollbar-button {
			width: 0px;
			height: 0px;
		}
		.scroll.scroll-big::-webkit-scrollbar-corner {
			background-color: transparent;
		}
		.scroll.scroll-big::-webkit-scrollbar-track {
			border: 9px solid transparent;
			border-radius: 50px;
			background-clip: content-box;
			background-color: transparent;
		}
		.scroll.scroll-big::-webkit-scrollbar-thumb {
			border: 9px solid transparent;
			border-radius: 50px;
			background-clip: content-box;
			background-color: rgba(0, 0, 0, 0.2);
			min-height: 40px;
		}
		.scroll.scroll-big.dark::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.4);
			min-height: 40px;
		}
		.scroll.scroll-big:hover::-webkit-scrollbar-track {
			background-color: rgba(0, 0, 0, 0.1);
		}
		.scroll.scroll-big.dark:hover::-webkit-scrollbar-track {
			background-color: rgba(255, 255, 255, 0.2);
		}
		.scroll.scroll-big:hover::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.3);
		}
		.scroll.scroll-big.dark:hover::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.6);
		}
		.scroll.scroll-big:hover::-webkit-scrollbar-track:hover {
			background-color: rgba(0, 0, 0, 0.2);
		}
		.scroll.scroll-big.dark:hover::-webkit-scrollbar-track:hover {
			background-color: rgba(255, 255, 255, 0.3);
		}
		.scroll.scroll-big:hover::-webkit-scrollbar-thumb:hover {
			background-color: rgba(0, 0, 0, 0.5);
		}
		.scroll.scroll-big.dark:hover::-webkit-scrollbar-thumb:hover {
			background-color: rgba(255, 255, 255, 0.8);
		}
		.scroll.scroll-big:hover::-webkit-scrollbar-thumb:active {
			background-color: rgba(0, 0, 0, 0.8);
		}
		.scroll.scroll-big.dark:hover::-webkit-scrollbar-thumb:active {
			background-color: rgba(255, 255, 255, 0.8);
		}

		video {
			object-fit: cover;
			float: left;
			background: #fff;
			border-radius: 2px;
			display: inline-block;
			margin: 1rem;
			position: relative;
			height: 150px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			transition: all 0.5s cubic-bezier(.25,.8,.25,1);
			padding:1px;
			bottom: 0px;
			max-width: 200px;
			opacity: 1;
		}
		
		.disabled {
			height: 0px;
			opacity: 0;
		}
		
		video:hover {
			box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
			bottom: 125px;
			height: 300px;
			max-width: 400px;
		}
		video::before {
			content: "hola";
		}
		video::after {
			content: "hola";
		}

		#outher-container {
			margin: 0px;
			padding: 0px;
			width: 100%;
			position: fixed;
			bottom: 5px;
			height: 100%;
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
		}
		#container {
			position: absolute;
			bottom: 60px;
			margin: 0px;
			padding: 0px;
			height: 150px;
			display: flex;
		}
		
		.ready-dialog 
		{
			width: 640px;
			text-align: left;

		}
		.ready-dialog p 
		{
			color: black;
			font-size: 12pt;

		}
		.ready-dialog code
		{
			font-size: 12pt;

		}
			
		/***********************************/
		.bar-audio{
			display: block;
			margin: 0 auto;
			padding-left: 40px;
			padding-bottom: 5px;
		}
		bar-audio p.text-1{
			font-size: 8px;
			margin: 5px;
		}

		bar-audio p.text-1 span{
			font-size: 8px;
			padding-left: 155px;
		}

		.bg-bar-outher {
			width: 300px;
			text-align: left;
		}
		.bg-bar{
			margin: 0 auto;
			display:block;
			height:20px;
			width:202px;
			background: url("images/bar_audio.png");


		}
		.bar-inside{
			display:block;
			height:20px;
			width:0%;
			background: url("images/bar_audio_on.png");
		}
		#random {
			top: -8px;
			left: 15px;
		}
		
		.room-header {
			position: relative;
			top: 10px;
			margin: 0 auto;
		}
		
		.room-info  {
			background: #111;
			border-radius: 2px;
			width: 200px;
			height: 40px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			transition: all 0.5s cubic-bezier(.25,.8,.25,1);
			opacity: 0;
			padding-top: 15px;
			font-size: 14pt;
			color: white;
		}
		a {
			text-decoration: none !important;
		}
		
	</style>
	</head>
	<body>
	<div id="outher-container" class="scroll">
		<div class="room-header">
			<div class="room-info"> Room: <a href="" id="room-id"></a></div>
		</div>
		<div id="container">
			
				
		
		</div>
		
	</div>
	
	
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
		tabindex="-1" id="modalinfo" class="modal fade"
		style="z-index: 1200; top: 95px;">
		<div class="modal-dialog">
			<div class="modal-content">
<form action="#" id="ready-form">
				<div class="modal-header">
					<h4 class="modal-title">SFU Test154 Konfium</h4>
				</div>
				<div class="modal-body">
					
						<div class="alert alert-warning">Lütfen Tüm alanları Doldurunuz!</div>
					
					
					
					
						<div class="form-group">
							<label  for="roomId">Room Id</label>
							<input class="form-control" type="text" id="roomId" name="roomId" required> 
							
    					</div>
    					
    					<div class="form-group">
    						<label for="name">Adınız</label>
							<input class="form-control" type="text" id="name" name="name"  required> 
							
    					</div>
    					
					   <div class="form-group">
					   		<label for="name">Anahtar Şifreniz</label>
							<input class="form-control" type="text"  id="key" name="key" required> 
							
    				</div>
						
						
						
						<div class="mdl-selectfield">
							<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
								<input class="mdl-textfield__input" type="text" id="audio_devices" readonly tabIndex="-1" value="Default">
								<label for="audio_devices">
									<i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
								</label>
								<label for="audio_devices" class="mdl-textfield__label">Audio Device</label>
								<ul id="audio_devices_menu" for="audio_devices" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" style="width:300px">
								</ul>
							</div>
						</div>
						
						<div class="bg-bar-outher">
							<div class="bg-bar">
								<div class="voometer bar-inside" style="width: 5%;"></div>
							</div>
						</div>
					
				</div>
				<div class="modal-footer">
					
					<button type="button" class="btn btn-default" id="random">Rastgele Ata</button>
					<button type="submit" class="btn btn-danger"  id="connect" >Katıl</button>
				</div>
</form>
			</div>
		</div>
	</div>
	
	<script>
  $( function() {
	  $('#modalinfo').modal({backdrop: 'static', keyboard: false});
	  $('#modalinfo').modal('show');
  } );
  </script>
	</body>
		
</html>

Change
www/js/sfu.js


let participants;
let audioDeviceId;
let videoResolution = true;

//Get our url
const href = new URL(window.location.href);
//Get id
const roomId = href.searchParams.get("roomId");
//Get name
const name = href.searchParams.get("name");
//Get key
const key = href.searchParams.get("key");
//Get video
const nopublish = href.searchParams.has("nopublish");
//Get ws url from navigaro url
const url = "wss://"+href.host;
//Check support for insertabe media streams
const supportsInsertableStreams = !!RTCRtpSender.prototype.createEncodedVideoStreams;

if (href.searchParams.has ("video"))
	switch (href.searchParams.get ("video").toLowerCase ())
	{
		case "1080p":
			videoResolution = {
				width: {min: 1920, max: 1920},
				height: {min: 1080, max: 1080},
			};
			break;
		case "720p":
			videoResolution = {
				width: {min: 1280, max: 1280},
				height: {min: 720, max: 720},
			};
			break;
		case "576p":
			videoResolution = {
				width: {min: 720, max: 720},
				height: {min: 576, max: 576},
			};
			break;
		case "480p":
			videoResolution = {
				width: {min: 640, max: 640},
				height: {min: 480, max: 480},
			};
			break;
		case "320p":
			videoResolution = {
				width: {min: 320, max: 320},
				height: {min: 240, max: 240},
			};
			break;
		case "no":
			videoResolution = false;
			break;
	}


function addRemoteTrack(event)
{
	console.log(event);
	
	const track	= event.track;
	const stream	= event.streams[0];
	
	if (!stream)
		return console.log("addRemoteTrack() no stream")
	
	//Check if video is already present
	let video = container.querySelector("video[id='"+stream.id+"']");
	
	//Check if already present
	if (video)
		//Ignore
		return console.log("addRemoteTrack() video already present for "+stream.id);
	
	//Listen for end event
	track.onended=(event)=>{
		console.log(event);
	
		//Check if video is already present
		let video = container.querySelector("video[id='"+stream.id+"']");

		//Check if already present
		if (!video)
			//Ignore
			return console.log("removeRemoteTrack() video not present for "+stream.id);

		container.removeChild(video);
	}
	
	//Create new video element
	video = document.createElement("video");
	//Set same id
	video.id = stream.id;
	//Set src stream
	video.srcObject = stream;
	//Set other properties
	video.autoplay = true;
	video.play();
	//Append it
	container.appendChild(video);
}
	
function addLocalVideoForStream(stream,muted)
{
	//Create new video element
	const video = document.createElement("video");
	//Set same id
	video.id = stream.id;
	//Set src stream
	video.srcObject = stream;
	//Set other properties
	video.autoplay = true;
	video.muted = muted;
	video.play();
	//Append it
	container.appendChild(video);
}

/*
 Get some key material to use as input to the deriveKey method.
 The key material is a secret key supplied by the user.
 */
async function getRoomKey(roomId,secret) 
{
	const enc = new TextEncoder();
	const keyMaterial = await window.crypto.subtle.importKey(
		"raw",
		enc.encode(secret),
		{name: "PBKDF2"},
		false,
		["deriveBits", "deriveKey"]
	);
	return window.crypto.subtle.deriveKey(
		{
			name: "PBKDF2",
			salt: enc.encode(roomId),
			iterations: 100000,
			hash: "SHA-256"
		},
		keyMaterial,
		{"name": "AES-GCM", "length": 256},
		true,
		["encrypt", "decrypt"]
	);
}

  /*
   * 
   */
async function connect(url,roomId,name,secret) 
{
	let counter = 0;
	const roomKey = await getRoomKey(roomId,secret);
	async function encrypt(chunk, controller) {
		try {
			//Get iv
			const iv = new ArrayBuffer(4);
			//Create view, inc counter and set it
			new DataView(iv).setUint32(0,counter <65535 ? counter++ : counter=0);
			//Encrypt
			const ciphertext = await window.crypto.subtle.encrypt(
				{
					name: "AES-GCM",
					iv: iv
				},
				roomKey,
				chunk.data
			);
			//Set chunk data
			chunk.data = new ArrayBuffer(ciphertext.byteLength + 4);
			//Crate new encoded data and allocate size for iv
			const data = new Uint8Array(chunk.data);
			//Copy iv
			data.set(new Uint8Array(iv),0);
			//Copy cipher
			data.set(new Uint8Array(ciphertext),4);
			//Write
			controller.enqueue(chunk);
		} catch(e) {
		}
	}

	async function decrypt(chunk, controller) {
		try {
			//decrypt
			chunk.data =  await window.crypto.subtle.decrypt(
				{
				  name: "AES-GCM",
				  iv: new Uint8Array(chunk.data,0,4)
				},
				roomKey,
				new Uint8Array(chunk.data,4,chunk.data.byteLength - 4)
			);
			//Write
			controller.enqueue(chunk);
		} catch(e) {
		}
	}
	
	const isCryptoEnabled = !!secret && supportsInsertableStreams;

	var pc = new RTCPeerConnection({
		bundlePolicy				: "max-bundle",
		rtcpMuxPolicy				: "require",
		forceEncodedVideoInsertableStreams	: isCryptoEnabled
	});
	
	//Create room url
	const roomUrl = url +"?id="+roomId;
		
	var ws = new WebSocket(roomUrl);
	var tm = new TransactionManager(ws);
	
	pc.ontrack = (event) => {
		//If encrypting/decrypting
		if (isCryptoEnabled) 
		{
			//Create transfor strem fro decrypting
			const transform = new TransformStream({
				start() {},
				flush() {},
				transform: decrypt
			});
			//Get the receiver streams for track
			let receiverStreams = event.receiver.createEncodedVideoStreams();
			//Decrytp
			receiverStreams.readableStream
				.pipeThrough(transform)
				.pipeTo(receiverStreams.writableStream);
		}
		addRemoteTrack(event);
	};
	
	ws.onopen = async function()
	{
	        console.log("ws:opened");
		
		try
		{
			if (!nopublish)
			{
				const stream = await navigator.mediaDevices.getUserMedia({
					audio: {
						deviceId: audioDeviceId
					},
					video: videoResolution
				});

				console.debug("md::getUserMedia sucess",stream);

				//Play it
				addLocalVideoForStream(stream,true);
				//Add stream to peer connection
				for (const track of stream.getTracks())
				{
					//Add track
					const sender = pc.addTrack(track,stream);
					//If encrypting/decrypting
					if (isCryptoEnabled) 
					{
						//Get insertable streams
						const senderStreams = sender.createEncodedVideoStreams();
						//Create transform stream for encryption
						let senderTransformStream = new TransformStream({
							start() {},
							flush() {},
							transform: encrypt
						});
						//Encrypt
						senderStreams.readableStream
						    .pipeThrough(senderTransformStream)
						    .pipeTo(senderStreams.writableStream);
					}
  				}
			 }
			
			//Create new offer
			const offer = await pc.createOffer({
				offerToReceiveAudio: true,
				offerToReceiveVideo: true
			});

			console.debug("pc::createOffer sucess",offer);

			//Set it
			pc.setLocalDescription(offer);

			console.log("pc::setLocalDescription succes",offer.sdp);
			
			//Join room
			const joined = await tm.cmd("join",{
				name	: name,
				sdp	: offer.sdp
			});
			
			console.log("cmd::join success",joined);
			
			//Create answer
			const answer = new RTCSessionDescription({
				type	:'answer',
				sdp	: joined.sdp
			});
			
			//Set it
			await pc.setRemoteDescription(answer);
			
			console.log("pc::setRemoteDescription succes",answer.sdp);
			
			console.log("JOINED");
		} catch (error) {
			console.error("Error",error);
			ws.close();
		}
	};
	
	tm.on("cmd",async function(cmd) {
		console.log("ts::cmd",cmd);
		
		switch (cmd.name)
		{
			case "update" :
				try
				{
					console.log(cmd.data.sdp);
					
					//Create new offer
					const offer = new RTCSessionDescription({
						type : 'offer',
						sdp  : cmd.data.sdp
					});
					
					//Set offer
					await pc.setRemoteDescription(offer);
					
					console.log("pc::setRemoteDescription succes",offer.sdp);
					
					//Create answer
					const answer = await pc.createAnswer();
					
					console.log("pc::createAnswer succes",answer.sdp);
					
					//Only set it locally
					await pc.setLocalDescription(answer);
					
					console.log("pc::setLocalDescription succes",answer.sdp);
					
					//accept
					cmd.accept({sdp:answer.sdp});
					
				} catch (error) {
					console.error("Error",error);
					ws.close();
				}
				break;
		}
	});
	
	tm.on("event",async function(event) {
		console.log("ts::event",event);
		
		switch (event.name)
		{
			case "participants" :
				//update participant list
				participants = event.participants;
				break;	
		}
	});
}

navigator.mediaDevices.getUserMedia({
	audio: true,
	video: false
})
.then(function(stream){	

	//Set the input value
	audio_devices.value = stream.getAudioTracks()[0].label;
	
	//Get the select
	var menu = document.getElementById("audio_devices_menu");
	
	//Populate the device lists
	navigator.mediaDevices.enumerateDevices()
		.then(function(devices) {
			//For each one
			devices.forEach(function(device) 
			{
				//It is a mic?
				if (device.kind==="audioinput")
				{
					//Create menu item
					var li = document.createElement("li");
					//Populate
					li.dataset["val"] = device.deviceId;	
					li.innerText = device.label;
					li.className = "mdl-menu__item";
					
					//Add listener
					li.addEventListener('click', function() {
						console.log(device.deviceId);
						//Close previous
						stream.getAudioTracks()[0].stop();
						//Store device id
						audioDeviceId = device.deviceId
						//Get stream for the device
						navigator.mediaDevices.getUserMedia({
							audio: {
								deviceId: device.deviceId
							},
							video: false
						})
						.then(function(stream){	
							//Store it
							soundMeter.connectToSource(stream).then(draw);
						});
	
					});
					//Append
					menu.appendChild (li);
				}
			});
			//Upgrade
			getmdlSelect.init('.getmdl-select');
		        componentHandler.upgradeDom();
		})
		.catch(function(error){
			console.log(error);
		});
	
	var fps = 20;
	var now;
	var then = Date.now();
	var interval = 1000/fps;
	var delta;
	var drawTimer;
	var soundMeter = new SoundMeter(window);
	//Stop
	cancelAnimationFrame(drawTimer);

	function draw() {
		drawTimer = requestAnimationFrame(draw);

		now = Date.now();
		delta = now - then;

		if (delta > interval) {
			then = now ;
			var tot = Math.min(100,(soundMeter.instant*200));
			//Get all 
			const voometers = document.querySelectorAll (".voometer");
			//Set new size
			for (let i=0;i<voometers.length;++i)
				voometers[i].style.width = (Math.floor(tot/5)*5) + "%";
		}
	
	}
	soundMeter.connectToSource(stream).then(draw);
	
	var dialog = document.querySelector('dialog');
	//dialog.showModal();
	if (!supportsInsertableStreams)
		$('#key').html("<red>Your browser does not support insertable streams<red>");
	if (roomId)
	{
		$('#roomId').val(roomId);
		supportsInsertableStreams && $('#key').val(key);
		//$('#name').focus();
	}
	
	$( "#random" ).click(function() {
		$('#roomId').val(Math.random().toString(36).substring(7));
		$('#name').val(Math.random().toString(36).substring(7));
		$('#key').val(Math.random().toString(36).substring(7));
	});
	
	
	$( "form" ).submit(function( event ) {  
		$('#modalinfo').modal('hide');
		var a = document.querySelector(".room-info a");
		a.target = "_blank";
		a.href = "?roomId="+this.roomId.value;
		if (this.key.value)
			a.href += "&key="+encodeURI(this.key.value);
		a.innerText = this.roomId.value;
		a.parentElement.style.opacity = 1;
		connect(url, this.roomId.value, this.name.value,this.key.value);
		event.preventDefault();
		
	});
});
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@burakguder