Modern gUM debug tab viewport

by jib1

HTML

<video id="video" height="240" width="320" autoplay></video><br>
<button onclick="start()">Start!</button>
<button onclick="stop()">Stop!</button><div id="div"></div>
<input id="x" min="0" max="500" value="0" oninput="offset()" type="range">
<input id="y" min="0" max="500" value="0" oninput="offset()" type="range">
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

      <div><section id="Quick_Links" class="Quick_links"><!-- --></section><div class="notice experimental">
      <p><span title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span> <strong>This is an experimental technology</strong><br>To run this demo, go to about:config and turn on the following two prefs: "media.getusermedia.browser.enabled" and "media.navigator.permission.disabled". You need both, or the permission UX will just give you the standard picker. When it works, you should instead see the tab sharing itself, and you can scroll it a bit using the sliders. Remember to turn them off afterwards for safety, as they disable all getUserMedia permission checks! The remaining text here is boiler-plate to have something to scroll through:<br>Because this technology's specification has not stabilized, check the <a href="#Browser_compatibility">compatibility table</a> for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.</p>
    </div></div>
    
    <p>The <code><strong>MediaDevices.getUserMedia()</strong></code> method prompts the user for permission to use one video and/or one audio input device such as a camera or screensharing and/or a microphone. If the user provides permission, then the returned <a href="/en-US/docs/Web/API/Promise" title="The Promise interface represents a proxy for a value not necessarily known at its creation time. It allows you to associate handlers to...

JavaScript

var constraints = { video: { mediaSource: "browser" } };

var start = () => navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => (video.srcObject = stream, log("Started!")))
  .catch(log);

var offset = () => video.srcObject.getVideoTracks()[0].applyConstraints({
    mediaSource: "browser",
    scrollWithPage: false,
    viewportOffsetX: x.value,
    viewportOffsetY: y.value
  })
  .catch(log);

var stop = () => (video.srcObject.stop(), log("Stopped!"));
var log = msg => div.innerHTML += "<br>" + msg;