fhdalikhan/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

	<div id="messages">

	</div>

<script>

//Replace this variable with your token
const PUBLISH_TOKEN = "e9d0c1edf727c3c714b4b3ae76458203d53fe806e549ebdfe39b097d58190b24";
const streamName = 'k0f6qakz'; //Replace with your stream name.
let url; //Websocket URL path.
let jwt; //Authenticated API token.
let iceServers; // STUN/TURN server paths to better guarantee our connection.
var $messages = $('#messages');
const constraints = {audio: true, video: true};

//Authenticate publisher and get connection point.
let xhr = new XMLHttpRequest();
xhr.open("POST", "https://director.millicast.com/api/director/publish", true);
xhr.setRequestHeader("Authorization", `Bearer ${PUBLISH_TOKEN}`);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    let js = JSON.parse(xhr.responseText);
    console.log("success:",js);
    $messages.append("success:");
    url = js.data.urls[0];
    jwt = js.data.jwt;
    connect();
  }
}
xhr.send(JSON.stringify({ streamName: 'k0f6qakz' }));

// Create a peer connection to Millicast with WebRTC
async function connect(){
  console.log('connecting');
	$messages.append('connecting');
  //create Peer connection object, add TURN servers for fallback.
  let conf = {
    iceServers : iceServers,
    rtcpMuxPolicy : "require",
    bundlePolicy: "max-bundle"
  };
  let pc = new RTCPeerConnection(conf);

  // get a local stream, show it in a self-view and add it to be sent
	const stream = await navigator.mediaDevices.getUserMedia(constraints);
  //add media to connection
  stream.getTracks()
    .forEach(track => {
      console.log('audio track: ',track);
		$messages.append('audio track:');
		$messages.append(track);
      pc.addTrack(track, stream)
    });
  //connect with Websockets for handshake to media server.
  let ws = new WebSocket(url + "?token=" + jwt);
  ws.onopen = function(){
    //create a WebRTC offer to send to the media server
    let offer = pc.createOffer({
      offerToReceiveAudio: true,
      offerToReceiveVideo: true
    }).then( desc => {
      console.log('createOffer Success!');
		$messages.append('createOffer Success!');
      pc.setLocalDescription(desc)
        .then( () => {
            console.log('setLocalDescription Success!');
			$messages.append('setLocalDescription Success!');
            //set required information for media server.
            let data= {
              name : streamName,
              sdp : desc.sdp,
              codec : 'h264'
            }

            //create payload
            let payload = {
              type : "cmd",
              transId: Math.random() * 10000,
              name : 'publish',
              data : data
            }
            ws.send( JSON.stringify(payload) );
        })
        .catch(e => {
            console.log('setLocalDescription failed: ',e);
			$messages.append('setLocalDescription failed:');
			$messages.append(e);
        })
    }).catch( e => {
      console.log('createOffer Failed: ',e)
			$messages.append('createOffer Failed: ');
			$messages.append(e);
    });
  }

  ws.addEventListener('message', evt => {
    console.log('ws::message',evt);
	$messages.append('ws::message');
	$messages.append(evt);
    let msg = JSON.parse(evt.data);
    switch(msg.type){
      //Handle counter response coming from the Media Server.
      case "response":
        let data = msg.data;
        let answer = new RTCSessionDescription({
          type: 'answer',
          sdp : data.sdp + "a=x-google-flag:conference\r\n"
        });
        pc.setRemoteDescription(answer)
          .then(d => {
            console.log('setRemoteDescription Success! ');
            console.log('YOU ARE BROADCASTING!');
			$messages.append('setRemoteDescription Success! ');
			$messages.append('YOU ARE BROADCASTING!');
          })
          .catch(e => {
            console.log('setRemoteDescription failed: ',e);
			$messages.append('setRemoteDescription failed: ');
			$messages.append(e);
          });
        break;
    }
  })
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	</head>
	<body>

	<div id="messages">

	</div>

	<script>

	//Replace this variable with your token
	const PUBLISH_TOKEN = "e9d0c1edf727c3c714b4b3ae76458203d53fe806e549ebdfe39b097d58190b24";
	const streamName = 'k0f6qakz'; //Replace with your stream name.
	let url; //Websocket URL path.
	let jwt; //Authenticated API token.
	let iceServers; // STUN/TURN server paths to better guarantee our connection.
	var $messages = $('#messages');
	const constraints = {audio: true, video: true};

	//Authenticate publisher and get connection point.
	let xhr = new XMLHttpRequest();
	xhr.open("POST", "https://director.millicast.com/api/director/publish", true);
	xhr.setRequestHeader("Authorization", `Bearer ${PUBLISH_TOKEN}`);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.onreadystatechange = function() {
	if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
	let js = JSON.parse(xhr.responseText);
	console.log("success:",js);
	$messages.append("success:");
	url = js.data.urls[0];
	jwt = js.data.jwt;
	connect();
	}
	}
	xhr.send(JSON.stringify({ streamName: 'k0f6qakz' }));

	// Create a peer connection to Millicast with WebRTC
	async function connect(){
	console.log('connecting');
	$messages.append('connecting');
	//create Peer connection object, add TURN servers for fallback.
	let conf = {
	iceServers : iceServers,
	rtcpMuxPolicy : "require",
	bundlePolicy: "max-bundle"
	};
	let pc = new RTCPeerConnection(conf);

	// get a local stream, show it in a self-view and add it to be sent
	const stream = await navigator.mediaDevices.getUserMedia(constraints);
	//add media to connection
	stream.getTracks()
	.forEach(track => {
	console.log('audio track: ',track);
	$messages.append('audio track:');
	$messages.append(track);
	pc.addTrack(track, stream)
	});
	//connect with Websockets for handshake to media server.
	let ws = new WebSocket(url + "?token=" + jwt);
	ws.onopen = function(){
	//create a WebRTC offer to send to the media server
	let offer = pc.createOffer({
	offerToReceiveAudio: true,
	offerToReceiveVideo: true
	}).then( desc => {
	console.log('createOffer Success!');
	$messages.append('createOffer Success!');
	pc.setLocalDescription(desc)
	.then( () => {
	console.log('setLocalDescription Success!');
	$messages.append('setLocalDescription Success!');
	//set required information for media server.
	let data= {
	name : streamName,
	sdp : desc.sdp,
	codec : 'h264'
	}

	//create payload
	let payload = {
	type : "cmd",
	transId: Math.random() * 10000,
	name : 'publish',
	data : data
	}
	ws.send( JSON.stringify(payload) );
	})
	.catch(e => {
	console.log('setLocalDescription failed: ',e);
	$messages.append('setLocalDescription failed:');
	$messages.append(e);
	})
	}).catch( e => {
	console.log('createOffer Failed: ',e)
	$messages.append('createOffer Failed: ');
	$messages.append(e);
	});
	}

	ws.addEventListener('message', evt => {
	console.log('ws::message',evt);
	$messages.append('ws::message');
	$messages.append(evt);
	let msg = JSON.parse(evt.data);
	switch(msg.type){
	//Handle counter response coming from the Media Server.
	case "response":
	let data = msg.data;
	let answer = new RTCSessionDescription({
	type: 'answer',
	sdp : data.sdp + "a=x-google-flag:conference\r\n"
	});
	pc.setRemoteDescription(answer)
	.then(d => {
	console.log('setRemoteDescription Success! ');
	console.log('YOU ARE BROADCASTING!');
	$messages.append('setRemoteDescription Success! ');
	$messages.append('YOU ARE BROADCASTING!');
	})
	.catch(e => {
	console.log('setRemoteDescription failed: ',e);
	$messages.append('setRemoteDescription failed: ');
	$messages.append(e);
	});
	break;
	}
	})
	}

	</script>

	</body>
	</html>