Skip to content
This repository was archived by the owner on Oct 25, 2024. It is now read-only.

Commit 3ddfc22

Browse files
authored
Use videoTracks instead of videoTag for p2p CI process. (#333)
1 parent fd0f1e2 commit 3ddfc22

File tree

3 files changed

+84
-175
lines changed

3 files changed

+84
-175
lines changed

test/p2ptest/js/test.js

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,14 @@ TestClient.prototype = {
6767
var hasVideo = that.hasVideo(localStream)
6868
var hasAudio = that.hasAudio(localStream)
6969
if(hasVideo && hasAudio){
70+
that.debug("Create stream success");
7071
that.request["createLocal_success"]++
7172
}else{
7273
console.log("hasVideo is "+hasVideo +" and hasAudio is "+hasAudio);
7374
that.request["createLocal_failed"]++
7475
}
7576
that.request["localStreamId"] = localStream.id;
7677
that.debug("Create stream id:", localStream.id);
77-
that.showInPage(localStream, "LOCAL STREAM");
7878
}, err=>{
7979
console.error('Failed to create MediaStream, '+err);
8080
that.request["createLocal_failed"]++;
@@ -104,7 +104,6 @@ TestClient.prototype = {
104104
}
105105
that.request["localStreamId"] = localStream.id;
106106
that.debug("Create stream id:", localStream.id);
107-
that.showInPage(localStream, "LOCAL STREAM");
108107
}, err=>{
109108
console.error('Failed to create MediaStream, '+err);
110109
that.request["createLocal_failed"]++;
@@ -130,7 +129,6 @@ TestClient.prototype = {
130129
}
131130
that.request["localStreamId"] = localStream.id;
132131
that.debug("Create stream id:", localStream.id);
133-
that.showInPage(localStream, "LOCAL STREAM");
134132
}, err=>{
135133
console.error('Failed to create MediaStream, '+err);
136134
that.request["createLocal_failed"]++;
@@ -250,21 +248,6 @@ TestClient.prototype = {
250248
return result
251249
},
252250

253-
showInPage: function(stream) {
254-
var that = this;
255-
var video = document.createElement("video"),
256-
videoId = "stream" + stream.id;
257-
video.setAttribute("id", videoId);
258-
video.setAttribute("width", "320px");
259-
video.setAttribute("height", "240px");
260-
video.setAttribute("class", "video");
261-
video.setAttribute("autoplay", "autoplay");
262-
console.log('added video:'+stream.mediaStream);
263-
document.body.appendChild(video);
264-
var para = document.createElement("p");
265-
document.body.appendChild(para);
266-
video.srcObject = stream.mediaStream
267-
},
268251
};
269252

270253
TestClient.prototype.constructor = TestClient;

test/p2ptest/js/videoFrameChecker.js

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,12 @@ Ssim.prototype = {
7676
}
7777
};
7878

