video.js
4.77 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
arcs_module(function(ARCS) {
var LiveSource, VideoSource;
LiveSource = ARCS.Component.create(
function () {
var context, canvas, video, imageData;
var defaultWidth = 320;
var defaultHeight = 240;
var self = this;
var handleMediaStream = function(stream) {
if (window.webkitURL) {
video.src = window.webkitURL.createObjectURL(stream);
} else if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = stream;
}
video.videoWidth=defaultWidth;
video.videoHeight=defaultHeight;
self.emit("onReady");
};
var errorMediaStream = function(error) {
console.error("Cannot initialize video component:", error.code);
};
var setUserMedia = function() {
console.log("video test");
if (navigator.mediaDevices !== undefined) {
navigator.mediaDevices.getUserMedia({video:true})
.then(handleMediaStream)
.catch(errorMediaStream);
} else {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (getUserMedia !== undefined) {
getUserMedia({video:true}, handleMediaStream,
errorMediaStream
);
}
}
};
this.grabFrame = function () {
if ( context === undefined || canvas === undefined || video === undefined)
return;
if (video.readyState === video.HAVE_ENOUGH_DATA) {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
this.emit("onImage",imageData);
}
};
this.setSize = function(x,y) {
};
this.setWidgets = function (videoId, canvasId) {
video = document.getElementById(videoId);
canvas = document.getElementById(canvasId);
if (video === undefined || canvas === undefined) {
console.log("video elements not defined");
return;
}
context = canvas.getContext("2d");
var canvasStyle= window.getComputedStyle(canvas);
canvas.width=parseInt(canvasStyle.width);
canvas.height=parseInt(canvasStyle.height);
setUserMedia();
};
},
['grabFrame','setWidgets'],
['onReady','onImage']
);
VideoSource = ARCS.Component.create(
function() {
var context, canvas, video, imageData;
var defaultWidth=320;
var defaultHeight=240;
var self=this;
this.setWidgets = function (videoId, canvasId) {
video = document.getElementById(videoId);
canvas = document.getElementById(canvasId);
if (video === undefined || canvas === undefined) {
return;
}
context = canvas.getContext("2d");
var canvasStyle= window.getComputedStyle(canvas);
canvas.width=parseInt(canvasStyle.width);
canvas.height=parseInt(canvasStyle.height);
if (video.paused || video.ended) {
video.addEventListener('play', function() {
self.emit("onReady");
});
} else {
self.emit("onReady");
}
};
this.grabFrame = function () {
if ( context === undefined || canvas === undefined || video === undefined)
return;
if (video.paused || video.ended) {
return;
}
context.drawImage(video, 0, 0, canvas.width, canvas.height);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
this.emit("onImage",imageData);
};
},
['grabFrame', 'setWidgets'],
['onReady', 'onImage']
);
return {LiveSource: LiveSource, VideoSource: VideoSource};
});