Created
April 2, 2018 15:39
-
-
Save alvinthen/f2e15d7b25c0651dafda8dedd4311b55 to your computer and use it in GitHub Desktop.
Kurento browser
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ws = new WebSocket('ws://localhost:8080'); | |
var videoInput; | |
var videoOutput; | |
var webRtcPeer; | |
var state = null; | |
const I_CAN_START = 0; | |
const I_CAN_STOP = 1; | |
const I_AM_STARTING = 2; | |
window.onload = function() { | |
console = new Console(); | |
console.log('Page loaded ...'); | |
videoInput = document.getElementById('videoInput'); | |
videoOutput = document.getElementById('videoOutput'); | |
setState(I_CAN_START); | |
} | |
window.onbeforeunload = function() { | |
ws.close(); | |
} | |
ws.onmessage = function(message) { | |
var parsedMessage = JSON.parse(message.data); | |
console.info('Received message: ' + message.data); | |
switch (parsedMessage.type) { | |
case 'SDP_ANSWER': | |
startResponse(parsedMessage); | |
break; | |
case 'error': | |
if (state == I_AM_STARTING) { | |
setState(I_CAN_START); | |
} | |
onError('Error message from server: ' + parsedMessage.message); | |
break; | |
case 'ICE_CANDIDATE': | |
webRtcPeer.addIceCandidate(parsedMessage.candidate) | |
break; | |
default: | |
if (state == I_AM_STARTING) { | |
setState(I_CAN_START); | |
} | |
onError('Unrecognized message', parsedMessage); | |
} | |
} | |
function start() { | |
console.log('Starting video call ...') | |
// Disable start button | |
setState(I_AM_STARTING); | |
showSpinner(videoInput, videoOutput); | |
console.log('Creating WebRtcPeer and generating local sdp offer ...'); | |
var options = { | |
localVideo: videoInput, | |
remoteVideo: videoOutput, | |
onicecandidate : onIceCandidate | |
} | |
webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly(options, function(error) { | |
if(error) return onError(error); | |
this.generateOffer(onOffer); | |
}); | |
} | |
function onIceCandidate(candidate) { | |
console.log('Local candidate' + JSON.stringify(candidate)); | |
var message = { | |
type : 'ICE_CANDIDATE', | |
candidate : candidate | |
}; | |
sendMessage(message); | |
} | |
function onOffer(error, offerSdp) { | |
if(error) return onError(error); | |
console.info('Invoking SDP offer callback function ' + location.host); | |
var message = { | |
type : 'START_LIVE_STREAM', | |
sdpOffer : offerSdp | |
} | |
sendMessage(message); | |
} | |
function onError(error) { | |
console.error(error); | |
} | |
function startResponse(message) { | |
setState(I_CAN_STOP); | |
console.log('SDP answer received from server. Processing ...'); | |
webRtcPeer.processAnswer(message.sdpAnswer); | |
} | |
function stop() { | |
console.log('Stopping video call ...'); | |
setState(I_CAN_START); | |
if (webRtcPeer) { | |
webRtcPeer.dispose(); | |
webRtcPeer = null; | |
var message = { | |
id : 'stop' | |
} | |
sendMessage(message); | |
} | |
hideSpinner(videoInput, videoOutput); | |
} | |
function setState(nextState) { | |
switch (nextState) { | |
case I_CAN_START: | |
$('#start').attr('disabled', false); | |
$('#start').attr('onclick', 'start()'); | |
$('#stop').attr('disabled', true); | |
$('#stop').removeAttr('onclick'); | |
break; | |
case I_CAN_STOP: | |
$('#start').attr('disabled', true); | |
$('#stop').attr('disabled', false); | |
$('#stop').attr('onclick', 'stop()'); | |
break; | |
case I_AM_STARTING: | |
$('#start').attr('disabled', true); | |
$('#start').removeAttr('onclick'); | |
$('#stop').attr('disabled', true); | |
$('#stop').removeAttr('onclick'); | |
break; | |
default: | |
onError('Unknown state ' + nextState); | |
return; | |
} | |
state = nextState; | |
} | |
function sendMessage(message) { | |
var jsonMessage = JSON.stringify(message); | |
console.log('Senging message: ' + jsonMessage); | |
ws.send(jsonMessage); | |
} | |
function showSpinner() { | |
for (var i = 0; i < arguments.length; i++) { | |
arguments[i].poster = './img/transparent-1px.png'; | |
arguments[i].style.background = 'center transparent url("./img/spinner.gif") no-repeat'; | |
} | |
} | |
function hideSpinner() { | |
for (var i = 0; i < arguments.length; i++) { | |
arguments[i].src = ''; | |
arguments[i].poster = './img/webrtc.png'; | |
arguments[i].style.background = ''; | |
} | |
} | |
/** | |
* Lightbox utility (to display media pipeline image in a modal dialog) | |
*/ | |
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) { | |
event.preventDefault(); | |
$(this).ekkoLightbox(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment