HRD Emulator in HTML5

Posted on March 21, 2012 by Moto

Just like MPEG-2 video uses VBV (Video Buffer Verifier), H.264 standard uses HRD (Hypothetical Reference Decoder) to define correctness of streams.

One of the verification provided by HRD is CPB buffer fullness. The idea is simple; feed H.264 stream to HRD and monitor the CPB fullness. Make sure the fullness never goes negative nor above the CPB buffer size. The importance of this buffer fullness requirement was explained here.

HRD defines the CPB fullness in somewhat counter intuitive way. To make it easy, I wrote an interactive HRD emulator in HTML5.

HRD Emulator (CBR)

The blue line the number of bits entered to HRD over time. The input rate is constant in CBR mode, i.e. the blue line is straight. The red line is the number of bits removed (= Decoded) from CPB. Thus, the CPB fullness is the blue line minus the red line for a given time.

Let’s select the VBR in Rate Control Mode.

HRD Emulator (VBR)

The blue line now has some periods where the input rate is zero. H.264 standard uses init_cpb_removal_delay to control the period; Bits for a picture N can enter HRD only after the picture decode time minus init_cpb_removal_delay.

To see this rule more clearly, check “Show init_cpb_removal_delay” option. When the last bit of picture N – 1 arrives before the picture N decoding time minus init_cpb_removal_delay, the input rate goes down to zero.

HRD (VBR) with init_cpb_removal_delay

The value of init_cpb_removal_delay also determines the initial decoding delay. It’s currently set to 50 ms. It means the first picture is decoded 50 ms after the first bit of the picture enters HRD.

The initial decoding delay determines the channel switching delay as discussed here. Can we reduce it to make channel switching faster?

HRD underflow due to the short initial delay

Not really. As shown above, reducing the value of init_cpb_removal_delay resulted in the underflow error (the red line crosses the blue line).

H.264 standard has introduced another parameter to allow the reduction of initial decoding delay at the expense of increased average bit rate. Here we have init_cpb_removal_delay_offset parameter. It’s added to init_cpb_removal_delay for every picture except the first one.

HRD with non-zero init_cpb_removal_delay_offset

H.264 HRD provides these parameters to encoders so that they can choose optimal bit stream configuration for each target devices.

Here are HTML and Java Script of the HRD emulator above.

<html>

<head>

<title>HRD Emulator</title>

#plot {

float : left

}

#control-container {

float : left

}

#widget {

float : right;

width : 10em

}

#heading {

float : left

}

</style>

</head>

</div>

</div>

<div class="heading">initial_cpb_removal_delay [<span id="showICRD"> </span> ms]</div>

<div>

</div>

<div class="heading">initial_cpb_removal_delay_offset [<span id="showICRDO"> </span> ms]</div>

<div>

</div>

<div>Rate Control Mode</div>

<div>

<input type="radio" name="mode" value="cbr" onClick="setMode('cbr'); update()" checked="checked" />CBR

</div>

<div>

<input type="radio" name="mode" value="vbr" onClick="setMode('vbr'); update()" />VBR

</div>

<div>

<input type="checkbox" id="isICRDVisible" onClick="update()"/>Show init_cpb_removal_delay

</div>

<div>

<input type="checkbox" id="isICRDOVisible" onClick="update()"/>Show init_cpb_removal_delay_offset

</div>

</div>

</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

// Save this as "script.js"

var canvas;

var picture = new Array();

var pictureDuration = 900900;

var initial_cpb_removal_delay = 900900;

var initial_cpb_removal_delay_offset = 90090;

var cbr_flag = true;

function init()

{

canvas = document.getElementById('canvas');

resetStream();

update();

}

function resetStream()

