navigator.mediaDevices.getUserMedia({
  video: {videoKind: {exact: "color"}, groupId: {exact: id}}
}).then(function (stream) {
    // Wire the media stream into a <video> element for playback.
    // The RGB video is rendered.
    var video = document.querySelector('#video');
    video.srcObject = stream;
    video.play();
  }
);

navigator.mediaDevices.getUserMedia({
  video: {videoKind: {exact: "depth"}, groupId: {exact: id}}
}).then(function (stream) {
    // Wire the depth-only stream into another <video> element for playback.
    // The depth information is rendered in its grayscale representation.
    var depthVideo = document.querySelector('#depthVideo');
    depthVideo.srcObject = stream;
    depthVideo.play();
  }
);

navigator.mediaDevices.getUserMedia({
  video: {videoKind: {exact: "depth"}}
}).then(function (stream) {
  // wire the stream into a <video> element for playback
  var depthVideo = document.querySelector('#depthVideo');
  depthVideo.srcObject = stream;
  depthVideo.play();
}).catch(function (reason) {
  // handle gUM error here
});

let gl = canvas.getContext("webgl2");
// Activate the standard WebGL 2.0 extension for using single component R32F
// texture format.
gl.getExtension('EXT_color_buffer_float');

// Later, in the rendering loop ...
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
gl.texImage2D(
   gl.TEXTURE_2D,
   0,
   gl.R32F,
   gl.RED,
   gl.FLOAT,
   depthVideo);

// Initialize texture and framebuffer for reading back the texture.
let depthTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

let framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(
  gl.FRAMEBUFFER,
  gl.COLOR_ATTACHMENT0,
  gl.TEXTURE_2D,
  depthTexture,
  0);

let buffer;

// Later, in the rendering loop ...
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
gl.texImage2D(
   gl.TEXTURE_2D,
   0,
   gl.R32F,
   gl.RED,
   gl.FLOAT,
   depthVideo);

if (!buffer) {
  buffer =
      new Float32Array(depthVideo.videoWidth * depthVideo.videoHeight);
}

gl.readPixels(
  0,
  0,
  depthVideo.videoWidth,
  depthVideo.videoHeight,
  gl.RED,
  gl.FLOAT,
  buffer);

<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
#define DISTORTION_NONE 0
#define USE_DEPTH_DEPROJECTION_DISTORTION_COEFFICIENTS 1
#define USE_COLOR_PROJECTION_DISTORTION_COEFFICIENTS 2
uniform mat4 u_mvp;
uniform vec2 u_color_size;
uniform vec2 u_depth_size;
uniform highp usampler2D s_depth_texture;
uniform float u_depth_scale_in_meter;
uniform mat4 u_depth_to_color;
uniform vec2 u_color_offset;
uniform vec2 u_color_focal_length;
uniform float u_color_coeffs[5];
uniform int u_color_projection_distortion;
uniform vec2 u_depth_offset;
uniform vec2 u_depth_focal_length;
uniform float u_depth_coeffs[5];
uniform int u_depth_deprojection_distortion;
out vec2 v_tex;

vec3 depth_deproject(vec2 pixel, float depth)
{
  vec2 point = (pixel - u_depth_offset) / u_depth_focal_length;
  if(u_depth_deprojection_distortion == USE_DEPTH_DEPROJECTION_DISTORTION_COEFFICIENTS)
  {
    float r2 = dot(point, point);
    float f = 1.0 + u_depth_coeffs[0] * r2 + u_depth_coeffs[1] * r2 * r2 + u_depth_coeffs[4] * r2 * r2 * r2;
    float ux = point.x * f + 2.0 * u_depth_coeffs[2] * point.x * point.y +
               u_depth_coeffs[3] * (r2 + 2.0 * point.x * point.x);
    float uy = point.y * f + 2.0 * u_depth_coeffs[3] * point.x * point.y +
               u_depth_coeffs[2] * (r2 + 2.0 * point.y * point.y);
    point = vec2(ux, uy);
  }
  return vec3(point * depth, depth);
}

vec2 color_project(vec3 point)
{
  vec2 pixel = point.xy / point.z;
  if(u_color_projection_distortion == USE_COLOR_PROJECTION_DISTORTION_COEFFICIENTS)
  {
    float r2 = dot(pixel, pixel);
    float f = 1.0 + u_color_coeffs[0] * r2 + u_color_coeffs[1] * r2 * r2 +
              u_color_coeffs[4] * r2 * r2 * r2;
    pixel = pixel * f;
    float dx = pixel.x + 2.0 * u_color_coeffs[2] * pixel.x * pixel.y +
               u_color_coeffs[3] * (r2 + 2.0 * pixel.x * pixel.x);
    float dy = pixel.y + 2.0 * u_color_coeffs[3] * pixel.x * pixel.y +
               u_color_coeffs[2] * (r2 + 2.0 * pixel.y * pixel.y);
    pixel = vec2(dx, dy);
  }
  return pixel * u_color_focal_length + u_color_offset;
}

void main()
{
  vec2 depth_pixel;
  // generate lattice pos; (0, 0) (1, 0) (2, 0) ... (w-1, h-1)
  depth_pixel.x = mod(float(gl_VertexID) + 0.5, u_depth_size.x);
  depth_pixel.y = clamp(floor(float(gl_VertexID) / u_depth_size.x) + 0.5, 0.0, u_depth_size.y);

  // get depth
  vec2 depth_tex_pos = depth_pixel / u_depth_size;
  uint depth = texture(s_depth_texture, depth_tex_pos).r;
  float depth_in_meter = float(depth) * u_depth_scale_in_meter;

  vec3 depth_point = depth_deproject(depth_pixel, depth_in_meter);
  vec4 color_point = u_depth_to_color * vec4(depth_point, 1.0);
  vec2 color_pixel = color_project(color_point.xyz);

  // map [0, w) to [0, 1]
  v_tex = color_pixel / u_color_size;

  gl_Position = u_mvp * vec4(depth_point, 1.0);
}
</script>