forked from SolidOS/solid-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmedia-capture.js
More file actions
67 lines (58 loc) · 1.98 KB
/
Copy pathmedia-capture.js
File metadata and controls
67 lines (58 loc) · 1.98 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
////////////////////////////////////////////////
//
// Media input widget
//
// In future this will be really simple to do when
// the HTML5 input "image capture" input element is actually deployed
// In the meantime (2017-01) this seems to be the state of the art.
//
// Workflow:
// The HTML5 functionality (on mobille) is to prompt for either
// a realtime camera capture , OR a selection from images already ont the device
// (eg camera roll). The solid alternative is to either take a phtoto
// or access cemra roll (etc) OR to access solid cloud storage of favorite photo almbums.
// (Especially latest taken ones)
//
var $rdf = require('rdflib')
var media = module.exports = {}
var UI = {
icons: require('./iconBase'),
log: require('./log'),
ns: require('./ns'),
pad: require('./pad'),
media: media,
rdf: $rdf,
store: require('./store'),
utils: require('./utils'),
widgets: require('./widgets')
}
// Put up a video stream and take a picture
// In: context.div, dom
UI.media.camera = function(context, gotBlob){
function takeSnapshot() {
var img = dom.createElement('img')
var ctx;
var width = video.offsetWidth
, height = video.offsetHeight;
canvas = canvas || document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, width, height);
img.src = canvas.toDataURL('image/png'); // @@@
context.div.appendChild(img);
}
var video = context.dom.createElement('video')
context.div.appendChild(video)
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
navigator.mediaDevices.getUserMedia({video: true })
.then(function(stream){
video.src = window.URL.createObjectURL(stream);
video.addEventListener('click', takeSnapshot);
})
.catch(function(error){
alert('Could not access the camera. Error: ' + error.name)
})
return video
}