{"id":56286,"date":"2022-07-01T03:01:50","date_gmt":"2022-06-30T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56286"},"modified":"2022-07-06T15:52:36","modified_gmt":"2022-07-06T05:52:36","slug":"screen-capture-api-download-video-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/screen-capture-api-download-video-tutorial\/","title":{"rendered":"Screen Capture API Download Video Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Screen Capture API Download Video Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test_video_download.jpg\" title=\"Screen Capture API Download Video Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Screen Capture API Download Video Tutorial<\/p><\/div>\n<p>Lots of users will have noticed regarding yesterday&#8217;s <a title='Screen Capture API Primer Tutorial' href='#scapipt'>Screen Capture API Primer Tutorial<\/a> creation of a &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Screen Capture API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen_Capture_API'>Screen Capture API<\/a> inspired &#8220;streamed video&#8221; &#8230; the downside is that &#8230;<\/li>\n<li>context (or right-click or two finger gesture) menu over that &#8220;streamed video&#8221; has a grayed out &#8220;Save Video As&#8230;&#8221; option &#8230; hampering sharing, except that, today, we add &#8230;<\/li>\n<li>&#8220;streamed video&#8221; sharing mechanism, featuring &#8230;\n<ol>\n<li>one new HTML &#8220;Download &#128249;&#8221; button and canvas &#8230;<br \/>\n<code><br \/>\n&lt;button onclick=\"download();\" id=download&gt;Download &amp;#128249;&lt;\/button&gt;<br \/>\n&lt;canvas id=canvas&gt;&lt;\/canvas&gt;<br \/>\n<\/code><br \/>\n &#8230; linking to &#8220;onclick&#8221; logic &#8230;\n<\/li>\n<li>Javascript event logic for download of a &#8220;webm&#8221; video &#8230;<br \/>\n<code><br \/>\nvar mediaRecorder=null;<br \/>\nvar blob=null, url=null, a=null;<br \/>\nvar recorderChunks=[];<br \/>\n<br \/>\nfunction download() {<br \/>\n  if (mediaRecorder) {<br \/>\n  if (('' + mediaRecorder.state) != 'inactive') {<br \/>\n  mediaRecorder.requestData();<br \/>\n  }<br \/>\n  blob = new Blob(recordedChunks, {<br \/>\n    type: \"video\/webm\"<br \/>\n  });<br \/>\n  url = URL.createObjectURL(blob);<br \/>\n  a = document.createElement(\"a\");<br \/>\n  document.body.appendChild(a);<br \/>\n  a.style = \"display: none\";<br \/>\n  a.href = url;<br \/>\n  a.download = \"screen_capture_api_test.webm\";<br \/>\n  a.click();<br \/>\n    setTimeout(() => {<br \/>\n        document.body.removeChild(a);<br \/>\n        window.URL.revokeObjectURL(url);<br \/>\n    }, 100);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; using  &#8230;\n<\/li>\n<li><a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MediaStream_Recording_API' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MediaStream_Recording_API'>Media Recorder<\/a> <font color=blue>object and method logics<\/font> &#8230;<br \/>\n<code><br \/>\nasync function startCapture() {<br \/>\n  <font color=blue>recordedChunks = [];<\/font><br \/>\n<br \/> <br \/>\n  if (typeof(logElem) !== 'undefined') {<br \/>\n  logElem.innerHTML = \"\";<br \/>\n  }<br \/>\n<br \/>\n  try {<br \/>\n    if (typeof(videoElem) !== 'undefined') {<br \/>\n    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);<br \/>\n    dumpOptionsInfo();<br \/>\n    }<br \/>\n  } catch(err) {<br \/>\n    console.error(\"Error: \" + err);<br \/>\n  }<br \/>\n<br \/>\n  <font color=blue>if (typeof(stream) === 'undefined') {<br \/>\nconst canvas = document.querySelector(\"canvas\");<br \/>\nconst stream = canvas.captureStream(25);<br \/>\n<br \/>\n window.stream = stream;<br \/>\n const options = { mimeType: \"video\/webm;codecs=vp9\" };  \/\/ vs 9<br \/>\n mediaRecorder = new MediaRecorder(videoElem.srcObject, options);<br \/>\n<br \/>\n mediaRecorder.ondataavailable = function(e) {<br \/>\n  if (e.data.size &gt; 0){<br \/>\n    recordedChunks.push(e.data);<br \/>\n  }<br \/>\n };<br \/>\n<br \/>\n mediaRecorder.start(1000);<br \/>\n<br \/> <br \/>\n mediaRecorder.onstop = function(e) {<br \/>\n  if (recordedChunks) {<br \/>\n    if(1 == 5 && recordedChunks.length &gt; 0 && document.getElementById('audio')) {<br \/>\n      \/\/const audio = document.querySelector('audio');<br \/>\n      audio.controls = true;<br \/>\n      bloba = new Blob(recordedChunks, { 'type' : 'audio\/ogg; codecs=opus'      });<br \/>\n      audioURL = window.URL.createObjectURL(bloba);<br \/>\n      audio.src = audioURL;<br \/>\n    }<br \/>\n   }<br \/>\n   location.href=document.URL;<br \/>\n  };<br \/>\n<br \/>\n  }<\/font><br \/>\n<br \/> <br \/>\n  if (document.getElementById('mybody')) {<br \/>\n  document.getElementById('mybody').style.backgroundImage='none';<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html-GETME\" title=\"screen_capture_api_test.htm\">a changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html-GETME\" title=\"screen_capture_api_test.htm\">screen_capture_api_test.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html\" title=\"Click picture\">live run<\/a>, that has a sharing component now, which you <a href='#ifsc'>can also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/screen-capture-api-download-video-tutorial\/'>Screen Capture API Download Video Tutorial<\/a>.<\/p-->\n<hr>\n<p id='scapipt'>Previous relevant <a target=_blank title='Screen Capture API Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/screen-capture-api-primer-tutorial\/'>Screen Capture API Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Screen Capture API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.gif\" title=\"Screen Capture API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Screen Capture API Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve spent another day researching the web <a target=_blank title='W3 Spec for Screen Capture API' href='https:\/\/www.w3.org\/TR\/screen-capture\/'>Screen Capture<\/a> <a target=_blank title='Screen Capture API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen_Capture_API'>API<\/a> whereby &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen_Capture_API'><p>\nThe Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.\n<\/p><\/blockquote>\n<p>Teamed with this great resource was the tutorial, we followed to a letter, called <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen_Capture_API\/Using_Screen_Capture' title='Using the Screen Capture API'>Using the Screen Capture API<\/a> that had us being able to display a video of the Screen Capturing, including cursor movement, as applicable.  Cute, huh?!<\/p>\n<p>Again, as with many web API functionality, permissions may need to be tweaked allowing the web browsers involved, permission to access &#8220;Screen Capturing&#8221;, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.gif\" title=\"Tutorial picture\">at least in the case of the macOS environment we tested this on today<\/a>.<\/p>\n<p>Luckily, we can show you the fruits of following a tutorial assiduously with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html_GETME\" title=\"screen_capture_api_test.html\">screen_capture_api_test.html<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html\" title=\"Click picture\">live run<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=ifsc src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/screen_capture_api_test.html?iframe=y\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56278' onclick='var dv=document.getElementById(\"d56278\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56278' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56286' onclick='var dv=document.getElementById(\"d56286\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/download\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56286' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lots of users will have noticed regarding yesterday&#8217;s Screen Capture API Primer Tutorial creation of a &#8230; Screen Capture API inspired &#8220;streamed video&#8221; &#8230; the downside is that &#8230; context (or right-click or two finger gesture) menu over that &#8220;streamed &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/screen-capture-api-download-video-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,33,37],"tags":[88,2360,2361,174,360,4008,576,652,4010,2189,849,861,4022,4021,2976,997,2256,1103,1114,1133,1137,1319,1369],"class_list":["post-56286","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-software","category-tutorials","tag-api","tag-async","tag-await","tag-button","tag-download","tag-getdisplaymedia","tag-html","tag-javascript","tag-mediarecorder","tag-navigator","tag-object","tag-onclick","tag-permission","tag-permissions","tag-privacy","tag-programming","tag-screen","tag-screen-capture","tag-security","tag-share","tag-sharing","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56286"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56286"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56286\/revisions"}],"predecessor-version":[{"id":56291,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56286\/revisions\/56291"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}