├── LICENSE ├── README.md ├── depth-camera.js ├── index.html ├── recording.gif ├── script.js └── third_party └── gl-matrix.js /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | DISCONTINUATION OF PROJECT. 2 | 3 | This project will no longer be maintained by Intel. 4 | 5 | Intel has ceased development and contributions including, but not limited to, maintenance, bug fixes, new releases, or updates, to this project. 6 | 7 | Intel no longer accepts patches to this project. 8 | 9 | If you have an ongoing need to use this project, are interested in independently developing it, or would like to maintain patches for the open source software community, please create your own fork of this project. 10 | # Depth Camera Pointcloud Demo 11 | 12 | Uses an Intel® RealSense™ camera to get depth data and creates a [point 13 | cloud](https://en.wikipedia.org/wiki/Point_cloud) out of it. 14 | 15 | ![Screen recording](https://github.com/01org/depthcamera-pointcloud-web-demo/raw/master/recording.gif) 16 | 17 | It's supported on Windows, Linux and ChromeOS with Intel® RealSense™ 18 | SR300 (and related cameras like Razer Stargazer or Creative BlasterX 19 | Senz3D) and R200 3D Cameras. 20 | 21 | You will need Chromium release 58 and later. Release 58 is under testing 22 | and the installation is available on the 23 | [dev channel](https://www.chromium.org/getting-involved/dev-channel). 24 | 25 | An explanation on how to use the depth camera is in the article 26 | [Depth Camera Capture in HTML5](https://01.org/chromium/blogs/astojilj/2017/depth-camera-capture-html5). 27 | 28 | ## Setup 29 | 30 | 1. To make sure your system supports the camera, follow the [installation 31 | guide](https://github.com/IntelRealSense/librealsense#installation-guide) 32 | in librealsense. 33 | 34 | 2. Make sure you have Chromium version of at least 58 - install it from the 35 | [dev channel](https://www.chromium.org/getting-involved/dev-channel) if not. 36 | 37 | 3. Connect the camera. 38 | 39 | 4. Go to 40 | [the demo page](https://01org.github.io/depthcamera-pointcloud-web-demo/). 41 | 42 | 43 | To run the code locally, give Chromium the parameter 44 | `--use-fake-ui-for-media-stream`, so that it doesn't ask you for camera 45 | permissions, which are remembered only for https pages. 46 | 47 | --- 48 | Intel and Intel RealSense are trademarks of Intel Corporation in the U.S. and/or 49 | other countries. 50 | -------------------------------------------------------------------------------- /depth-camera.js: -------------------------------------------------------------------------------- 1 | /*jshint esversion: 6 */ 2 | 3 | // Copyright 2017 Intel Corporation. 4 | // 5 | // Licensed under the Apache License, Version 2.0 (the "License"); 6 | // you may not use this file except in compliance with the License. 7 | // You may obtain a copy of the License at 8 | // 9 | // http://www.apache.org/licenses/LICENSE-2.0 10 | // 11 | // Unless required by applicable law or agreed to in writing, software 12 | // distributed under the License is distributed on an "AS IS" BASIS, 13 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | // See the License for the specific language governing permissions and 15 | // limitations under the License. 16 | 17 | class DepthCamera { 18 | 19 | constructor() { 20 | } 21 | 22 | static async getDepthStream() { 23 | if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices || 24 | !navigator.mediaDevices.getUserMedia) { 25 | throw new Error("Your browser doesn't support the required mediaDevices APIs."); 26 | } 27 | 28 | // Use videoKind if it is supported. At the moment it is experimental; to 29 | // use it. Chrome needs to be started with command line argument: 30 | // --enable-blink-features=MediaCaptureDepthVideoKind 31 | const supported_constraints = navigator.mediaDevices.getSupportedConstraints(); 32 | if (supported_constraints.videoKind) { 33 | let stream = await navigator.mediaDevices.getUserMedia({ 34 | video: { 35 | videoKind: {exact: "depth"}, 36 | frameRate: {exact: 60} 37 | } 38 | }); 39 | const track = stream.getVideoTracks()[0]; 40 | let settings = track.getSettings ? track.getSettings() : null; 41 | // TODO: following is a browser bug if happening. 42 | if (settings.videoKind != "depth") 43 | throw new Error("No RealSense depth camera connected."); 44 | return stream; 45 | } 46 | 47 | // We cannot use videoKind yet, so try to make a constraint that would 48 | // most likely resolve to a depth camera. Later, we use camera label to 49 | // check if we really got a depth track. 50 | const constraints = { 51 | audio: false, 52 | video: { 53 | // videoKind: {exact: "depth"}, R200 related hack: prefer 54 | // depth (width = 628) to IR (width = 641) stream. 55 | width: {ideal: 628}, 56 | 57 | // SR300 depth camera enables capture at 110 frames per second. 58 | frameRate: {ideal: 110}, 59 | } 60 | } 61 | 62 | let stream = await navigator.mediaDevices.getUserMedia(constraints); 63 | let track = stream.getVideoTracks()[0]; 64 | if (track.label.indexOf("RealSense") == -1) { 65 | throw new Error(chromeVersion() < 58 ? 66 | "Your browser version is too old. Get Chrome version 58 or later." : 67 | "No RealSense camera connected."); 68 | } 69 | 70 | if (track.getSettings && track.getSettings().frameRate > 60) { 71 | // After Chrome 59, returned track is scaled to 628 and frameCount 110. 72 | // We got the deviceId, so we the deviceId to select the stream with 73 | // default resolution and frameRate. 74 | track.stop(); 75 | 76 | const constraints = { 77 | audio: false, 78 | video: { 79 | deviceId: {exact: track.getSettings().deviceId}, 80 | frameRate: {exact: 60} 81 | } 82 | } 83 | stream = await navigator.mediaDevices.getUserMedia(constraints); 84 | } 85 | return stream; 86 | } 87 | 88 | // Call the method after getting depth_stream using getDepthStream. 89 | static async getColorStreamForDepthStream(depthStream, w = 640, h = 480) { 90 | // To get color stream from the same physical device providing the depth 91 | // stream, we will use groupId, once it is implemented: 92 | // See https://crbug.com/627793 93 | // For now, enumerate devices based on label. 94 | // Note: depth_stream is not used, for now, but deliberatelly added as a 95 | // parameter to mandate the need for previous call to getDepthStream. 96 | 97 | let depth_device_id = null; 98 | const depth = depthStream.getVideoTracks()[0]; 99 | 100 | // Chrome, starting with version 59, implements getSettings() API. 101 | if (depth.getSettings) { 102 | depth_device_id = depth.getSettings().deviceId; 103 | } else if (idealWidth) { 104 | console.warn(`Not able to set ideal width for color video as 105 | MediaStreamTrack getSettings() API is not available. Try 106 | with Chromium version > 59.`); 107 | } 108 | 109 | var all_devices = await navigator.mediaDevices.enumerateDevices(); 110 | const devices = all_devices.filter((device) => ( 111 | device.kind == "videoinput" && 112 | device.label.includes("RealSense") && 113 | device.label.includes("RGB") && 114 | !device.label.includes("Depth") && 115 | device.deviceId != depth_device_id)); 116 | 117 | if (devices.length < 1) { 118 | throw new Error("No RealSense camera connected."); 119 | } 120 | 121 | // Select streams from these ids, so that some other camera doesn't get 122 | // selected (e.g. if the user has another rgb camera). 123 | const ids = devices.map(device => device.deviceId); 124 | 125 | // Select color stream. 126 | const constraints = { 127 | video: { 128 | width: w, 129 | height: h, 130 | deviceId: {exact: ids}, 131 | } 132 | }; 133 | return navigator.mediaDevices.getUserMedia(constraints); 134 | } 135 | 136 | // Figure out the camera intristics and extrinsics based on the depth stream 137 | // camera model. 138 | // 139 | // This should be rewritten once the MediaCapture-Depth API works - don't 140 | // hardcode the values based on camera model, but query it from the API. 141 | // 142 | // See the documentation at 143 | // https://w3c.github.io/mediacapture-depth/#synchronizing-depth-and-color-video-rendering 144 | static getCameraCalibration(depth_stream) { 145 | const label = depth_stream.getVideoTracks()[0].label; 146 | const cameraName = label.includes("R200") ? "R200" 147 | : (label.includes("Camera S") || label.includes("SR300")) ? "SR300" 148 | : label.includes("ZR300") ? "ZR300" 149 | : label.includes("415") ? "D415" 150 | : label.includes("430") ? "D430" 151 | : label.includes(") 4") ? "generic4" 152 | : label; 153 | 154 | const DistortionModel = { 155 | NONE: 0, 156 | MODIFIED_BROWN_CONRADY: 1, 157 | INVERSE_BROWN_CONRADY: 2, 158 | }; 159 | 160 | function throwUnsupportedSizeError() { 161 | const error = new Error("Depth intrinsics for size " + width + "x" + 162 | height + " are not available."); 163 | error.name = "UnsupportedSizeError"; 164 | throw error; 165 | } 166 | 167 | let result; 168 | if (cameraName === "R200") { 169 | result = { 170 | depthScale: 0.001, 171 | getDepthIntrinsics: function(width, height) { 172 | if (width == 628 && height == 469) { 173 | return { 174 | offset: [305.558075, 233.5], 175 | focalLength: [582.154968, 582.154968], 176 | }; 177 | } else if (width == 628 && height == 361) { 178 | return { 179 | offset: [233.3975067138671875, 179.2618865966796875], 180 | focalLength: [447.320953369140625, 447.320953369140625], 181 | }; 182 | } else { 183 | throwUnsupportedSizeError(); 184 | } 185 | }, 186 | colorOffset: new Float32Array( 187 | [311.841033935546875, 229.7513275146484375] 188 | ), 189 | colorFocalLength: new Float32Array( 190 | [627.9630126953125, 634.02410888671875] 191 | ), 192 | // Rotation [0..2] goes to 1st column, [3..6] to second, etc. The 193 | // row at the bottom is translation. 194 | depthToColor: [ 195 | 0.99998325109481811523, 0.002231199527159333229, 0.00533978315070271492, 0, 196 | -0.0021383403800427913666, 0.99984747171401977539, -0.017333013936877250671, 0, 197 | -0.0053776423446834087372, 0.017321307212114334106, 0.99983555078506469727, 0, 198 | -0.058898702263832092285, -0.00020283895719330757856, -0.0001998419174924492836, 1 199 | ], 200 | depthDistortionModel: DistortionModel.NONE, 201 | depthDistortioncoeffs: [0, 0, 0, 0, 0], 202 | colorDistortionModel: DistortionModel.MODIFIED_BROWN_CONRADY, 203 | colorDistortioncoeffs: [ 204 | -0.078357703983783721924, 205 | 0.041351985186338424683, 206 | -0.00025565386749804019928, 207 | 0.0012357287341728806496, 208 | 0 209 | ], 210 | }; 211 | } else if (cameraName === "SR300 Senz3D") { 212 | result = { 213 | depthScale: 0.0001249866472790017724, 214 | getDepthIntrinsics: function(width, height) { 215 | if (width == 640 && height == 480) { 216 | return { 217 | offset: [310.743988037109375, 245.1811676025390625], 218 | focalLength: [475.900726318359375, 475.900726318359375], 219 | }; 220 | } else { 221 | throwUnsupportedSizeError(); 222 | } 223 | }, 224 | getColorIntrinsics: function(width, height) { 225 | if (width == 640 && height == 480) { 226 | return { 227 | offset: [312.073974609375, 241.969329833984375], 228 | focalLength: [617.65087890625, 617.65093994140625], 229 | }; 230 | } else if (width == 1280 && height == 720) { 231 | return { 232 | offset: [628.110961914062, 362.953979492188], 233 | focalLength: [926.476318359375, 926.476440429688], 234 | }; 235 | } else if (width == 1920 && height == 1080) { 236 | return { 237 | offset: [942.166442871094, 544.430969238281], 238 | focalLength: [1389.71447753906, 1389.71472167969], 239 | }; 240 | } else { 241 | throwUnsupportedSizeError(); 242 | } 243 | }, 244 | colorOffset: new Float32Array( 245 | [312.073974609375, 241.969329833984375] 246 | ), 247 | colorFocalLength: new Float32Array( 248 | [617.65087890625, 617.65093994140625] 249 | ), 250 | depthToColor: [ 251 | 0.99998641014099121094, -0.0051436689682304859161, 0.00084982655243948101997, 0, 252 | 0.0051483912393450737, 0.99997079372406005859, -0.005651625804603099823, 0, 253 | -0.00082073162775486707687, 0.0056559243239462375641, 0.99998366832733154297, 0, 254 | 0.025699997320771217346, -0.00073326355777680873871, 0.0039400043897330760956, 1 255 | ], 256 | depthDistortionModel: DistortionModel.INVERSE_BROWN_CONRADY, 257 | depthDistortioncoeffs: [ 258 | 0.14655706286430358887, 259 | 0.078352205455303192139, 260 | 0.0026113723870366811752, 261 | 0.0029218809213489294052, 262 | 0.066788062453269958496, 263 | ], 264 | colorDistortionModel: DistortionModel.NONE, 265 | colorDistortioncoeffs: [0, 0, 0, 0, 0], 266 | }; 267 | } else if (cameraName === "SR300") { 268 | result = { 269 | depthScale: 0.0001249866472790017724, 270 | getDepthIntrinsics: function(width, height) { 271 | if (width == 640 && height == 480) { 272 | return { 273 | offset: [307.147125244141, 245.624420166016], 274 | focalLength: [474.499542236328, 474.499420166016], 275 | }; 276 | } else { 277 | throwUnsupportedSizeError(); 278 | } 279 | }, 280 | getColorIntrinsics: function(width, height) { 281 | if (width == 640 && height == 480) { 282 | return { 283 | offset: [305.502166748047, 247.462982177734], 284 | focalLength: [618.239440917969, 618.239562988281], 285 | }; 286 | } else if (width == 1280 && height == 720) { 287 | return { 288 | offset: [618.253234863281, 371.194458007812], 289 | focalLength: [927.359130859375, 927.359313964844], 290 | }; 291 | } else if (width == 1920 && height == 1080) { 292 | return { 293 | offset: [927.3798828125, 556.791687011719], 294 | focalLength: [1391.03869628906, 1391.03894042969], 295 | }; 296 | } else { 297 | throwUnsupportedSizeError(); 298 | } 299 | }, 300 | colorOffset: new Float32Array( 301 | [305.502166748047, 247.462982177734] 302 | ), 303 | colorFocalLength: new Float32Array( 304 | [618.239440917969, 618.239562988281] 305 | ), 306 | depthToColor: [ 307 | 0.999992787837982, -0.00343602383509278, 0.00163511745631695, 0, 308 | 0.00344009511172771, 0.999990999698639, -0.00249356147833169, 0, 309 | -0.00162653462029994, 0.00249916850589216, 0.999995589256287, 0, 310 | 0.0256999991834164, 0.00126673700287938, 0.00358582031913102, 1 311 | ], 312 | colorToDepth: [ 313 | 0.999992787837982, -0.00343602383509278, 0.00163511745631695, 0, 314 | 0.00344009511172771, 0.999990999698639, -0.00249356147833169, 0, 315 | -0.00162653462029994, 0.00249916850589216, 0.999995589256287, 0, 316 | -0.0257013235241175, -0.00134619453456253, -0.00354716833680868, 1 317 | ], 318 | depthDistortionModel: DistortionModel.INVERSE_BROWN_CONRADY, 319 | depthDistortioncoeffs: [ 320 | 0.126395508646965, 321 | 0.0701233819127083, 322 | 0.00355594046413898, 323 | 0.00548861175775528, 324 | 0.103697031736374, 325 | ], 326 | colorDistortionModel: DistortionModel.NONE, 327 | colorDistortioncoeffs: [0, 0, 0, 0, 0], 328 | }; 329 | } else if (cameraName === "ZR300") { 330 | result = { 331 | depthScale: 0.00100000005, 332 | getDepthIntrinsics: function(width, height) { 333 | if (width == 628 && height == 469) { 334 | return { 335 | offset: [309.912567, 234.410904], 336 | focalLength: [575.729980, 575.729980], 337 | }; 338 | } else if (width == 628 && height == 361) { 339 | return { 340 | offset: [238.683838, 180.205521], 341 | focalLength: [445.920288, 445.920288], 342 | }; 343 | } else { 344 | throwUnsupportedSizeError(); 345 | } 346 | }, 347 | colorOffset: new Float32Array( 348 | [312.271545, 233.118652] 349 | ), 350 | colorFocalLength: new Float32Array( 351 | [616.316895, 617.343323] 352 | ), 353 | depthToColor: [ 354 | 0.999995947, 0.00140406948, 0.00246621366, 0, 355 | -0.00140700850, 0.999998271, 0.00119038881, 0, 356 | -0.00246453821, -0.00119385391, 0.999996245, 0, 357 | -0.0587307774, 7.03283295e-05, 0.000553227146, 1 358 | ], 359 | depthDistortionModel: DistortionModel.NONE, 360 | depthDistortioncoeffs: [0, 0, 0, 0, 0], 361 | colorDistortionModel: DistortionModel.MODIFIED_BROWN_CONRADY, 362 | colorDistortioncoeffs: [ 363 | 0.0727398321, 364 | -0.138192296, 365 | 0.000800351670, 366 | 0.000444319186, 367 | 0 368 | ], 369 | }; 370 | } else if (cameraName === "D415") { 371 | result = { 372 | depthScale: 0.00100000005, 373 | getDepthIntrinsics: function(width, height) { 374 | if (width == 640 && height == 480) { 375 | return { 376 | offset: [315.847442626953, 241.684616088867], 377 | focalLength: [643.142272949219, 643.142272949219], 378 | }; 379 | } else if (width == 1280 && height == 720) { 380 | return { 381 | offset: [633.771179199219, 362.526947021484], 382 | focalLength: [964.713439941406, 964.713439941406], 383 | }; 384 | } else { 385 | throwUnsupportedSizeError(); 386 | } 387 | }, 388 | getColorIntrinsics: function(width, height) { 389 | if (width == 640 && height == 480) { 390 | return { 391 | offset: [321.308288574219, 231.349639892578], 392 | focalLength: [617.459838867188, 617.65087890625], 393 | }; 394 | } else if (width == 1280 && height == 720) { 395 | return { 396 | offset: [641.96240234375, 347.024475097656], 397 | focalLength: [926.189697265625, 926.476257324219], 398 | }; 399 | } else if (width == 1920 && height == 1080) { 400 | return { 401 | offset: [962.943664550781, 520.536682128906], 402 | focalLength: [1389.28454589844, 1389.71447753906], 403 | }; 404 | } else { 405 | throwUnsupportedSizeError(); 406 | } 407 | }, 408 | colorOffset: new Float32Array( 409 | [321.308288574219, 231.349639892578] 410 | ), 411 | colorFocalLength: new Float32Array( 412 | [617.459838867188, 617.65087890625] 413 | ), 414 | colorToDepth: [ 415 | 0.999988317489624, -0.000426474376581609, 0.00481635145843029, 0, 416 | 0.000353455223375931, 0.999885141849518, 0.0151513637974858, 0, 417 | -0.00482225976884365, -0.0151494843885303, 0.999873638153076, 0, 418 | -0.0150478817522526, 0.0000661657468299381, 0.000241686851950362, 1 419 | ], 420 | depthToColor: [ 421 | 0.999988317489624, 0.000353455223375931, -0.00482225976884365, 0, 422 | -0.000426474376581609, 0.999885141849518, -0.0151494843885303, 0, 423 | 0.00481635145843029, 0.0151513637974858, 0.999873638153076, 0, 424 | 0.0150465695187449, -0.0000645012842142023, -0.00031321871210821, 1, 425 | ], 426 | depthDistortionModel: DistortionModel.NONE, 427 | depthDistortioncoeffs: [0, 0, 0, 0, 0], 428 | colorDistortionModel: DistortionModel.NONE, 429 | colorDistortioncoeffs: [0, 0, 0, 0, 0], 430 | }; 431 | } else if (cameraName === "D430") { 432 | result = { 433 | depthScale: 0.00100000005, 434 | getDepthIntrinsics: function(width, height) { 435 | if (width == 640 && height == 480) { 436 | return { 437 | offset: [318.229400634766, 239.944534301758], 438 | focalLength: [381.902008056641, 381.902008056641], 439 | }; 440 | } else if (width == 1280 && height == 720) { 441 | return { 442 | offset: [637.048950195312, 359.907562255859], 443 | focalLength: [636.503356933594, 636.503356933594], 444 | }; 445 | } else { 446 | throwUnsupportedSizeError(); 447 | } 448 | }, 449 | getColorIntrinsics: function(width, height) { 450 | if (width == 640 && height == 480) { 451 | return { 452 | offset: [324.276763916016, 233.025253295898], 453 | focalLength: [616.862121582031, 617.127319335938], 454 | }; 455 | } else if (width == 1280 && height == 720) { 456 | return { 457 | offset: [646.415161132812, 349.537872314453], 458 | focalLength: [925.293212890625, 925.691040039062], 459 | }; 460 | } else if (width == 1920 && height == 1080) { 461 | return { 462 | offset: [969.622741699219, 524.306823730469], 463 | focalLength: [1387.93981933594, 1388.53649902344], 464 | }; 465 | } else { 466 | throwUnsupportedSizeError(); 467 | } 468 | }, 469 | colorOffset: new Float32Array( 470 | [324.276763916016, 233.025253295898] 471 | ), 472 | colorFocalLength: new Float32Array( 473 | [616.862121582031, 617.127319335938] 474 | ), 475 | depthToColor: [ 476 | 0.999992370605469, 0.000624090549536049, -0.00385748990811408, 0, 477 | -0.000635052449069917, 0.999995768070221, -0.00284114643000066, 0, 478 | 0.00385570037178695, 0.00284357438795269, 0.999988496303558, 0, 479 | 0.0149379102513194, 0.000216223328607157, 0.000277608894975856, 1, 480 | ], 481 | colorToDepth: [ 482 | 0.999992370605469, -0.000635052449069917, 0.00385570037178695, 0, 483 | 0.000624090549536049, 0.999995768070221, 0.00284357438795269, 0, 484 | -0.00385748990811408, -0.00284114643000066, 0.999988496303558, 0, 485 | -0.0149368597194552, -0.000205947319045663, -0.000335816672304645, 1 486 | ], 487 | depthDistortionModel: DistortionModel.NONE, 488 | depthDistortioncoeffs: [0, 0, 0, 0, 0], 489 | colorDistortionModel: DistortionModel.NONE, 490 | colorDistortioncoeffs: [0, 0, 0, 0, 0], 491 | }; 492 | } else if (cameraName === "generic4") { 493 | result = { 494 | depthScale: 0.00100000005, 495 | getDepthIntrinsics: function(width, height) { 496 | if (width == 640 && height == 480) { 497 | return { 498 | offset: [321.17535400390625, 248.4362640380859375], 499 | focalLength: [402.60308837890625, 402.60308837890625], 500 | }; 501 | } else { 502 | throwUnsupportedSizeError(); 503 | } 504 | }, 505 | colorOffset: new Float32Array( 506 | [331.870422363281, 242.991546630859] 507 | ), 508 | colorFocalLength: new Float32Array( 509 | [629.172912597656, 628.130920410156] 510 | ), 511 | depthToColor: [ 512 | 0.999902248382, 0.010088876821, 0.009682051837, 0, 513 | -0.010075648315, 0.9999482631683, -0.001414125669, 0, 514 | 0.009695817716, 0.001316434470, 0.99995213747, 0, 515 | 0.036090422422, 0.000611198542174, -0.00184865354, 1 516 | ], 517 | depthDistortionModel: DistortionModel.NONE, 518 | depthDistortioncoeffs: [0, 0, 0, 0, 0], 519 | colorDistortionModel: DistortionModel.NONE, 520 | colorDistortioncoeffs: [0, 0, 0, 0, 0], 521 | }; 522 | } else { 523 | throw { 524 | name: "CameraNotSupported", 525 | message: "Sorry, your camera '" + cameraName + "' is not supported", 526 | }; 527 | } 528 | // This also de-normalizes the depth value (it's originally a 16-bit 529 | // integer normalized into a float between 0 and 1). 530 | result.depthScale = result.depthScale * 65535; 531 | result.cameraName = cameraName; 532 | return result; 533 | } 534 | } 535 | 536 | function chromeVersion() { 537 | const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); 538 | return raw ? parseInt(raw[2], 10) : false; 539 | } 540 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 169 | 191 | 192 | 193 |
194 | 195 |
196 | 198 | 199 | 200 |