79-
function VideoFrameChecker(videoElement) {
79+
function VideoFrameChecker(stream, canvasElement) {
8080
this.frameStats = {
8181
numFrozenFrames: 0,
8282
numBlackFrames: 0,
8383
numFrames: 0
8484
};
85-
console.log("VideoFrameChecker videoElements is ,", videoElement);
8685
this.running_ = true;
8786

8887
this.nonBlackPixelLumaThreshold = 20;
@@ -94,65 +93,67 @@ function VideoFrameChecker(videoElement) {
9493
this.differenceThreshold = 0;
9594
this.frameComparator = new Ssim();
9695

97-
this.canvas_ = document.createElement('canvas');
98-
this.videoElement_ = videoElement;
99-
console.log("VideoFrameChecker videoElements videoWith is ,", this.videoElement_.videoWidth);
100-
console.log("VideoFrameChecker videoElements videoHeightis ,", this.videoElement_.videoHeight);
96+
this.canvas_ = canvasElement;
97+
this.stream_ = stream;
10198
this.listener_ = this.checkVideoFrame_.bind(this);
102-
this.videoElement_.addEventListener('play', this.listener_, false);
10399
}
104100

105101
VideoFrameChecker.prototype = {
106-
stop: function() {
107-
this.videoElement_.removeEventListener('play' , this.listener_);
102+
stop: function() {
108103
this.running_ = false;
109104
},
110105

111106
getCurrentImageData_: function() {
112-
console.log("GetCurrentImageData_ videoElements videoWith is ,", this.videoElement_);
113-
console.log("GetCurrentImageData_ videoElements videoHeightis ,", this.videoElement_);
114-
this.canvas_.width = this.videoElement_.videoWidth;
115-
this.canvas_.height = this.videoElement_.videoHeight;
116-
117-
if(this.canvas_.width == 0 || this.canvas_.height == 0) {
118-
return;
119-
}
120-
121-
var context = this.canvas_.getContext('2d');
122-
context.drawImage(this.videoElement_, 0, 0, this.canvas_.width,
123-
this.canvas_.height);
124-
return context.getImageData(0, 0, this.canvas_.width, this.canvas_.height);
107+
return new Promise((resolve,reject)=>{
108+
const track = this.stream_.mediaStream.getVideoTracks()[0];
109+
let imageCapture = new ImageCapture(track);
110+
var context = this.canvas_.getContext('2d');
111+
setTimeout(()=>{
112+
imageCapture.grabFrame().then((imageBitmap)=>{
113+
context.drawImage(imageBitmap, 0, 0, 320, 240);
114+
resolve(context)
115+
}).catch((err)=>{
116+
console.log("err.name:",err.name)
117+
reject(err)
118+
})
119+
}, 200)
120+
})
125121
},
126122

127123
checkVideoFrame_: function() {
128124
if (!this.running_) {
129125
return;
130126
}
131-
if (this.videoElement_.ended) {
132-
return;
133-
}
134-
var imageData = this.getCurrentImageData_();
135-
if(!imageData) {
136-
console.log("CureentImageData is ", imageData.data);
137-
return;
138-
}
139-
if (this.isBlackFrame_(imageData.data, imageData.data.length)) {
140-
this.frameStats.numBlackFrames++;
141-
}
142-
console.log("This.frameComparator.calculate(this.previousFrame_, imageData.data)", this.frameComparator.calculate(this.previousFrame_, imageData.data));
143-
console.log("This.differenceThreshold is ",this.differenceThreshold);
144-
if (this.frameComparator.calculate(this.previousFrame_, imageData.data) >
145-
this.identicalFrameSsimThreshold) {
146-
this.frameStats.numFrozenFrames++;
147-
}else if((this.frameComparator.calculate(this.previousFrame_, imageData.data) == this.differenceThreshold) && (this.frameComparator.calculate(this.previousFrame_, imageData.data) != 0 )){
148-
this.frameStats.numFrozenFrames++;
149-
150-
}
151-
this.differenceThreshold = this.frameComparator.calculate(this.previousFrame_, imageData.data);
152-
this.previousFrame_ = imageData.data;
153-
154-
this.frameStats.numFrames++;
155-
setTimeout(this.checkVideoFrame_.bind(this), 20);
127+
128+
return new Promise((resolve, reject)=>{
129+
this.getCurrentImageData_().then((context)=>{
130+
var imageData = context.getImageData(0, 0, 320, 240);
131+
if(!imageData) {
132+
console.log("CureentImageData is ", imageData.data);
133+
}else{
134+
if (this.isBlackFrame_(imageData.data, imageData.data.length)) {
135+
this.frameStats.numBlackFrames++;
136+
}
137+
let currentCalculate = this.frameComparator.calculate(this.previousFrame_, imageData.data)
138+
console.log("This.frameComparator.calculate(this.previousFrame_, imageData.data)", currentCalculate);
139+
if (currentCalculate > this.identicalFrameSsimThreshold) {
140+
this.frameStats.numFrozenFrames++;
141+
}else if((currentCalculate == this.differenceThreshold) && (currentCalculate != 0 )){
142+
this.frameStats.numFrozenFrames++;
143+
}
144+
this.differenceThreshold = currentCalculate;
145+
this.previousFrame_ = imageData.data;
146+
147+
this.frameStats.numFrames++;
148+
}
149+
150+
setTimeout(this.checkVideoFrame_.bind(this), 500);
151+
resolve()
152+
}).catch((err)=>{
153+
setTimeout(this.checkVideoFrame_.bind(this), 500);
154+
resolve()
155+
})
156+
})
156157
},
157158

158159
isBlackFrame_: function(data, length) {

0 commit comments

Comments
 (0)