Sample Screencapture Item Type<\/title>\n <meta charset='utf-8'>\n <style type=\"text\/css\" href=\"style.css\">\n #video {\n border: 1px solid black;\n box-shadow: 2px 2px 3px black;\n width: 320px;\n height: 240px;\n }\n \n #photo {\n border: 1px solid black;\n box-shadow: 2px 2px 3px black;\n width: 320px;\n height: 240px;\n }\n \n #canvas {\n display: none;\n }\n \n .camera {\n width: 340px;\n display: inline-block;\n }\n \n .output {\n width: 340px;\n display: inline-block;\n }\n \n #startbutton {\n display: block;\n position: relative;\n margin-left: auto;\n margin-right: auto;\n bottom: 32px;\n background-color: lightgreen;\n border: 1px solid rgba(255, 255, 255, 0.7);\n box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);\n font-size: 14px;\n font-family: \"Lucida Grande\", \"Arial\", sans-serif;\n color: rgba(255, 255, 255, 1.0);\n }\n \n #savebutton {\n display: block;\n position: relative;\n margin-left: auto;\n margin-right: auto;\n bottom: 32px;\n background-color: rgba(0, 150, 0, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.7);\n box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);\n font-size: 14px;\n font-family: \"Lucida Grande\", \"Arial\", sans-serif;\n color: rgba(255, 255, 255, 1.0);\n }\n \n .contentarea {\n font-size: 16px;\n font-family: \"Lucida Grande\", \"Arial\", sans-serif;\n width: 760px;\n }\n <\/style>\n<\/head>\n\n<body>\n<div class=\"row\">\n <div class=\"contentarea\">\n <h1><\/h1>\n <p>\n Capture your screenshot with the buttons below.\n <\/p>\n <div class=\"row\">\n <div class=\"col-sm-6\" style=\"text-align: left; float: left;\">\n <div class=\"camera\">\n <video id=\"video\">Video stream not available.<\/video>\n <button id=\"startbutton\">Take photo<\/button>\n <\/div>\n <\/div>\n <div class=\"col-sm-6\" style=\"text-align: left; float: left;\">\n <canvas id=\"canvas\">\n <\/canvas>\n <div class=\"output\">\n <img id=\"photo\" alt=\"The screen capture will appear in this box.\">\n <button id=\"savebutton\" style=\"display: none;\">Save this photo<\/button>\n <\/div>\n <input type=\"file\" id=\"inputFile\" style=\"display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n<\/body>\n\n<\/html>\n<script>\n (function() {\n \/\/ The width and height of the captured photo. We will set the\n \/\/ width to the value defined here, but the height will be\n \/\/ calculated based on the aspect ratio of the input stream.\n\n var width = 320; \/\/ We will scale the photo width to this\n var height = 0; \/\/ This will be computed based on the input stream\n\n \/\/ |streaming| indicates whether or not we're currently streaming\n \/\/ video from the camera. Obviously, we start at false.\n\n var streaming = false;\n\n \/\/ The various HTML elements we need to configure or control. These\n \/\/ will be set by the startup() function.\n\n var video = null;\n var canvas = null;\n var photo = null;\n var startbutton = null;\n var savebutton = null;\n var inputFile = null;\n var NextPage = null;\n\n\n function startup() {\n video = document.getElementById('video');\n canvas = document.getElementById('canvas');\n photo = document.getElementById('photo');\n startbutton = document.getElementById('startbutton');\n savebutton = document.getElementById('savebutton');\n inputFile = document.getElementById('inputFile');\nNextPage = document.getElementById('NextPage');\n\n navigator.mediaDevices.getUserMedia({\n video: true,\n audio: false\n })\n .then(function(stream) {\n video.srcObject = stream;\n video.play();\n })\n .catch(function(err) {\n console.log(\"An error occurred: \" + err);\n });\n\n video.addEventListener('canplay', function(ev) {\n if (!streaming) {\n height = video.videoHeight \/ (video.videoWidth \/ width);\n\n \/\/ Firefox currently has a bug where the height can't be read from\n \/\/ the video, so we will make assumptions if this happens.\n\n if (isNaN(height)) {\n height = width \/ (4 \/ 3);\n }\n\n video.setAttribute('width', width);\n video.setAttribute('height', height);\n canvas.setAttribute('width', width);\n canvas.setAttribute('height', height);\n streaming = true;\n }\n }, false);\n\n startbutton.addEventListener('click', function(ev) {\n takepicture();\n ev.preventDefault();\n }, false);\n\n clearphoto();\n }\n\n \/\/ Fill the photo with an indication that none has been\n \/\/ captured.\n\n function clearphoto() {\n var context = canvas.getContext('2d');\n context.fillStyle = \"#AAA\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n var data = canvas.toDataURL('image\/png');\n photo.setAttribute('src', data);\n }\n\n \/\/ Capture a photo by fetching the current contents of the video\n \/\/ and drawing it into a canvas, then converting that to a PNG\n \/\/ format data URL. By drawing it on an offscreen canvas and then\n \/\/ drawing that to the screen, we can change its size and\/or apply\n \/\/ other changes before drawing it.\n\n function takepicture() {\n var context = canvas.getContext('2d');\n if (width && height) {\n canvas.width = width;\n canvas.height = height;\n context.drawImage(video, 0, 0, width, height);\n document.getElementById(\"savebutton\").style.visibility = \"visible\";\n document.getElementById(\"savebutton\").style.display = \"block\";\n \/\/Displaying screenshot\n \/\/Isolating pic data to save the data\n var picFile = canvas.toDataURL('image\/png');\n photo.setAttribute('src', picFile);\n var picArray = picFile.split(\",\");\n var picType = picArray[0]; \n var picString = picArray[1]; \n console.log(\"type: \" + picType + \" data: \" + picString + \"\/n picFile: \" + picFile);\n \n \/\/var pic_data2 = canvas.toBlob(context,\"image\/jpeg\",0.8);\n \/\/var picFile = canvas.toDataURL(\"image\/png\").replace(\"image\/png\", \"image\/octet-stream\");\n \/\/picFile = picFile.prop('files')[0];\n \/\/canvas.toBlob(function(blob) {\n \/\/ saveAs(blob, \"SRL01d.png\");\n \/\/});\n savebutton.addEventListener('click', function(ev) {\n console.log(\"Saving photo.\")\n\n \/\/pic_data = new FormData();\n \/\/pic_data.append('file', data);\n\n var gameData = {\n 'publicKey2': 'saving link for stuAns 2',\n 'publicKey1': 'saving link for stuAns 1',\n 'stuAns1': 'photoLink',\n 'stuAns2': '88',\n 'stuAns3': 'photoLink',\n 'stem': 'Link for SRL01d',\n 'keys1': '5',\n 'keys2': '88',\n 'answerId': 'pic',\n 'queId': 'SRL01d',\n 'contextGrp1': '4OA3',\n 'contextGrp2': 'MP',\n 'score1': '0',\n 'score2': '88',\n 'questionNum': 'SRL01d',\n 'chapterName': 'SRL',\n 'queFormat': '6',\n 'nextAddress': 'https:\/\/www.nobelprize.org\/uploads\/2021\/10\/Studentworksheet_Medicine_2021_Nobelprizelessons.pdf',\n 'action': 'edme_pic_function',\n 'type': 'POST',\n 'file': picFile\n }\n console.log('Sending this to the server: ' + gameData);\n jQuery.post('https:\/\/myedme.com\/login\/wp-admin\/admin-ajax.php', gameData, function(response) {\n \/\/ Old webaddress: https:\/\/www.myedme.com\/login\/wp-admin\/admin-ajax.php\n \/\/ New webaddress: https:\/\/myedme.com\/login\/wp-admin\/admin-post.php\n console.log('Got this from the server: ' + response);\ndocument.getElementById(\"NextPage\").style.backgroundColor = \"green\";\n });\n });\n } else {\n clearphoto();\n }\n }\n\n\n\n \/\/ Set up our event listener to run the startup process\n \/\/ once loading is complete.\n window.addEventListener('load', startup, false);\n })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Two times a week, please upload a picture (or two) of the notes you took or problems you solved as part of your calculus studying. Not only does this help you stay accountable to yourself, but it will help me be more prepared for our sessions. Use the interface below, by allowing this page to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-35626","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/35626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/comments?post=35626"}],"version-history":[{"count":3,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/35626\/revisions"}],"predecessor-version":[{"id":35631,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/35626\/revisions\/35631"}],"wp:attachment":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/media?parent=35626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/categories?post=35626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/tags?post=35626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":35626,"date":"2021-10-06T19:46:38","date_gmt":"2021-10-06T19:46:38","guid":{"rendered":"https:\/\/myedme.com\/login\/?p=35626"},"modified":"2021-10-06T19:51:33","modified_gmt":"2021-10-06T19:51:33","slug":"omars-calculus-notes","status":"publish","type":"post","link":"https:\/\/myedme.com\/login\/omars-calculus-notes\/","title":{"rendered":"Omar’s Calculus Notes"},"content":{"rendered":"\n

