<%@ Page Title="Screen capture" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Screen capture - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Screen capture (display media)</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Screen recording via <code>openScreenCapture()</code></div> <div class="demo-card-body"> <p class="demo-description"> Calls <code>navigator.mediaDevices.getDisplayMedia()</code> so the user can pick a screen, window, or browser tab to record. <code>MediaRecorder</code> captures the stream into a webm/mp4 <code>File</code> that lands in the upload queue. Useful for bug-report attachments, demo videos, training content - any workflow where the user needs to show what they see.
 </p> <div class="demo-expect"><strong>What you should see:</strong> capture a screen or window straight into the queue as a file - no save-then-browse round trip.</div> <div class="card p-3 mt-3" style="background:#fff;border:1px solid #e2e8f0;"> <div class="d-flex flex-wrap gap-2 align-items-center"> <button id="screenCaptureBtn" type="button" class="btn btn-primary">Start screen recording</button> <input type="checkbox" class="form-check-input" id="screenAudioCb" /> <label class="form-check-label small" for="screenAudioCb">Include audio</label> </div> <p class="mt-2 text-muted small mb-0">The browser will show a chooser for the screen / window / tab to share. Click <strong>Record</strong> in the modal to start.</p> <div id="screenCaptureStatus" class="form-text" aria-live="polite"></div> <div id="screenUploader" class="mt-3"></div> </div> <script> (function () {
 function init() {
 if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 var uploader = AjaxUploader.create('#screenUploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false
 });
 var captureButton = document.getElementById('screenCaptureBtn');
 var audioCheckbox = document.getElementById('screenAudioCb');
 var status = document.getElementById('screenCaptureStatus');
 function showCaptureError(err) {
 if (err && err.message === 'cancelled') return;
 if (status) status.textContent =
 (err && err.message) || 'Screen capture could not be started.';
 }
 if (!captureButton) return;
 captureButton.addEventListener('click', function () {
 var withAudio = audioCheckbox ? audioCheckbox.checked : false;
 if (status) status.textContent = '';
 if (!uploader || typeof uploader.openScreenCapture !== 'function') {
 showCaptureError(new Error('Screen capture is not available in this browser.'));
 return;
 }
 uploader.openScreenCapture({ audio: withAudio })
 .then(function (file) {
 if (uploader && typeof uploader.addFile === 'function') uploader.addFile(file);
 })
 .catch(showCaptureError);
 });
 }
 if (document.readyState !== 'loading') init();
 else document.addEventListener('DOMContentLoaded', init);
 })();
 </script> <div class="alert alert-info mt-3" role="alert"> <strong>Stop sharing also stops the recording:</strong> when the user clicks the browser's native "Stop sharing" bar, the modal's record session ends cleanly and resolves with the bytes captured up to that point.
 </div> <h5 class="mt-4">JavaScript API</h5> <div class="code-panel">
<pre><code>uploader.openScreenCapture({
 audio: true, <span style="color:#94a3b8">// system / mic audio if browser allows</span> maxDurationSec: 300, <span style="color:#94a3b8">// 5-minute hard cap</span> mimeType: 'video/webm', <span style="color:#94a3b8">// optional codec hint</span> fileName: 'screen-rec.webm' <span style="color:#94a3b8">// optional</span>
}).then(function (file) {
 uploader.addFile(file);
});</code></pre> </div> <h5 class="mt-4">Bug report attachment recipe</h5> <p>Pair with a single submit button that captures, uploads, and links the file URL into a Jira / Linear ticket:</p> <div class="code-panel">
<pre><code>uploader.on('taskComplete', function (task, result) {
 sendBugReport({
 screenRecordingUrl: result.fileUrl,
 title: 'User-recorded reproduction',
 ts: new Date().toISOString()
 });
});

var reportButton = document.getElementById('reportBugBtn');
if (reportButton) {
 reportButton.addEventListener('click', function () {
  uploader.openScreenCapture({ audio: false, maxDurationSec: 120 })
  .then(function (file) { uploader.addFile(file); uploader.startUpload(); });
 });
}</code></pre> </div> <h5 class="mt-4">Browser support</h5> <ul class="mb-3"> <li><strong>Chrome / Edge / Opera:</strong> full support including audio capture.</li> <li><strong>Firefox:</strong> video only - system audio capture is not supported.</li> <li><strong>Safari (16.4+):</strong> screen capture supported; audio capture limited.</li> <li><strong>Mobile:</strong> not supported on iOS Safari or Chrome Android - the API rejects with a clear error.</li> </ul> </div>
</div> 
</asp:Content>
