Skip to content

Commit 56c63bd

Browse files
chrisdavidmillschrisdavidmills
committed
adding reporting api examples
1 parent 9712d74 commit 56c63bd

File tree

4 files changed

+180
-0
lines changed

4 files changed

+180
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
2929

3030
* The "pointer-lock" directory contains a simple demo to show usage of the Pointer Lock API. You can find more explanation of how the demo works at the main MDN [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) page. [Run the demo live](http://mdn.github.io/dom-examples/pointer-lock/).
3131

32+
* The "reporting-api" directory contains a couple of simple demos to show usage of the Reprting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](http://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
33+
3234
* The "screenleft-screentop" directory contains a demo to show how you could use the [Window.screenLeft](https://developer.mozilla.org/en-US/docs/Web/API/Window/screenLeft) and [Window.screenTop](https://developer.mozilla.org/en-US/docs/Web/API/Window/screenTop) properties to draw a circle on a canvas that always stays in the same physical place on the screen when you move your browser window. [Run the demo live](http://mdn.github.io/dom-examples/screenleft-screentop/).
3335

3436
* The "scrolltooptions" directory contains a demo to show how you could use the [ScrollToOptions](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) dictionary along with the [Window.ScrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) method to programmatically scroll a web page. [Run the demo live](http://mdn.github.io/dom-examples/scrolltooptions/).

‎reporting-api/.DS_Store

6 KB
Binary file not shown.

‎reporting-api/deprecation_report.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>ReportingObserver demo: Deprecation report</title>
5+
<meta charset="utf-8">
6+
<style>
7+
video {
8+
display: block;
9+
border: 2px solid black;
10+
margin: 0 auto;
11+
}
12+
13+
</style>
14+
</head>
15+
<body>
16+
<video controls>
17+
<p>Video not supported in your browser.</p>
18+
</video>
19+
20+
<button>Show reports</button>
21+
22+
<div class="output"></div>
23+
24+
<script>
25+
// Get reference to button
26+
const reportBtn = document.querySelector('button');
27+
28+
// Set up function to display reports
29+
function displayReports(reports) {
30+
const outputElem = document.querySelector('.output');
31+
const list = document.createElement('ul');
32+
outputElem.appendChild(list);
33+
34+
for(let i = 0; i < reports.length; i++) {
35+
let listItem = document.createElement('li');
36+
let textNode = document.createTextNode('Report ' + (i + 1) + ', type: ' + reports[i].type);
37+
listItem.appendChild(textNode);
38+
let innerList = document.createElement('ul');
39+
listItem.appendChild(innerList);
40+
list.appendChild(listItem);
41+
42+
for (let key in reports[i].body) {
43+
let innerListItem = document.createElement('li');
44+
let keyValue = reports[i].body[key];
45+
innerListItem.textContent = key + ': ' + keyValue;
46+
innerList.appendChild(innerListItem);
47+
}
48+
}
49+
}
50+
51+
// Set up reporting observer
52+
let options = {
53+
types: ['deprecation'],
54+
buffered: true
55+
}
56+
57+
let observer = new ReportingObserver(function(reports, observer) {
58+
reportBtn.onclick = () => displayReports(reports);
59+
}, options);
60+
61+
// try to use old-style getUserMedia
62+
const videoElem = document.querySelector('video');
63+
64+
const constraints = {
65+
audio: true,
66+
video: {
67+
width: 480,
68+
height: 320
69+
}
70+
}
71+
72+
observer.observe();
73+
74+
if(navigator.mozGetUserMedia) {
75+
navigator.mozGetUserMedia(
76+
constraints,
77+
success,
78+
failure);
79+
} else {
80+
navigator.getUserMedia(
81+
constraints,
82+
success,
83+
failure);
84+
}
85+
86+
let takenRecords = observer.takeRecords();
87+
console.log(takenRecords);
88+
89+
if(navigator.mozGetUserMedia) {
90+
navigator.mozGetUserMedia(
91+
constraints,
92+
success,
93+
failure);
94+
} else {
95+
navigator.getUserMedia(
96+
constraints,
97+
success,
98+
failure);
99+
}
100+
101+
// observer.disconnect();
102+
103+
function success(stream) {
104+
videoElem.srcObject = stream;
105+
videoElem.onloadedmetadata = () => videoElem.play();
106+
}
107+
108+
function failure(e) {
109+
console.log('The following gUM error occured: ' + e)
110+
}
111+
</script>
112+
113+
</body>
114+
</html>

‎reporting-api/intervention_report.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>ReportingObserver demo: Intervention report</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<button>Show reports</button>
9+
10+
<div class="output"></div>
11+
12+
<script>
13+
// Get reference to button
14+
const reportBtn = document.querySelector('button');
15+
16+
// Set up function to display reports
17+
function displayReports(reports) {
18+
const outputElem = document.querySelector('.output');
19+
const list = document.createElement('ul');
20+
outputElem.appendChild(list);
21+
22+
for(let i = 0; i < reports.length; i++) {
23+
let listItem = document.createElement('li');
24+
let textNode = document.createTextNode('Report ' + (i + 1) + ', type: ' + reports[i].type);
25+
listItem.appendChild(textNode);
26+
let innerList = document.createElement('ul');
27+
listItem.appendChild(innerList);
28+
list.appendChild(listItem);
29+
30+
for (let key in reports[i].body) {
31+
let innerListItem = document.createElement('li');
32+
let keyValue = reports[i].body[key];
33+
innerListItem.textContent = key + ': ' + keyValue;
34+
innerList.appendChild(innerListItem);
35+
}
36+
}
37+
}
38+
39+
// Set up reporting observer
40+
let options = {
41+
types: ['intervention'],
42+
buffered: true
43+
}
44+
45+
let observer = new ReportingObserver(function(reports, observer) {
46+
reportBtn.onclick = () => displayReports(reports);
47+
}, options);
48+
49+
observer.observe();
50+
51+
// try to autoplay some sound
52+
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
53+
let myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
54+
55+
for (let channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
56+
let nowBuffering = myArrayBuffer.getChannelData(channel);
57+
for (let i = 0; i < myArrayBuffer.length; i++) {
58+
nowBuffering[i] = Math.random() * 2 - 1;
59+
}
60+
}
61+
</script>
62+
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)