client/site_tests/video_WebRtcPeerConnectionWithCamera/loopback.html - mirrors/cros/chromiumos/third_party/autotest - Git at Google

 <!DOCTYPE html>
 <html>
 <head><title>Loopback test</title></head>
 <body>
   <video id="localVideo" width="1280" height="720" autoplay muted></video>
   <video id="remoteVideo" width="1280" height="720" autoplay muted></video>
 <script src="ssim.js"></script>
 <script src="blackframe.js"></script>
 <script>


 var results = {};
 var testProgress = 0;

 // Starts the test.
 function testCamera(resolution) {
   var test = new CameraTest(resolution);
   test.run();
 }

 // Returns the results to caller.
 function getResults() {
   return results;
 }

 function setResults(stats) {
   results = stats;
 }

 // Calculates averages of array values.
 function average(array) {
   var count = array.length;
   var total = 0;
   for (var i = 0; i < count; i++) {
     total += parseInt(array[i]);
   }
   return Math.floor(total / count);
 }

 // Actual test object.
 function CameraTest(resolutionArray) {
   this.resolution = resolutionArray;
   this.localStream = null;
   this.remoteStream = null;
   this.results = {cameraType: '', cameraErrors: [], peerConnectionStats: [],
       frameStats: {numBlackFrames: 0, numFrozenFrames:0, numFrames: 0}};

   this.inFps = [];
   this.outFps = [];
   // Variables associated with nearly-frozen frames detection.
   this.previousFrame = [];
   this.identicalFrameSsimThreshold = 0.985;
   this.frameComparator = new Ssim();

   this.remoteVideo = document.getElementById("remoteVideo");
   this.localVideo = document.getElementById("localVideo");
   this.localVideo.width = this.resolution[0].toString();
   this.localVideo.height = this.resolution[1].toString();
   this.remoteVideo.width = this.resolution[0].toString();
   this.remoteVideo.height = this.resolution[1].toString();
 }

 function resolutionMatchesIndependentOfRotation(aWidth, aHeight,
                                                 bWidth, bHeight) {
   return (aWidth === bWidth && aHeight === bHeight) ||
          (aWidth === bHeight && aHeight === bWidth);
 }

 CameraTest.prototype = {
   collectAndAnalyzeStats: function() {
     if (!resolutionMatchesIndependentOfRotation(this.localVideo.width,
         this.localVideo.height, this.resolution[0], this.resolution[1])) {
       this.reportError('resolution', 'Got resolution ' + this.resolution[0] +
           + 'x' + this.resolution[1] + ', expected resolution' +
           this.localVideo.width + 'x' + this.localVideo.height +
           ' or rotated version thereof');
     }
     this.gatherStats(this.localPeerConnection, 100, 20000,
         this.reportTestDone.bind(this));
   },

   setup: function() {
     this.canvas = document.createElement('canvas');
     this.canvas.width = localVideo.width;
     this.canvas.height = localVideo.height;
     this.context = this.canvas.getContext('2d');
     this.remoteVideo.onloadedmetadata = this.collectAndAnalyzeStats.bind(this);
     this.localVideo.addEventListener('play',
         this.startCheckingVideoFrames.bind(this), false);
   },

   startCheckingVideoFrames: function() {
     this.videoFrameChecker = setInterval(this.checkVideoFrame.bind(this), 20);
   },

   run: function() {
     this.setup();
     this.triggerGetUserMedia(this.resolution);
   },

   triggerGetUserMedia: function(resolution) {
     var constraints = {
       audio: false,
       video: {
         mandatory: {
           minWidth:  resolution[0],
           minHeight: resolution[1],
           maxWidth:  resolution[0],
           maxHeight: resolution[1]
         }
       }
     };
     try {
       this.doGetUserMedia(constraints, this.gotLocalStream.bind(this),
           this.onGetUserMediaError.bind(this));
     } catch (exception) {
       console.log('Unexpected exception: ', exception);
       this.reportError('gUM', 'doGetUserMedia failed: ' + exception);
     }
   },

   reportError: function(errorType, message) {
     this.results.cameraErrors.push([errorType, message]);
     console.log(message);
   },

   doGetUserMedia: function(constraints, onSuccess, onFail) {
     navigator.getUserMedia = navigator.getUserMedia ||
       navigator.webkitGetUserMedia;
     navigator.getUserMedia(constraints, onSuccess, onFail);
   },

   gotLocalStream: function(stream) {
     this.localStream = stream;
     var servers = null;

     this.localPeerConnection = new webkitRTCPeerConnection(servers);
     this.localPeerConnection.onicecandidate = this.gotLocalIceCandidate.bind(
         this);

     this.remotePeerConnection = new webkitRTCPeerConnection(servers);
     this.remotePeerConnection.onicecandidate = this.gotRemoteIceCandidate.bind(
         this);
     this.remotePeerConnection.onaddstream = this.gotRemoteStream.bind(this);

     this.localPeerConnection.addStream(this.localStream);
     this.localPeerConnection.createOffer(this.gotLocalDescription.bind(this));
     this.localVideo.src = URL.createObjectURL(stream);

     this.results.cameraType = stream.getVideoTracks()[0].label;
   },

   onGetUserMediaError: function(stream) {
     this.reportError('gUM', 'gUM call failed');
   },

   gatherStats: function(peerConnection, interval, durationMs, callback) {
     var startTime = new Date();
     var pollFunction = setInterval(gatherOneReport.bind(this), interval);
     function gatherOneReport() {
       var elapsed = new Date() - startTime;
       if (elapsed > durationMs) {
         console.log('Done gathering stats.');
         clearInterval(pollFunction);
         callback();
         return;
       }
       peerConnection.getStats(this.gotStats.bind(this));
     }
   },

   getStatFromReport: function(data, name) {
     if (data.type = 'ssrc' && data.stat(name)) {
       return data.stat(name);
     } else {
       return null;
     }
   },

   gotStats: function(response) {
     var reports = response.result();
     for (var i = 0; i < reports.length; ++i) {
       var report = reports[i];
       var incomingFps = this.getStatFromReport(report, 'googFrameRateInput');
       if (incomingFps == null) {
         // Skip on null.
         continue;
       }
       var outgoingFps = this.getStatFromReport(report, 'googFrameRateSent');
       // Save rates for later processing.
       this.inFps.push(incomingFps)
       this.outFps.push(outgoingFps);
     }
   },

   reportTestDone: function() {
     this.processStats();

     clearInterval(this.videoFrameChecker);

     setResults(this.results);

     testProgress = 1;
   },

   processStats: function() {
     if (this.inFps != [] && this.outFps != []) {
       var minInFps = Math.min.apply(null, this.inFps);
       var maxInFps = Math.max.apply(null, this.inFps);
       var averageInFps = average(this.inFps);
       var minOutFps = Math.min.apply(null, this.outFps);
       var maxOutFps = Math.max.apply(null, this.outFps);
       var averageOutFps = average(this.outFps);
       this.results.peerConnectionStats = [minInFps, maxInFps, averageInFps,
           minOutFps, maxOutFps, averageOutFps];
     }
   },

   checkVideoFrame: function() {
     this.context.drawImage(this.localVideo, 0, 0, this.canvas.width,
       this.canvas.height);
     var imageData = this.context.getImageData(0, 0, this.canvas.width,
         this.canvas.height);

       if (isBlackFrame(imageData.data, imageData.data.length)) {
         this.results.frameStats.numBlackFrames++;
       }

       if (this.frameComparator.calculate(this.previousFrame, imageData.data) >
         this.identicalFrameSsimThreshold) {
         this.results.frameStats.numFrozenFrames++;
       }

       this.previousFrame = imageData.data;
       this.results.frameStats.numFrames++;
       setTimeout(this.checkVideoFrame.bind(this), 20);
   },

   isBlackFrame: function(data, length) {
     var accumulatedLuma = 0;
     for (var i = 4; i < length; i += 4) {
       // Use Luma as in Rec. 709: Y′709 = 0.21R + 0.72G + 0.07B;
       accumulatedLuma += (0.21 * data[i] +  0.72 * data[i + 1]
           + 0.07 * data[i + 2]);
       // Early termination if the average Luma so far is bright enough.
       if (accumulatedLuma > (this.nonBlackPixelLumaThreshold * i / 4)) {
         return false;
       }
     }
     return true;
   },

   gotRemoteStream: function(event) {
     this.remoteVideo.src = URL.createObjectURL(event.stream);
   },

   gotLocalDescription: function(description) {
     this.localPeerConnection.setLocalDescription(description);
     this.remotePeerConnection.setRemoteDescription(description);
     this.remotePeerConnection.createAnswer(this.gotRemoteDescription.bind(
         this));
   },

   gotRemoteDescription: function(description) {
     this.remotePeerConnection.setLocalDescription(description);
     this.localPeerConnection.setRemoteDescription(description);
   },

   gotLocalIceCandidate: function(event) {
     if (event.candidate)
       this.remotePeerConnection.addIceCandidate(
         new RTCIceCandidate(event.candidate));
   },

   gotRemoteIceCandidate: function(event) {
     if (event.candidate)
       this.localPeerConnection.addIceCandidate(
         new RTCIceCandidate(event.candidate));
   },
 }

 window.onerror = function (message, filename, lineno, colno, error) {
   console.log("Something went wrong, here is the stack trace --> %s",
     error.stack);
 };
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head><title>Loopback test</title></head>
	<body>
	<video id="localVideo" width="1280" height="720" autoplay muted></video>
	<video id="remoteVideo" width="1280" height="720" autoplay muted></video>
	<script src="ssim.js"></script>
	<script src="blackframe.js"></script>
	<script>


	var results = {};
	var testProgress = 0;

	// Starts the test.
	function testCamera(resolution) {
	var test = new CameraTest(resolution);
	test.run();
	}

	// Returns the results to caller.
	function getResults() {
	return results;
	}

	function setResults(stats) {
	results = stats;
	}

	// Calculates averages of array values.
	function average(array) {
	var count = array.length;
	var total = 0;
	for (var i = 0; i < count; i++) {
	total += parseInt(array[i]);
	}
	return Math.floor(total / count);
	}

	// Actual test object.
	function CameraTest(resolutionArray) {
	this.resolution = resolutionArray;
	this.localStream = null;
	this.remoteStream = null;
	this.results = {cameraType: '', cameraErrors: [], peerConnectionStats: [],
	frameStats: {numBlackFrames: 0, numFrozenFrames:0, numFrames: 0}};

	this.inFps = [];
	this.outFps = [];
	// Variables associated with nearly-frozen frames detection.
	this.previousFrame = [];
	this.identicalFrameSsimThreshold = 0.985;
	this.frameComparator = new Ssim();

	this.remoteVideo = document.getElementById("remoteVideo");
	this.localVideo = document.getElementById("localVideo");
	this.localVideo.width = this.resolution[0].toString();
	this.localVideo.height = this.resolution[1].toString();
	this.remoteVideo.width = this.resolution[0].toString();
	this.remoteVideo.height = this.resolution[1].toString();
	}

	function resolutionMatchesIndependentOfRotation(aWidth, aHeight,
	bWidth, bHeight) {
	return (aWidth === bWidth && aHeight === bHeight) \|\|
	(aWidth === bHeight && aHeight === bWidth);
	}

	CameraTest.prototype = {
	collectAndAnalyzeStats: function() {
	if (!resolutionMatchesIndependentOfRotation(this.localVideo.width,
	this.localVideo.height, this.resolution[0], this.resolution[1])) {
	this.reportError('resolution', 'Got resolution ' + this.resolution[0] +
	+ 'x' + this.resolution[1] + ', expected resolution' +
	this.localVideo.width + 'x' + this.localVideo.height +
	' or rotated version thereof');
	}
	this.gatherStats(this.localPeerConnection, 100, 20000,
	this.reportTestDone.bind(this));
	},

	setup: function() {
	this.canvas = document.createElement('canvas');
	this.canvas.width = localVideo.width;
	this.canvas.height = localVideo.height;
	this.context = this.canvas.getContext('2d');
	this.remoteVideo.onloadedmetadata = this.collectAndAnalyzeStats.bind(this);
	this.localVideo.addEventListener('play',
	this.startCheckingVideoFrames.bind(this), false);
	},

	startCheckingVideoFrames: function() {
	this.videoFrameChecker = setInterval(this.checkVideoFrame.bind(this), 20);
	},

	run: function() {
	this.setup();
	this.triggerGetUserMedia(this.resolution);
	},

	triggerGetUserMedia: function(resolution) {
	var constraints = {
	audio: false,
	video: {
	mandatory: {
	minWidth: resolution[0],
	minHeight: resolution[1],
	maxWidth: resolution[0],
	maxHeight: resolution[1]
	}
	}
	};
	try {
	this.doGetUserMedia(constraints, this.gotLocalStream.bind(this),
	this.onGetUserMediaError.bind(this));
	} catch (exception) {
	console.log('Unexpected exception: ', exception);
	this.reportError('gUM', 'doGetUserMedia failed: ' + exception);
	}
	},

	reportError: function(errorType, message) {
	this.results.cameraErrors.push([errorType, message]);
	console.log(message);
	},

	doGetUserMedia: function(constraints, onSuccess, onFail) {
	navigator.getUserMedia = navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia;
	navigator.getUserMedia(constraints, onSuccess, onFail);
	},

	gotLocalStream: function(stream) {
	this.localStream = stream;
	var servers = null;

	this.localPeerConnection = new webkitRTCPeerConnection(servers);
	this.localPeerConnection.onicecandidate = this.gotLocalIceCandidate.bind(
	this);

	this.remotePeerConnection = new webkitRTCPeerConnection(servers);
	this.remotePeerConnection.onicecandidate = this.gotRemoteIceCandidate.bind(
	this);
	this.remotePeerConnection.onaddstream = this.gotRemoteStream.bind(this);

	this.localPeerConnection.addStream(this.localStream);
	this.localPeerConnection.createOffer(this.gotLocalDescription.bind(this));
	this.localVideo.src = URL.createObjectURL(stream);

	this.results.cameraType = stream.getVideoTracks()[0].label;
	},

	onGetUserMediaError: function(stream) {
	this.reportError('gUM', 'gUM call failed');
	},

	gatherStats: function(peerConnection, interval, durationMs, callback) {
	var startTime = new Date();
	var pollFunction = setInterval(gatherOneReport.bind(this), interval);
	function gatherOneReport() {
	var elapsed = new Date() - startTime;
	if (elapsed > durationMs) {
	console.log('Done gathering stats.');
	clearInterval(pollFunction);
	callback();
	return;
	}
	peerConnection.getStats(this.gotStats.bind(this));
	}
	},

	getStatFromReport: function(data, name) {
	if (data.type = 'ssrc' && data.stat(name)) {
	return data.stat(name);
	} else {
	return null;
	}
	},

	gotStats: function(response) {
	var reports = response.result();
	for (var i = 0; i < reports.length; ++i) {
	var report = reports[i];
	var incomingFps = this.getStatFromReport(report, 'googFrameRateInput');
	if (incomingFps == null) {
	// Skip on null.
	continue;
	}
	var outgoingFps = this.getStatFromReport(report, 'googFrameRateSent');
	// Save rates for later processing.
	this.inFps.push(incomingFps)
	this.outFps.push(outgoingFps);
	}
	},

	reportTestDone: function() {
	this.processStats();

	clearInterval(this.videoFrameChecker);

	setResults(this.results);

	testProgress = 1;
	},

	processStats: function() {
	if (this.inFps != [] && this.outFps != []) {
	var minInFps = Math.min.apply(null, this.inFps);
	var maxInFps = Math.max.apply(null, this.inFps);
	var averageInFps = average(this.inFps);
	var minOutFps = Math.min.apply(null, this.outFps);
	var maxOutFps = Math.max.apply(null, this.outFps);
	var averageOutFps = average(this.outFps);
	this.results.peerConnectionStats = [minInFps, maxInFps, averageInFps,
	minOutFps, maxOutFps, averageOutFps];
	}
	},

	checkVideoFrame: function() {
	this.context.drawImage(this.localVideo, 0, 0, this.canvas.width,
	this.canvas.height);
	var imageData = this.context.getImageData(0, 0, this.canvas.width,
	this.canvas.height);

	if (isBlackFrame(imageData.data, imageData.data.length)) {
	this.results.frameStats.numBlackFrames++;
	}

	if (this.frameComparator.calculate(this.previousFrame, imageData.data) >
	this.identicalFrameSsimThreshold) {
	this.results.frameStats.numFrozenFrames++;
	}

	this.previousFrame = imageData.data;
	this.results.frameStats.numFrames++;
	setTimeout(this.checkVideoFrame.bind(this), 20);
	},

	isBlackFrame: function(data, length) {
	var accumulatedLuma = 0;
	for (var i = 4; i < length; i += 4) {
	// Use Luma as in Rec. 709: Y′709 = 0.21R + 0.72G + 0.07B;
	accumulatedLuma += (0.21 * data[i] + 0.72 * data[i + 1]
	+ 0.07 * data[i + 2]);
	// Early termination if the average Luma so far is bright enough.
	if (accumulatedLuma > (this.nonBlackPixelLumaThreshold * i / 4)) {
	return false;
	}
	}
	return true;
	},

	gotRemoteStream: function(event) {
	this.remoteVideo.src = URL.createObjectURL(event.stream);
	},

	gotLocalDescription: function(description) {
	this.localPeerConnection.setLocalDescription(description);
	this.remotePeerConnection.setRemoteDescription(description);
	this.remotePeerConnection.createAnswer(this.gotRemoteDescription.bind(
	this));
	},

	gotRemoteDescription: function(description) {
	this.remotePeerConnection.setLocalDescription(description);
	this.localPeerConnection.setRemoteDescription(description);
	},

	gotLocalIceCandidate: function(event) {
	if (event.candidate)
	this.remotePeerConnection.addIceCandidate(
	new RTCIceCandidate(event.candidate));
	},

	gotRemoteIceCandidate: function(event) {
	if (event.candidate)
	this.localPeerConnection.addIceCandidate(
	new RTCIceCandidate(event.candidate));
	},
	}

	window.onerror = function (message, filename, lineno, colno, error) {
	console.log("Something went wrong, here is the stack trace --> %s",
	error.stack);
	};
	</script>
	</body>
	</html>