video.js
2.91 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
arcs_module(function(ARCS) {
var LiveSource;
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() {
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) {
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']
);
return {LiveSource: LiveSource};
});