90,91d89
< var timev=-1, timea=-1;
< var delaya=0;
95,101c93,94
< var url=null, audioUrl=null, aaurl=null;
< var a=null, aa=null;
< var amediaRecorder=null, xblob=null, chunks=[], xaudio=null, xaudioURL=null, astream=null, microphone=null, audioCtx=null, acanvas=null;
< 
< function RequestAsBlob(inbloburl, infunction) {
<   return inbloburl;
< }
---
> var url=null, audioUrl=null;
> var a=null;
114,115d106
<     document.getElementById('astart').disabled=false;
<     timev=eval('' + (new Date()).getTime());
117,118d107
<     document.getElementById('download').disabled=false;
<     document.getElementById('stop').disabled=false;
120d108
<     timev=eval('' + (new Date()).getTime());
167,175d154
<    if (window.parent) {
<    if (('' + parent.document.URL.indexOf('screen_capture_api_va.htm')) != -1) {
<    parent.location.href=document.URL;
<    } else {
<    location.href=document.URL;
<    }
<    } else {
<    location.href=document.URL;
<    }
258,279d236
<   
<   if (1 == 11) {
< RequestAsBlob(url,
< function(vblob)
< {
<  var vurl = URL.createObjectURL(vblob);
< 
<  document.getElementById('playvideo').src = vurl;
<  document.getElementById('playvideo').play();
< });
<   } else {
<   //document.getElementById('playvideov').src=url;
<  document.getElementById('playvideo').src = url;
<  document.getElementById('playvideo').play();
<   }
<   if (1 == 1) {
<   //document.getElementById('playvideov').style.display='block';
<   document.getElementById('playvideo').style.display='block';
<   document.getElementById('myplayt').style.backgroundColor='yellow';
<   document.getElementById('myplayt').scrollIntoView(); //location.href='#lastp'; //document.getElementById('lastp').scrollIntoView(); //document.getElementById('playvideo').scrollIntoView(); //location.href='#myhr';
<   window.scrollBy(0,120);
<   }
284c241
<   a.download = "screen_capture_api_va.webm";
---
>   a.download = "screen_capture_api_test.webm";
289d245
<         window.scrollTo(0,document.body.scrollHeight);
296d251
<   if (document.getElementById('adownload')) { adownload(); }
299,438d253
< async function astartCapture() {
< audioCtx = new AudioContext();
< if (navigator.mediaDevices) {
< 
< //console.log('precanvas');
< acanvas = document.querySelector("acanvas");
< //console.log('canvas=' + canvas);
< 
< // Optional frames per second argument.
< //const stream = canvas.captureStream(25);
< 
< //console.log(stream);
<  //window.stream = stream;
< 
<   if (timev >= 0) {
<     timea=eval('' + (new Date()).getTime());
<     delaya=eval(timea - timev);
<     //alert(delaya);
<   }
<   navigator.mediaDevices.getUserMedia({"audio": true}).then((stream) => {
<     audioElem.srcObject = stream;
<     document.getElementById('astart').disabled=true;
<     document.getElementById('download').innerHTML+='&#127908';
<     document.getElementById('download').disabled=false;
<     document.getElementById('stop').disabled=false;
<     microphone = audioCtx.createMediaStreamSource(stream);
< 
< // Instantiate the media recorder.
< amediaRecorder = new MediaRecorder(audioElem.srcObject); //audioElem.srcObject);
< 
< 
< // Create a buffer to store the incoming data.
< chunks = [];
< amediaRecorder.ondataavailable = (event) => {
<   chunks.push(event.data);
< }
< 
< amediaRecorder.start(1000);
< 
< amediaRecorder.onstop = () => {
<   // A "blob" combines all the audio chunks into a single entity
<   xblob = new Blob(chunks, {"type": "audio/ogg; codecs=opus"});
<   chunks = []; // clear buffer
< 
<   // One of many ways to use the blob
<   xaudio = new Audio();
<   xaudioURL = window.URL.createObjectURL(xblob);
<   xaudio.src = xaudioURL;
< }
<     // `microphone` can now act like any other AudioNode
<   }).catch((err) => {
<     // browser unable to access microphone
<     // (check to see if microphone is attached)
<   });
< } else {
<   // browser unable to access media devices
<   // (update your browser)
< }
< }
< 
< 
< function astopCapture() {
<   let atracks = audioElem.srcObject.getTracks();
< 
<   //tracks.forEach(track => amediaRecorder.addTrack(track, stream));
<   atracks.forEach(track => track.stop());
<   audioElem.srcObject = null;
<   if (amediaRecorder) {
<    amediaRecorder.stop();
<   }
< }
< 
< function adownload() {
<   //console.log("downloading 0");
< //  let dtracks = videoElem.srcObject.getTracks();
<   //tracks.forEach(track => mediaRecorder.addTrack(track, stream));
< //  dtracks.forEach(track => window.stream.addTrack(track));
<   //console.log("recording1 vs " + mediaRecorder.state);
<   //mediaRecorder.stop();
<   //console.log("recording2 vs " + mediaRecorder.state);
<   if (amediaRecorder) {
<   if (('' + amediaRecorder.state) != 'inactive') {
<   amediaRecorder.requestData();
<   }
<   //console.log("recording3 vs " + amediaRecorder.state);
<   xblob = new Blob(chunks, {
<     type: "audio/ogg; codecs=opus"
<   });
<   aaurl = URL.createObjectURL(xblob);
<   if (1 == 11) {
< RequestAsBlob(aaurl,
< function(aablob)
< {
<  var aaaurl = URL.createObjectURL(aablob);
< 
<  document.getElementById('playvideoa').src = aaaurl;
<  document.getElementById('playvideoa').play();
< });
<   } else {
<   //document.getElementById('playvideoa').src=url;
<  document.getElementById('playvideoa').src = aaurl;
<  if (delaya == 0) {
<  document.getElementById('playvideoa').play();
<  } else {
<  document.getElementById('divsync').innerHTML='<br><br>Clicking within video synchronizes an audiovisual replay';
<  document.getElementById('playvideo').title='Clicking within this video (not clicking play button) synchronizes an appropriate audiovisual replay';
<  playa(); //setTimeout(function(){ document.getElementById('playvideoa').play(); }, delaya);
<  //document.getElementById('playvideo').addEventListener('click', playa);
<  }
<   }
<   if (8 == 8) {
<   document.getElementById('playvideoa').style.display='block';
<   document.getElementById('playvideo').style.display='block';
<   }
<   aa = document.createElement("a");
<   document.body.appendChild(aa);
<   aa.style = "display: none";
<   aa.href = aaurl;
<   aa.download = "screen_capture_api_va.ogg";
<   aa.click();
<     setTimeout(() => {
<         document.body.removeChild(aa);
<         window.URL.revokeObjectURL(aaurl);
<     }, 100);
<   //window.URL.revokeObjectURL(url);
<   //console.log("downloading 1");
<   //amediaRecorder.start(1000);
<   //console.log("recording4 vs " + amediaRecorder.state);
<   }
< }
< 
< function playa() {
<   setTimeout(function(){ document.getElementById('playvideoa').play(); }, delaya);
< }
< 
< function dostopit() {
<   astopCapture();
< }
< 
< 
442c257
< <table id=mytable><tr><td><button id=start>Capture<br>Screen<br>Start &#9654;</button>&nbsp;<table style='display:inline-block;'><tr><td><button id=astart>Audio &#9654;</button><button style='display:none;' onclick="adownload();" id=adownload>Download &#127908;</button></td></tr><tr><td><button onclick="download();" id=download disabled>Download &#128249;</button></td></tr></table>&nbsp;<button id=stop disabled>Stop &#9209;</button><button id=astop style='display:none;'>Stop &#9209;</button><br><br>
---
> <table id=mytable><tr><td><button id=start>Capture<br>Screen<br>Start &#9654;</button>&nbsp;<button onclick="download();" id=download>Download &#128249;</button>&nbsp;<button id=stop>Stop &#9209;</button><br><br>
458,459d272
< const astartElem = document.getElementById("astart");
< const astopElem = document.getElementById("astop");
475,484d287
< // Set event listeners for the start and stop buttons ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
< astartElem.addEventListener("click", function(evt) {
<   astartCapture();
< }, false);
< 
< astopElem.addEventListener("click", function(evt) {
<   astopCapture();
< }, false);
< 
< 
494c297
<  document.write('<div style="overflow-y:visible;width:100%;height:' + eval(1.2 * eval('' + screen.height)) + 'px;"><iframe class="sample-code-frame" title="Simple screen capture sample" id="frame_simple_screen_capture" min-width="640" data-min-height="680" width="100%" height="' + eval(1.2 * eval('' + screen.height)) + '" style="' + eval(1.2 * eval('' + screen.height)) + 'px;" src="./screen_capture_api_test.htm?iframe=yes' + Math.floor(Math.random() * 19875643) + '" allow="display-capture" loading="lazy"></iframe></div>');
---
>  document.write('<iframe class="sample-code-frame" title="Simple screen capture sample" id="frame_simple_screen_capture" min-width="640" min-height="680" width="100%" height="100%" src="./screen_capture_api_test.htm?iframe=yes' + Math.floor(Math.random() * 19875643) + '" allow="display-capture" loading="lazy"></iframe>');
497,503d299
< <hr id=myhr>
< <table id=myplayt style="width:96%;"><tr><td style="width:70%;">
< <video id=playvideo style='display:none;width:95%;' type='video/webm' onloadeddata='playa();' onclick='playa();' controls>
< <!--source id=playvideov type='video/webm' style='display:none;' src=''></source-->
< <!--source id=playvideoas type='audio/ogg' style='display:none;' src=''></source-->
< </video></td><td style="width:30%;">
< <audio id=playvideoa style='display:none;width:95%;' type='audio/ogg' controls></audio><br><div id=divsync></div></td></tr></table><br><br><p id=lastp></p>
506d301
<