Processing Forum

Screen name:
Arthur91x
About Me:
Hi, my name's Angel Arturo Ramírez Suárez. I'm an engineering student who loves programming, science and technology in general.
Website:
http://extropynow.weebly.com
Facebook Link:
https://www.facebook.com/aramirezsuarez1

Arthur91x's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Webcam streaming:

[3 Replies]
- 11-Jun-2013 02:21 PM
- Forum: Processing with Other Languages
Hello, I'm new to the site and wanted to ask about the possibility of streaming from my webcam to a page. I've checked and successfully ran this code from fellow user Makio135 which I found implements Processing.js. But this one grabs images from the camera that is visiting the site. What I want is to grab frames from a single camera and display it on the webpage for everybody. Is that possible?
And what must I modify?

Thanks in advance!
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="utf-8">
6. <title>GetUserMedia API and ProcessingJS</title>
7. </head>
8. <body>
9. <video style="display:none;" id="videoOutput" width="500px" height="660px" autoplay></video>
10. <canvas id="output" width="500px" height="660px" align="center">
11. <p>Please upgrade your browser to something new like <a href="https://www.google.com/chrome">Google Chrome</a>.</p>
12. </canvas>
13. <script type="text/javascript" src="scripts/processing-js-1.4.1/processing-1.4.1.min.js"></script>
14. <script type="text/processing" data-processing-target="output">
16. /*
17. GetUserMedia script from http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/
18. */
19. var video = document.getElementById("videoOutput");
21. var getUserMedia = function(t, onsuccess, onerror) {
22. if (navigator.getUserMedia) {
23. return navigator.getUserMedia(t, onsuccess, onerror);
24. } else if (navigator.webkitGetUserMedia) {
25. return navigator.webkitGetUserMedia(t, onsuccess, onerror);
26. } else if (navigator.mozGetUserMedia) {
27. return navigator.mozGetUserMedia(t, onsuccess, onerror);
28. } else if (navigator.msGetUserMedia) {
29. return navigator.msGetUserMedia(t, onsuccess, onerror);
30. } else {
31. onerror(new Error("No getUserMedia implementation found."));
32. }
33. };
35. var URL = window.URL || window.webkitURL;
36. var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
37. if (!createObjectURL) {
38. throw new Error("URL.createObjectURL not found.");
39. }
41. getUserMedia({audio:true, video:true},
42. function(stream) {
43. var url = createObjectURL(stream);
44. video.src = url;
45. },
46. function(error) {
47. alert("Couldn’t access webcam.");
48. }
49. );
51. var ctx;
52. PImage img;
53. int nb=20;
55. void setup(){
56. size(500,660);
57. ctx = externals.context;
58. ellipseMode(CORNER);
59. smooth();
60. }
62. void draw(){
63. pushMatrix();
64. translate(width,0);
65. scale(-1,1);//mirror the video
66. ctx.drawImage(video, 0, 0, width, height); //video is defined inside getUserMedia.js
67. popMatrix();
69. //do something
70. img=get();
71. img.resize(nb,nb);
72. background(255);
73. noStroke();
74. for(int j=0; j<nb; j++){
75. for(int i=0; i<nb; i++){
76. fill(img.get(i, j));
77. ellipse(i*width/nb, j*height/nb, width/nb, height/nb);
78. }
79. }
80. }
81. </script>
82. </body>
83. </html>

«Prev
Next »