Raw color data:

201 | 205 |

Raw depth data:

206 | 210 | 211 | 212 | -------------------------------------------------------------------------------- /recording.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intel/depthcamera-pointcloud-web-demo/8ea0a6a8d3a5445aef14be46dd9d243aff5e4bd0/recording.gif -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /*jshint esversion: 6 */ 2 | 3 | // Copyright 2017 Intel Corporation. 4 | // 5 | // Licensed under the Apache License, Version 2.0 (the "License"); 6 | // you may not use this file except in compliance with the License. 7 | // You may obtain a copy of the License at 8 | // 9 | // http://www.apache.org/licenses/LICENSE-2.0 10 | // 11 | // Unless required by applicable law or agreed to in writing, software 12 | // distributed under the License is distributed on an "AS IS" BASIS, 13 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | // See the License for the specific language governing permissions and 15 | // limitations under the License. 16 | 17 | // True if the mouse is currently pressed down. 18 | var mouseDown = false; 19 | // Last position of the mouse when it was pressed down. 20 | var lastMousePositionX = 0; 21 | var lastMousePositionY = 0; 22 | // Rotation of the model in degrees. 23 | // https://en.wikipedia.org/wiki/Yaw_%28rotation%29 24 | var yaw = 0; 25 | var pitch = 0; 26 | 27 | // Use this for displaying errors to the user. More details should be put into 28 | // `console.error` messages. 29 | function showErrorToUser(message) { 30 | var div = document.getElementById("errormessages"); 31 | div.innerHTML += message + "
"; 32 | } 33 | 34 | function handleError(error) { 35 | console.error(error); 36 | showErrorToUser(error.name ? (error.name + ": " + error.message) : error); 37 | } 38 | 39 | function handleMouseDown(event) { 40 | mouseDown = true; 41 | lastMousePositionX = event.clientX; 42 | lastMousePositionY = event.clientY; 43 | } 44 | 45 | function handleMouseUp(event) { 46 | mouseDown = false; 47 | lastMousePositionX = event.clientX; 48 | lastMousePositionY = event.clientY; 49 | } 50 | 51 | // Limit the `value` to be between `min` and `max`. 52 | function clamp(value, min, max) { 53 | return Math.min(Math.max(value, min), max); 54 | } 55 | 56 | function handleMouseMove(event) { 57 | if (!mouseDown) { 58 | return; 59 | } 60 | yaw = clamp(yaw - (event.clientX - lastMousePositionX), -120, 120); 61 | pitch = clamp(pitch + (event.clientY - lastMousePositionY), -80, 80); 62 | lastMousePositionX = event.clientX; 63 | lastMousePositionY = event.clientY; 64 | } 65 | 66 | function getMvpMatrix(width, height) { 67 | var model = new mat4.create(); 68 | mat4.translate(model, model, vec3.fromValues(0, 0, 0.5)); 69 | mat4.rotateX(model, model, glMatrix.toRadian(pitch)); 70 | mat4.rotateY(model, model, glMatrix.toRadian(yaw)); 71 | mat4.translate(model, model, vec3.fromValues(0, 0, -0.5)); 72 | 73 | var view = new mat4.create(); 74 | mat4.lookAt(view, 75 | vec3.fromValues(0, 0, 0), // eye 76 | vec3.fromValues(0, 0, 1), // target 77 | vec3.fromValues(0, -1, 0)); // up 78 | 79 | var aspect = width / height; 80 | var projection = new mat4.create(); 81 | mat4.perspective(projection, glMatrix.toRadian(60.0), aspect, 0.1, 20.0); 82 | 83 | var mv = mat4.create(); 84 | mat4.multiply(mv, view, model); 85 | 86 | var mvp = mat4.create(); 87 | mat4.multiply(mvp, projection, mv); 88 | return mvp; 89 | } 90 | 91 | // Compile the shader from `source` and return a reference to it. 92 | function createShader(gl, type, source) { 93 | var shader = gl.createShader(type); 94 | gl.shaderSource(shader, source); 95 | gl.compileShader(shader); 96 | var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); 97 | if (success) { 98 | return shader; 99 | } 100 | var msg = gl.getShaderInfoLog(shader); 101 | gl.deleteShader(shader); 102 | throw { 103 | name: "ShaderCompilationError", 104 | message: msg, 105 | }; 106 | } 107 | 108 | // Compile shaders, activate the shader program and return a reference to it. 109 | // The shaders are defined in the html file. 110 | function setupProgram(gl) { 111 | var source = document.getElementById("vertexshader").text; 112 | var vertexShader = createShader(gl, gl.VERTEX_SHADER, source); 113 | source = document.getElementById("fragmentshader").text; 114 | var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, source); 115 | 116 | var program = gl.createProgram(); 117 | gl.attachShader(program, vertexShader); 118 | gl.attachShader(program, fragmentShader); 119 | gl.linkProgram(program); 120 | var success = gl.getProgramParameter(program, gl.LINK_STATUS); 121 | if (success) { 122 | console.log("GLSL program compiled."); 123 | gl.useProgram(program); 124 | return program; 125 | } 126 | var msg = gl.getProgramInfoLog(program); 127 | gl.deleteProgram(program); 128 | throw { 129 | name: "ShaderLinkingError", 130 | message: msg, 131 | }; 132 | } 133 | 134 | // Create textures into which the camera output will be stored. 135 | function setupTextures(gl, program) { 136 | var shaderColorTexture = gl.getUniformLocation(program, "u_color_texture"); 137 | gl.uniform1i(shaderColorTexture, 0); 138 | 139 | var colorStreamTexture = gl.createTexture(); 140 | gl.bindTexture(gl.TEXTURE_2D, colorStreamTexture); 141 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 142 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 143 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 144 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 145 | 146 | var shaderDepthTexture = gl.getUniformLocation(program, "u_depth_texture"); 147 | gl.uniform1i(shaderDepthTexture, 1); 148 | var depthStreamTexture = gl.createTexture(); 149 | gl.bindTexture(gl.TEXTURE_2D, depthStreamTexture); 150 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 151 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 152 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 153 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 154 | return { 155 | colorStreamTexture: colorStreamTexture, 156 | depthStreamTexture: depthStreamTexture, 157 | }; 158 | } 159 | 160 | // Returns the calibration data. 161 | async function setupCamera() { 162 | var depth_stream = await DepthCamera.getDepthStream(); 163 | var color_stream = await DepthCamera.getColorStreamForDepthStream(depth_stream); 164 | var video = document.getElementById("colorStream"); 165 | video.srcObject = color_stream; 166 | var depth_video = document.getElementById("depthStream"); 167 | depth_video.srcObject = depth_stream; 168 | var parameters = DepthCamera.getCameraCalibration(depth_stream); 169 | return parameters; 170 | } 171 | 172 | // Take the parameters returned from `DepthCamera.getCameraCalibration` and 173 | // upload them as uniforms into the shaders. 174 | function uploadCameraParameters(gl, program, parameters, width, height) { 175 | var shaderVar = gl.getUniformLocation(program, "u_depth_scale"); 176 | gl.uniform1f(shaderVar, parameters.depthScale); 177 | var depthIntrinsics = parameters.getDepthIntrinsics(width, height); 178 | shaderVar = gl.getUniformLocation(program, "u_depth_focal_length"); 179 | gl.uniform2fv(shaderVar, depthIntrinsics.focalLength); 180 | shaderVar = gl.getUniformLocation(program, "u_depth_offset"); 181 | gl.uniform2fv(shaderVar, depthIntrinsics.offset); 182 | shaderVar = gl.getUniformLocation(program, "u_depth_distortion_model"); 183 | gl.uniform1i(shaderVar, parameters.depthDistortionModel); 184 | shaderVar = gl.getUniformLocation(program, "u_depth_distortion_coeffs"); 185 | gl.uniform1fv(shaderVar, parameters.depthDistortioncoeffs); 186 | shaderVar = gl.getUniformLocation(program, "u_color_focal_length"); 187 | gl.uniform2fv(shaderVar, parameters.colorFocalLength); 188 | shaderVar = gl.getUniformLocation(program, "u_color_offset"); 189 | gl.uniform2fv(shaderVar, parameters.colorOffset); 190 | shaderVar = gl.getUniformLocation(program, "u_color_distortion_model"); 191 | gl.uniform1i(shaderVar, parameters.colorDistortionModel); 192 | shaderVar = gl.getUniformLocation(program, "u_color_distortion_coeffs"); 193 | gl.uniform1fv(shaderVar, parameters.colorDistortioncoeffs); 194 | shaderVar = gl.getUniformLocation(program, "u_depth_to_color"); 195 | gl.uniformMatrix4fv(shaderVar, false, parameters.depthToColor); 196 | } 197 | 198 | async function main() { 199 | "use strict"; 200 | 201 | var gl, program, textures; 202 | try { 203 | var canvasElement = document.getElementById("webglcanvas"); 204 | canvasElement.onmousedown = handleMouseDown; 205 | document.onmouseup = handleMouseUp; 206 | document.onmousemove = handleMouseMove; 207 | gl = canvasElement.getContext("webgl2"); 208 | } catch (e) { 209 | console.error("Could not create WebGL2 context: " + e); 210 | showErrorToUser("Your browser doesn't support WebGL2."); 211 | return false; 212 | } 213 | try { 214 | program = setupProgram(gl); 215 | textures = setupTextures(gl, program); 216 | gl.getExtension("EXT_color_buffer_float"); 217 | 218 | } catch (e) { 219 | console.error(e.name + ": " + e.message); 220 | showErrorToUser("Errors while executing WebGL: " + e.name); 221 | return false; 222 | } 223 | 224 | 225 | var cameraParameters = await setupCamera().catch(handleError); 226 | 227 | var colorStreamElement = document.getElementById("colorStream"); 228 | var depthStreamElement = document.getElementById("depthStream"); 229 | var colorStreamReady = false; 230 | var depthStreamReady = false; 231 | colorStreamElement.oncanplay = function() { colorStreamReady = true; }; 232 | depthStreamElement.oncanplay = function() { depthStreamReady = true; }; 233 | 234 | var ranOnce = false; 235 | // Run for each frame. Will do nothing if the camera is not ready yet. 236 | var animate=function() { 237 | gl.clear(gl.COLOR_BUFFER_BIT); 238 | if (colorStreamReady && depthStreamReady) { 239 | var width = depthStreamElement.videoWidth; 240 | var height = depthStreamElement.videoHeight; 241 | if ( ! ranOnce ) { 242 | uploadCameraParameters(gl, program, cameraParameters, width, 243 | height); 244 | var shaderDepthTextureSize = 245 | gl.getUniformLocation(program, "u_depth_texture_size"); 246 | gl.uniform2f(shaderDepthTextureSize, width, height); 247 | 248 | var shaderColorTextureSize = 249 | gl.getUniformLocation(program, "u_color_texture_size"); 250 | gl.uniform2f(shaderColorTextureSize, 251 | colorStreamElement.videoWidth, 252 | colorStreamElement.videoHeight); 253 | 254 | gl.canvas.width = width; 255 | gl.canvas.height = height; 256 | gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); 257 | 258 | var indices = []; 259 | for (var i = 0; i < width; i++) { 260 | for (var j = 0; j < height; j++) { 261 | indices.push(i); 262 | indices.push(j); 263 | } 264 | } 265 | var shaderDepthTextureIndex = 266 | gl.getAttribLocation(program, "a_depth_texture_index"); 267 | gl.enableVertexAttribArray(shaderDepthTextureIndex); 268 | var buffer = gl.createBuffer(); 269 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 270 | gl.bufferData(gl.ARRAY_BUFFER, 271 | new Float32Array(indices), 272 | gl.STATIC_DRAW); 273 | gl.vertexAttribPointer(shaderDepthTextureIndex, 274 | 2, gl.FLOAT, false, 0, 0); 275 | ranOnce = true; 276 | } 277 | var shaderMvp = gl.getUniformLocation(program, "u_mvp"); 278 | gl.uniformMatrix4fv(shaderMvp, false, getMvpMatrix(width, height)); 279 | 280 | try { 281 | // Upload the camera frame for both the RGB camera and depth. 282 | gl.activeTexture(gl.TEXTURE0); 283 | gl.bindTexture(gl.TEXTURE_2D, textures.colorStreamTexture); 284 | gl.texImage2D(gl.TEXTURE_2D, 285 | 0, 286 | gl.RGBA, 287 | gl.RGBA, 288 | gl.UNSIGNED_BYTE, 289 | colorStreamElement); 290 | 291 | gl.activeTexture(gl.TEXTURE1); 292 | gl.bindTexture(gl.TEXTURE_2D, textures.depthStreamTexture); 293 | gl.texImage2D(gl.TEXTURE_2D, 294 | 0, 295 | gl.R32F, 296 | gl.RED, 297 | gl.FLOAT, 298 | depthStreamElement); 299 | } 300 | catch(e) { 301 | console.error("Error uploading video to WebGL: " + 302 | e.name + ", " + e.message); 303 | } 304 | // create a vertex for each pixel in the depth stream 305 | gl.drawArrays(gl.POINTS, 0, width * height); 306 | 307 | } 308 | window.requestAnimationFrame(animate); 309 | }; 310 | animate(); 311 | } 312 | --------------------------------------------------------------------------------