Skip to content

Instantly share code, notes, and snippets.

@Nemra1
Forked from fhdalikhan/index.html
Created April 20, 2020 23:06
Show Gist options
  • Save Nemra1/db990664fdff4eba8fb1657768c6c84e to your computer and use it in GitHub Desktop.
Save Nemra1/db990664fdff4eba8fb1657768c6c84e to your computer and use it in GitHub Desktop.
millicast.com paid webtrc service for video broadcasting
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment