-
Notifications
You must be signed in to change notification settings - Fork 25
/
vpxdec.html
110 lines (98 loc) · 3.5 KB
/
vpxdec.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VP8 - WebM JavaScript Decoder for every browser</title>
<style>
/* MetaWebPro font family licensed from fontshop.com. WOFF-FTW! */
@font-face {
font-family: 'MetaBlack';
src: url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.eot');
src: local('☺'),
url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.woff')
format('woff');
font-weight: bold;
}
</style>
<style type="text/css">
body {font:bold 18px/28px MetaBlack, Arial,sans-serif;color:#6D7581;}
h2 {font:bold 24px/28px MetaBlack, Arial,sans-serif;color:#6D7581;}
input {font: normal 14px "Arial", sans-serif;padding: 1px;color: #6D7581;}
</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="dixie.js"></script>
<script type="text/javascript">
function webmfile(filename) {
isActive=true;
disabledbuttons();
readfile(webmdata,filename);
}
var canvas, context;
var output;
var outputData;
var R, G, B;
var pos, outputData_pos;
var firsttime=true;
var plane;
var planeY_off, planeU_off, planeV_off;
var stride_UV_off, stride_Y_h_off, stride_UV_h_off, stride_RGBA_off;
function vpximg2canvas(img) {
if (firsttime) {
canvas = document.getElementById("vpximage"),
context = canvas.getContext("2d");
yuvheight = img.h;
yuvwidth = img.w;
height = img.d_h;
width = img.d_w;
//Draw YUV
canvas.height=height;
canvas.width=width;
output = context.createImageData(canvas.width, canvas.height);
outputData = output.data;
planeY_off=img.planes_off[0];
planeU_off=img.planes_off[1];
planeV_off=img.planes_off[2];
firsttime=false;
}
plane=img.planes[0];
for (var h=0;h<height;h++) {
stride_Y_h_off = (yuvwidth)*h
stride_UV_h_off = (yuvwidth>>1)*(h>>1)
stride_RGBA_off = (width<<2)*h
for (var w=0;w<width;w++) {
Y = plane[planeY_off+ w+stride_Y_h_off];
stride_UV_off = (w>>1)+stride_UV_h_off;
U = (plane[planeU_off+ stride_UV_off]) - 128;
V = (plane[planeV_off+ stride_UV_off]) - 128;
//alert(Y+' '+U+' '+V+' ');
R = (Y + 1.371*V);
G = (Y - 0.698*V - 0.336*U);
B = (Y + 1.732*U);
outputData_pos = (w<<2)+stride_RGBA_off;
outputData[0+outputData_pos] = R;
outputData[1+outputData_pos] = G;
outputData[2+outputData_pos] = B;
outputData[3+outputData_pos] = 255;
};
}
context.putImageData(output, 0, 0);
}</script>
</head>
<body style="font:Arial, Helvetica, sans-serif">
<h3>VP8 - WebM JavaScript Decoder for every browser</h3>
<p>Example Files:</p>
<p>
<input type="button" value="webm/sync_def_PF-0_AF-33-BG_FF-33.webm" onclick="webmfile(this.value)" />
<input type="button" value="webm/The_Google_Story.webm" onclick="webmfile(this.value)" />
</p>
<canvas id="vpximage" style="border:1px solid black"></canvas>
<div style="font-size:18px">Timecode: <div id="timecode"></div></div>
<div style="font-size:18px">Frame: <div id="frame"></div></div>
<div style="font-size:18px">Render: <div id="render"></div></div>
<br />
<br />
<br />
VP8 - WebM JavaScript Decoder for every browser - This script work with Internet Explorer 9, Safari 4/5, Google Chrome, Mozilla Firefox, Opera, IPhone/IPad (iOS) & Android - implemented by <a href="http://webpjs.appspot.com">Dominik Homberger</a>
</body>
</html>