blob: ebad9171d1ef8ddfc10e5802375b227b955ddd82 (
plain)
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
|
<style>
canvas { display: inline-block; }
</style>
<body></body>
<script src="convolve.js"></script>
<script src="smartblur.js"></script>
<script src="fetch.js"></script>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
function getStream(cb){
var constraints = {
video: true,
audio: false
}
navigator.getUserMedia(constraints, success, error);
function success (stream) {
var video = document.createElement("video")
video.src = window.URL.createObjectURL(stream)
video.play()
cb(video)
}
function error(error){
console.log('navigator.getUserMedia error: ', error);
}
}
var smart_blur = new SmartBlurFilter ()
var cam = document.createElement("canvas"), camctx = cam.getContext('2d')
var blurred = document.createElement("canvas")
document.body.appendChild(blurred)
var camera
getStream(function(video){
camera = video
document.body.appendChild(camera)
wait()
})
function wait () {
if (! camera.videoWidth) return requestAnimationFrame(wait)
cam.width = blurred.width = camera.videoWidth/4
cam.height = blurred.height = camera.videoHeight/4
animate()
}
function animate () {
requestAnimationFrame(animate)
camctx.drawImage(camera,0,0,cam.width,cam.height)
smart_blur.blur(cam, blurred)
}
</script>
|