Two times a week, please upload a picture (or two) of the notes you took or problems you solved as part of your calculus studying. Not only does this help you stay accountable to yourself, but it will help me be more prepared for our sessions. <\/p>\n\n\n\n

Use the interface below, by allowing this page to use your phone or computer’s camera. Then, click “Take Photo”. If you are unhappy with the photo quality, just click “Take Photo” again. When you have the photo you want, click “Save Photo” and I can see it in the database. Thanks for helping me perfect this technology! (p.s. When you are done with the page, close it. It can drain your battery quickly.)<\/p>\n\n\n\n\n\n\n\n Sample Screencapture Item Type<\/title>\n <meta charset='utf-8'>\n <style type=\"text\/css\" href=\"style.css\">\n #video {\n border: 1px solid black;\n box-shadow: 2px 2px 3px black;\n width: 320px;\n height: 240px;\n }\n \n #photo {\n border: 1px solid black;\n box-shadow: 2px 2px 3px black;\n width: 320px;\n height: 240px;\n }\n \n #canvas {\n display: none;\n }\n \n .camera {\n width: 340px;\n display: inline-block;\n }\n \n .output {\n width: 340px;\n display: inline-block;\n }\n \n #startbutton {\n display: block;\n position: relative;\n margin-left: auto;\n margin-right: auto;\n bottom: 32px;\n background-color: lightgreen;\n border: 1px solid rgba(255, 255, 255, 0.7);\n box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);\n font-size: 14px;\n font-family: \"Lucida Grande\", \"Arial\", sans-serif;\n color: rgba(255, 255, 255, 1.0);\n }\n \n #savebutton {\n display: block;\n position: relative;\n margin-left: auto;\n margin-right: auto;\n bottom: 32px;\n background-color: rgba(0, 150, 0, 0.5);\n border: 1px solid rgba(255, 255, 255, 0.7);\n box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);\n font-size: 14px;\n font-family: \"Lucida Grande\", \"Arial\", sans-serif;\n color: rgba(255, 255, 255, 1.0);\n }\n \n .contentarea {\n font-size: 16px;\n font-family: \"Lucida Grande\", \"Arial\", sans-serif;\n width: 760px;\n }\n <\/style>\n<\/head>\n\n<body>\n<div class=\"row\">\n <div class=\"contentarea\">\n <h1><\/h1>\n <p>\n Capture your screenshot with the buttons below.\n <\/p>\n <div class=\"row\">\n <div class=\"col-sm-6\" style=\"text-align: left; float: left;\">\n <div class=\"camera\">\n <video id=\"video\">Video stream not available.<\/video>\n <button id=\"startbutton\">Take photo<\/button>\n <\/div>\n <\/div>\n <div class=\"col-sm-6\" style=\"text-align: left; float: left;\">\n <canvas id=\"canvas\">\n <\/canvas>\n <div class=\"output\">\n <img id=\"photo\" alt=\"The screen capture will appear in this box.\">\n <button id=\"savebutton\" style=\"display: none;\">Save this photo<\/button>\n <\/div>\n <input type=\"file\" id=\"inputFile\" style=\"display: none;\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n<\/body>\n\n<\/html>\n<script>\n (function() {\n \/\/ The width and height of the captured photo. We will set the\n \/\/ width to the value defined here, but the height will be\n \/\/ calculated based on the aspect ratio of the input stream.\n\n var width = 320; \/\/ We will scale the photo width to this\n var height = 0; \/\/ This will be computed based on the input stream\n\n \/\/ |streaming| indicates whether or not we're currently streaming\n \/\/ video from the camera. Obviously, we start at false.\n\n var streaming = false;\n\n \/\/ The various HTML elements we need to configure or control. These\n \/\/ will be set by the startup() function.\n\n var video = null;\n var canvas = null;\n var photo = null;\n var startbutton = null;\n var savebutton = null;\n var inputFile = null;\n var NextPage = null;\n\n\n function startup() {\n video = document.getElementById('video');\n canvas = document.getElementById('canvas');\n photo = document.getElementById('photo');\n startbutton = document.getElementById('startbutton');\n savebutton = document.getElementById('savebutton');\n inputFile = document.getElementById('inputFile');\nNextPage = document.getElementById('NextPage');\n\n navigator.mediaDevices.getUserMedia({\n video: true,\n audio: false\n })\n .then(function(stream) {\n video.srcObject = stream;\n video.play();\n })\n .catch(function(err) {\n console.log(\"An error occurred: \" + err);\n });\n\n video.addEventListener('canplay', function(ev) {\n if (!streaming) {\n height = video.videoHeight \/ (video.videoWidth \/ width);\n\n \/\/ Firefox currently has a bug where the height can't be read from\n \/\/ the video, so we will make assumptions if this happens.\n\n if (isNaN(height)) {\n height = width \/ (4 \/ 3);\n }\n\n video.setAttribute('width', width);\n video.setAttribute('height', height);\n canvas.setAttribute('width', width);\n canvas.setAttribute('height', height);\n streaming = true;\n }\n }, false);\n\n startbutton.addEventListener('click', function(ev) {\n takepicture();\n ev.preventDefault();\n }, false);\n\n clearphoto();\n }\n\n \/\/ Fill the photo with an indication that none has been\n \/\/ captured.\n\n function clearphoto() {\n var context = canvas.getContext('2d');\n context.fillStyle = \"#AAA\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n var data = canvas.toDataURL('image\/png');\n photo.setAttribute('src', data);\n }\n\n \/\/ Capture a photo by fetching the current contents of the video\n \/\/ and drawing it into a canvas, then converting that to a PNG\n \/\/ format data URL. By drawing it on an offscreen canvas and then\n \/\/ drawing that to the screen, we can change its size and\/or apply\n \/\/ other changes before drawing it.\n\n function takepicture() {\n var context = canvas.getContext('2d');\n if (width && height) {\n canvas.width = width;\n canvas.height = height;\n context.drawImage(video, 0, 0, width, height);\n document.getElementById(\"savebutton\").style.visibility = \"visible\";\n document.getElementById(\"savebutton\").style.display = \"block\";\n \/\/Displaying screenshot\n \/\/Isolating pic data to save the data\n var picFile = canvas.toDataURL('image\/png');\n photo.setAttribute('src', picFile);\n var picArray = picFile.split(\",\");\n var picType = picArray[0]; \n var picString = picArray[1]; \n console.log(\"type: \" + picType + \" data: \" + picString + \"\/n picFile: \" + picFile);\n \n \/\/var pic_data2 = canvas.toBlob(context,\"image\/jpeg\",0.8);\n \/\/var picFile = canvas.toDataURL(\"image\/png\").replace(\"image\/png\", \"image\/octet-stream\");\n \/\/picFile = picFile.prop('files')[0];\n \/\/canvas.toBlob(function(blob) {\n \/\/ saveAs(blob, \"SRL01d.png\");\n \/\/});\n savebutton.addEventListener('click', function(ev) {\n console.log(\"Saving photo.\")\n\n \/\/pic_data = new FormData();\n \/\/pic_data.append('file', data);\n\n var gameData = {\n 'publicKey2': 'saving link for stuAns 2',\n 'publicKey1': 'saving link for stuAns 1',\n 'stuAns1': 'photoLink',\n 'stuAns2': '88',\n 'stuAns3': 'photoLink',\n 'stem': 'Link for SRL01d',\n 'keys1': '5',\n 'keys2': '88',\n 'answerId': 'pic',\n 'queId': 'SRL01d',\n 'contextGrp1': '4OA3',\n 'contextGrp2': 'MP',\n 'score1': '0',\n 'score2': '88',\n 'questionNum': 'SRL01d',\n 'chapterName': 'SRL',\n 'queFormat': '6',\n 'nextAddress': 'https:\/\/www.nobelprize.org\/uploads\/2021\/10\/Studentworksheet_Medicine_2021_Nobelprizelessons.pdf',\n 'action': 'edme_pic_function',\n 'type': 'POST',\n 'file': picFile\n }\n console.log('Sending this to the server: ' + gameData);\n jQuery.post('https:\/\/myedme.com\/login\/wp-admin\/admin-ajax.php', gameData, function(response) {\n \/\/ Old webaddress: https:\/\/www.myedme.com\/login\/wp-admin\/admin-ajax.php\n \/\/ New webaddress: https:\/\/myedme.com\/login\/wp-admin\/admin-post.php\n console.log('Got this from the server: ' + response);\ndocument.getElementById(\"NextPage\").style.backgroundColor = \"green\";\n });\n });\n } else {\n clearphoto();\n }\n }\n\n\n\n \/\/ Set up our event listener to run the startup process\n \/\/ once loading is complete.\n window.addEventListener('load', startup, false);\n })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Two times a week, please upload a picture (or two) of the notes you took or problems you solved as part of your calculus studying. Not only does this help you stay accountable to yourself, but it will help me be more prepared for our sessions. Use the interface below, by allowing this page to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-35626","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/35626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/comments?post=35626"}],"version-history":[{"count":3,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/35626\/revisions"}],"predecessor-version":[{"id":35631,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/35626\/revisions\/35631"}],"wp:attachment":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/media?parent=35626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/categories?post=35626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/tags?post=35626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}