Skip to content

Instantly share code, notes, and snippets.

@iizukanao
Last active Aug 29, 2015
Embed
What would you like to do?
Live streaming while avoiding accumulating delay (replace YOUR_HOST with server's address)
<!doctype html>
<head>
<title>Live streaming with Strobe Media Playback</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, user-scalable=no">
</head>
<body>
<script src="lib/swfobject.js"></script>
<script src="lib/ParsedQueryString.js"></script>
<script>
var playerWidth = 480;
var playerHeight = 360;
// maximum allowed delay of live streaming
var delayTolerance = 1000; // milliseconds
// reconnect when the client doesn't receive any frame for this milliseconds
var mediaTimeout = 2000; // milliseconds
var parameters = {
src: 'rtmp://YOUR_HOST/live/mystream',
width: playerWidth,
height: playerHeight,
autoPlay: true, // start playing the media after page load
initialBufferTime : 0, // buffer to fill before play begins
expandedBufferTime : delayTolerance / 1000, // maximum buffer size
minContinuousPlayback : 0, // minimum playback time without pausing
liveBufferTime: 0, // buffer time for live content
streamType: 'live',
scaleMode: 'none', // don't scale the video width and height
verbose: true, // display detailed error messages for debugging
javascriptCallbackFunction: onPlayerEvent
};
var originTime = null; // system time for the media time zero
var timeoutTimer = null; // timeout id
var player = null; // Strobe Media Player object (element)
// called when a player event happened
function onPlayerEvent(playerId, eventName, eventObj) {
// grab the player object
if (player === null) {
player = document.getElementById(playerId);
}
if (eventName === 'timeupdate') { // time information
if (isNaN(eventObj.currentTime)) {
// ignore NaN
return;
}
if (eventObj.currentTime === 0) {
// ignore time zero
return;
}
var currentMediaTime = eventObj.currentTime * 1000;
var now = new Date().getTime();
if (originTime === null) {
originTime = now - currentMediaTime;
}
// calculate the media time from originTime
var projectedMediaTime = now - originTime;
var mediaTimeDiff = projectedMediaTime - currentMediaTime;
if (mediaTimeDiff > delayTolerance) { // the delay exceeds tolerance
// reload the stream
player.pause();
player.play2();
} else if (mediaTimeDiff < 0) { // originTime was late
// update originTime
originTime = now - currentMediaTime;
}
scheduleMediaTimeout();
} else if (eventName === 'play') { // play has begun
cancelMediaTimeout();
// reset originTime
originTime = null;
}
}
// cancel the media timeout
function cancelMediaTimeout() {
if (timeoutTimer !== null) {
clearTimeout(timeoutTimer);
}
}
// schedule the media timeout
function scheduleMediaTimeout() {
cancelMediaTimeout();
timeoutTimer = setTimeout(onMediaTimeout, mediaTimeout);
}
// called when the media has timed out
function onMediaTimeout() {
if (player.getState() === 'paused') { // player is paused
return;
}
// reload the stream
player.pause();
player.play2();
}
swfobject.embedSWF('StrobeMediaPlayback.swf', 'StrobeMediaPlayback',
playerWidth, playerHeight, '10.1.0', 'expressInstall.swf', parameters,
{allowFullScreen: 'true', wmode: 'opaque'},
{name: 'StrobeMediaPlayback'});
</script>
<div id="StrobeMediaPlayback">
<!-- fallback for devices without Flash is HLS streaming -->
<video src="http://YOUR_HOST/hls/index.m3u8" width="480" height="360" autoplay controls></video>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment