2017-05-30 18:29:13 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2017-06-19 23:53:00 +00:00
|
|
|
<title>Testing video rotation in basic video exchange </title>
|
2017-05-30 18:29:13 +00:00
|
|
|
<script src="../resources/testharness.js"></script>
|
|
|
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-07-05 18:54:14 +00:00
|
|
|
<video id="localVideo" autoplay playsInline width="320" height="240"></video>
|
|
|
|
|
<video id="remoteVideo" autoplay playsInline width="320" height="240"></video>
|
|
|
|
|
<canvas id="canvas0" width="320" height="240"></canvas>
|
2017-05-30 18:29:13 +00:00
|
|
|
<canvas id="canvas1" width="320" height="240"></canvas>
|
|
|
|
|
<canvas id="canvas2" width="320" height="240"></canvas>
|
|
|
|
|
<canvas id="canvas3" width="320" height="240"></canvas>
|
|
|
|
|
<script src ="routines.js"></script>
|
|
|
|
|
<script>
|
2019-07-05 18:54:14 +00:00
|
|
|
function isVideoBlack(video, canvasId)
|
2017-05-30 18:29:13 +00:00
|
|
|
{
|
2019-07-05 18:54:14 +00:00
|
|
|
var canvas = document.getElementById(canvasId);
|
2017-05-30 18:29:13 +00:00
|
|
|
canvas.width = video.videoWidth;
|
|
|
|
|
canvas.height = video.videoHeight;
|
|
|
|
|
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
|
|
|
|
|
|
imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
|
|
|
|
|
data = imageData.data;
|
|
|
|
|
for (var cptr = 0; cptr < canvas.width * canvas.height; ++cptr) {
|
|
|
|
|
// Approximatively black pixels.
|
|
|
|
|
if (data[4 * cptr] > 30 || data[4 * cptr + 1] > 30 || data[4 * cptr + 2] > 30)
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
function pollVideoBlackCheck(expected, video, canvasId, resolve)
|
2017-05-30 18:29:13 +00:00
|
|
|
{
|
2019-07-05 18:54:14 +00:00
|
|
|
if (isVideoBlack(video, canvasId) === expected) {
|
2017-05-30 18:29:13 +00:00
|
|
|
resolve();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
setTimeout(() => pollVideoBlackCheck(expected, video, canvasId, resolve), 100);
|
2017-05-30 18:29:13 +00:00
|
|
|
}
|
|
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
function checkVideoBlack(expected, video, canvasId)
|
2017-05-30 18:29:13 +00:00
|
|
|
{
|
|
|
|
|
return new Promise((resolve, reject) => {
|
2019-07-05 18:54:14 +00:00
|
|
|
pollVideoBlackCheck(expected, video, canvasId, resolve);
|
|
|
|
|
setTimeout(() => reject("checkVideoBlack timed out for '" + canvasId + "', expected " + expected), 5000);
|
2017-05-30 18:29:13 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var track;
|
|
|
|
|
promise_test((test) => {
|
|
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.setUserMediaPermission(true);
|
|
|
|
|
|
|
|
|
|
return navigator.mediaDevices.getUserMedia({video: {width: 320, height: 240, facingMode: "environment"}}).then((localStream) => {
|
2019-07-05 18:54:14 +00:00
|
|
|
localVideo.srcObject = localStream;
|
2017-05-30 18:29:13 +00:00
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
track = localStream.getVideoTracks()[0];
|
|
|
|
|
|
|
|
|
|
createConnections((firstConnection) => {
|
|
|
|
|
firstConnection.addTrack(track, localStream);
|
|
|
|
|
if (window.internals)
|
|
|
|
|
internals.applyRotationForOutgoingVideoSources(firstConnection);
|
|
|
|
|
}, (secondConnection) => {
|
|
|
|
|
secondConnection.ontrack = (trackEvent) => {
|
2017-06-19 23:53:00 +00:00
|
|
|
resolve(trackEvent.streams[0]);
|
2017-05-30 18:29:13 +00:00
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
setTimeout(() => reject("Test timed out"), 5000);
|
|
|
|
|
});
|
|
|
|
|
}).then((remoteStream) => {
|
2019-07-05 18:54:14 +00:00
|
|
|
remoteVideo.srcObject = remoteStream;
|
|
|
|
|
return remoteVideo.play();
|
2017-05-30 18:29:13 +00:00
|
|
|
});
|
|
|
|
|
}, "Setting video exchange");
|
|
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
promise_test(async (test) => {
|
|
|
|
|
await checkVideoBlack(false, remoteVideo, "canvas0");
|
|
|
|
|
await waitForVideoSize(remoteVideo, 320, 240);
|
2017-05-30 18:29:13 +00:00
|
|
|
}, "Track is enabled, video should not be black");
|
|
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
promise_test(async (test) => {
|
|
|
|
|
await checkVideoBlack(false, localVideo, "canvas0");
|
|
|
|
|
await waitForVideoSize(localVideo, 320, 240);
|
|
|
|
|
|
|
|
|
|
if (window.internals)
|
|
|
|
|
window.internals.setCameraMediaStreamTrackOrientation(track, 90);
|
2019-12-03 16:28:22 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.setMockCameraOrientation(90);
|
2019-07-05 18:54:14 +00:00
|
|
|
|
|
|
|
|
await checkVideoBlack(false, localVideo, "canvas1");
|
|
|
|
|
await waitForVideoSize(localVideo, 240, 320);
|
|
|
|
|
}, "Track is enabled and rotated, local video should not be black and should change size");
|
|
|
|
|
|
2017-05-30 18:29:13 +00:00
|
|
|
promise_test((test) => {
|
|
|
|
|
if (window.internals)
|
|
|
|
|
window.internals.setCameraMediaStreamTrackOrientation(track, 90);
|
2019-12-03 16:28:22 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.setMockCameraOrientation(90);
|
2017-05-30 18:29:13 +00:00
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
return checkVideoBlack(false, remoteVideo, "canvas2").then(() => {
|
|
|
|
|
return waitForVideoSize(remoteVideo, 240, 320);
|
2017-05-30 18:29:13 +00:00
|
|
|
});
|
2019-07-05 18:54:14 +00:00
|
|
|
}, "Track is enabled and rotated, remote video should not be black and should change size");
|
2019-05-07 21:07:00 +00:00
|
|
|
|
|
|
|
|
promise_test((test) => {
|
|
|
|
|
if (window.internals)
|
|
|
|
|
window.internals.setCameraMediaStreamTrackOrientation(track, 180);
|
2019-12-03 16:28:22 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.setMockCameraOrientation(180);
|
2019-05-07 21:07:00 +00:00
|
|
|
|
2019-07-05 18:54:14 +00:00
|
|
|
return checkVideoBlack(false, remoteVideo, "canvas3").then(() => {
|
|
|
|
|
return waitForVideoSize(remoteVideo, 320, 240);
|
2019-05-07 21:07:00 +00:00
|
|
|
});
|
|
|
|
|
}, "Track is enabled and rotated again, video should not be black and should change size");
|
2017-05-30 18:29:13 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