{

var bit_rate = document.getElementById('bitRate').value * 1000;

var averagePicSize = pictureDuration / 27000000 * bit_rate / 8;

for(var i = 0; i < 10; i++){

picture[i] = averagePicSize + (Math.random() - 0.5) * averagePicSize;

}

function tickToX(tick)

{

return tick / 900900 * 64;

}

function levelToY(level)

{

return canvas.height - level / 50;

}

function drawDecodePictures(ctx)

{

ctx.strokeStyle = 'rgba(255, 0, 0, 255)';

ctx.beginPath();

ctx.moveTo(0, levelToY(0));

ctx.lineTo(tickToX(initial_cpb_removal_delay), levelToY(0));

var prevX = tickToX(initial_cpb_removal_delay)

var prevLevel = 0;

for(var i = 0; i < 50; i++){

var level = prevLevel + picture[i];

var x1 = prevX;

var x2 = prevX + tickToX(pictureDuration)

var y = levelToY(level);

ctx.lineTo(x1, y);

ctx.lineTo(x2, y);

prevLevel = level;

prevX = x2

}

ctx.stroke();

}

function levelFromPeriod(period, bitRate)

{

return period / 27000000.0 * bitRate / 8;

}

function drawInputData(ctx)

{

var t_af = new Array();

var t_ai = new Array();

var t_ai_earliest = new Array();

var t_rn = new Array();

var bit_rate = document.getElementById('bitRate').value * 1000;

t_ai[0] = 0;

t_af[0] = picture[0] * 8 * 27000000 / bit_rate;

t_rn[0] = initial_cpb_removal_delay;

for(var n = 1; n < picture.length; n++)

{

t_rn[n] = t_rn[n - 1] + pictureDuration;

if(cbr_flag == true)

{

t_ai[n] = t_af[n - 1];

}

else

{

t_ai_earliest = t_rn[n] - (initial_cpb_removal_delay + initial_cpb_removal_delay_offset);

t_ai[n] = Math.max(t_af[n - 1], t_ai_earliest);

}

t_af[n] = t_ai[n] + picture[n] * 8 * 27000000 / bit_rate;

}

ctx.strokeStyle = 'rgba(0, 0, 255, 255)';

ctx.beginPath();

ctx.moveTo(tickToX(0), levelToY(0));

var level = 0;

for(var n = 0; n < picture.length; n++)

{

ctx.lineTo(tickToX(t_ai[n]), levelToY(level));

level += picture[n];

ctx.lineTo(tickToX(t_af[n]), levelToY(level));

}

ctx.stroke();

level = 0;

for(var n = 0; n < picture.length; n++)

{

var isICRDVisible = document.getElementById("isICRDVisible").checked;

if(isICRDVisible){

// draw initial_cpb_removal_delay period

var icrd_x1 = tickToX(t_rn[n] - initial_cpb_removal_delay)

var icrd_x2 = tickToX(t_rn[n])

var icrd_y = levelToY(level) - 4

ctx.strokeStyle = 'rgba(0, 0, 0, 255)';

ctx.beginPath();

ctx.moveTo(icrd_x1, icrd_y);

ctx.lineTo(icrd_x2, icrd_y);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(icrd_x1 + 2, icrd_y - 2);

ctx.lineTo(icrd_x1, icrd_y);

ctx.lineTo(icrd_x1 + 2, icrd_y + 2);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(icrd_x2 - 2, icrd_y - 2);

ctx.lineTo(icrd_x2, icrd_y);

ctx.lineTo(icrd_x2 - 2, icrd_y + 2);

ctx.stroke();

}

var isICRDOVisible = document.getElementById("isICRDOVisible").checked;

if(isICRDOVisible){

// draw initial_cpb_removal_delay period

var icrdo_x1 = tickToX(t_rn[n] - initial_cpb_removal_delay - initial_cpb_removal_delay_offset)

var icrdo_x2 = icrd_x1

var icrdo_y = levelToY(level) - 4

ctx.strokeStyle = 'rgba(0, 0, 0, 255)';

ctx.beginPath();

ctx.moveTo(icrdo_x1, icrdo_y);

ctx.lineTo(icrdo_x2, icrdo_y);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(icrdo_x1 + 2, icrdo_y - 2);

ctx.lineTo(icrdo_x1, icrdo_y);

ctx.lineTo(icrdo_x1 + 2, icrdo_y + 2);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(icrdo_x2 - 2, icrdo_y - 2);

ctx.lineTo(icrdo_x2, icrdo_y);

ctx.lineTo(icrdo_x2 - 2, icrdo_y + 2);

ctx.stroke();

}

level += picture[n];

}

function setMode(mode)

{

cbr_flag = mode == "cbr";

}

function updateUI(uiName, valueName)

{

document.getElementById(uiName).innerHTML = document.getElementById(valueName).value

}

function update()

{

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(255, 255, 255, 255)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

updateUI("showBitRate", "bitRate");

updateUI("showICRD", "initial_cpb_removal_delay");

updateUI("showICRDO", "initial_cpb_removal_delay_offset");

initial_cpb_removal_delay = document.getElementById('initial_cpb_removal_delay').value * 27000;

initial_cpb_removal_delay_offset = document.getElementById('initial_cpb_removal_delay_offset').value * 27000;

drawDecodePictures(ctx);

drawInputData(ctx);

};

HRD Emulator in HTML5的更多相关文章

PhoneJS - HTML5 JavaScript 移动开发框架
大伙儿都知道有很多基于HTML5的移动应用框架.下一代开发工具将帮助开发者远离那些难学和让人费劲的原生SDK语言,如Objective-C,Java等.大家都知道,HTML5代表着交叉平台如移动应用程 ...
【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...
移动web开发前准备知识了解（html5、jquery）笔记
1.经常使用插件工具 chrome插件: Mobile & Tablet Emulator(用于常见移动端适配):(重点) Mobile Emulator is an useful o ...
使用HTML5开发Kinect体感游戏
一.简介我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

随机推荐

Redis主从实战
为了提升redis高可用性,除了备份redis dump数据之外,还需要创建redis主从架构,可以利用从将数据库持久化,(我们所说的数据持久化将是将数据保存到写磁盘上,保证不会因为断电等因素丢失数据 ...
seafile增加邮件服务功能
这个很简单哈,直接上配置.此处我用的163邮箱 vim /opt/seafile/conf/seahub_settings.py ### 163邮箱配置测试 ### EMAIL_USE_SSL = F ...
eclipse启动web应用报错
错误:The origin server did not find a current representation for the target resource or is not willing ...
Python学习（三） —— 基本数据类型
基本数据类型一.整数类型(int) 32位机器,整数的位数为32位,取值范围为-2**31~2**31-1,即-2147483648~2147483647 64位机器,整数的位数是64位,取值范围位 ...
phpMyAdmin 安装教程全攻略
管理MYSQL数据库的最好工具是PHPmyAdmin,现在最新版本是phpMyAdmin 2.9.0.2,这是一个国际上开源的软件,一直在更新版本,你可以从 http://www.phpmyadmin ...
Machine Learning 算法可视化实现1 - 线性回归
一.原理和概念 1.回归回归最简单的定义是,给出一个点集D,用一个函数去拟合这个点集.而且使得点集与拟合函数间的误差最小,假设这个函数曲线是一条直线,那就被称为线性回归:假设曲线是一条二次曲线,就被 ...
LeetCode 20. 有效的括号( 括号配对 )
给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...
C语言中的模运算-hdu6124（打表，找规律）
题目链接:https://vjudge.net/problem/HDU-6124 题目描述: 题目大意就是给你一个数,判断这个数 % 其它数后共有几种结果. 这题对我来说最大的难点是我不太知道每个数 ...
SORT--不要仅限于题目中
输入n,m 表示输入n个数输出前m个最大的数 Input The input file contains many test cases. Each case has 2 lines. The fir ...
HDU 1811 Rank of Tetris 【拓扑排序】+【并查集】
<题目链接> 题目大意: 给你N个点(编号从0到N-1)和M个关系,要你判断这个图的所有点的顺序是否可以全部确定.不过对于任意点的关系可能存在A>B或A<B或A=B三种情况,如 ...

HRD Emulator in HTML5

HRD Emulator in HTML5的更多相关文章

随机推荐

热门专题