{"id":34686,"date":"2020-11-01T01:28:57","date_gmt":"2020-11-01T01:28:57","guid":{"rendered":"https:\/\/www.myedme.com\/login\/?p=34686"},"modified":"2021-01-22T01:12:03","modified_gmt":"2021-01-22T01:12:03","slug":"test-recording","status":"publish","type":"post","link":"https:\/\/myedme.com\/login\/test-recording\/","title":{"rendered":"Test-Recording"},"content":{"rendered":"\n<!doctype html>\n<html>\n\n<head>\n    <title>Sample Video 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=\"contentarea\">\n        <h1>\n            Sample Video Capture Item Type\n        <\/h1>\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\">Start Video<\/button>\n                <\/div>\n            <\/div>\n            <div class=\"col-sm-6\" style=\"text-align: left; float: left;\">\n                <img id=\"photo\" style=\"display: none;\" alt=\"The screen capture will appear in this box.\">\n\n                <button id=\"stopbutton\" style=\"display: none;\">Stop this recording<\/button>\n                <button id=\"savebutton\" style=\"display: none;\">Save this video<\/button>\n\n                <input type=\"file\" id=\"inputFile\" style=\"display: none;\">\n            <\/div>\n        <\/div>\n    <\/div>\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\n            function startup() {\n                video = document.getElementById('video');\n                canvas = document.getElementById('canvas');\n                photo = document.getElementById('photo');\n                startbutton = document.getElementById('startbutton');\n                stopbutton = document.getElementById('stopbutton');\n                savebutton = document.getElementById('savebutton');\n                inputFile = document.getElementById('inputFile');\n                let downloadButton = document.getElementById(\"downloadButton\");\n                let logElement = document.getElementById(\"log\");\n\n                let recordingTimeMS = 9000;\n\n                startbutton.addEventListener(\"click\", function() {\n                    navigator.mediaDevices.getUserMedia({\n                            video: true,\n                            audio: false\n                        }).then(stream => {\n                            preview.srcObject = stream;\n                            downloadButton.href = stream;\n                            preview.captureStream = preview.captureStream || preview.mozCaptureStream;\n                            return new Promise(resolve => preview.onplaying = resolve);\n                        }).then(() => startRecording(preview.captureStream(), recordingTimeMS))\n                        .then(recordedChunks => {\n                            let recordedBlob = new Blob(recordedChunks, {\n                                type: \"video\/webm\"\n                            });\n                            recording.src = URL.createObjectURL(recordedBlob);\n                            downloadButton.href = recording.src;\n                            downloadButton.download = \"RecordedVideo.webm\";\n\n                            log(\"Successfully recorded \" + recordedBlob.size + \" bytes of \" +\n                                recordedBlob.type + \" media.\");\n                        })\n                        .catch(log);\n                }, false);\n\n                stopbutton.addEventListener(\"click\", function() {\n                    stop(preview.srcObject);\n                }, false);\n            }\n\n            \/\/Old Photo code for next 40 lines\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            \/\/        takeVideo();\n            \/\/        ev.preventDefault();\n            \/\/    }, false);\n\n            \/\/    clearVideo();\n            \/\/ }\n\n            \/\/ Fill the photo with an indication that none has been\n            \/\/ captured.\n\n\n            function log(msg) {\n                \/\/logElement.innerHTML += msg + \"\\n\";\n            }\n\n            function wait(delayInMS) {\n                return new Promise(resolve => setTimeout(resolve, delayInMS));\n            }\n\n            function startRecording(stream, lengthInMS) {\n                let recorder = new MediaRecorder(stream);\n                let data = [];\n\n                var videoFile = stream;\n                photo.setAttribute('src', videoFile);\n              \n\n                recorder.ondataavailable = event => data.push(event.data);\n                recorder.start();\n                log(recorder.state + \" for \" + (lengthInMS \/ 1000) + \" seconds...\");\n\n                let stopped = new Promise((resolve, reject) => {\n                    recorder.onstop = resolve;\n                    recorder.onerror = event => reject(event.name);\n                });\n\n                let recorded = wait(lengthInMS).then(\n                    () => recorder.state == \"recording\" && recorder.stop()\n                );\n\n                return Promise.all([\n                        stopped,\n                        recorded\n                    ])\n                    .then(() => data);\n            }\n\n            function stop(stream) {\n                stream.getTracks().forEach(track => track.stop());\n                document.getElementById(\"savebutton\").style.visibility = \"visible\";\n                document.getElementById(\"savebutton\").style.display = \"block\";\n               takeVideo(stream)\n            }\n\n            function clearVideo() {\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 takeVideo(stream) {\n               \/\/Displaying screenshot\n                \/\/Isolating pic data to save the data\n                var videoFile = stream;\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.myedme.com\/login\/SRL01e',\n                        'action': 'edme_pic_function',\n                        'type': 'POST',\n                        'file': stream\n                    }\n                    jQuery.post('https:\/\/www.myedme.com\/login\/wp-admin\/admin-ajax.php', gameData, function(response) {\n                        \/\/\t\t        alert('Got this from the server: ' + response);\n                        console.log('Got this from the server: ' + response);\n                    });\n                });\n            }\n\n        \/\/ Set up our event listener to run the startup process once loading is complete.\n        window.addEventListener('load', startup, false);\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Sample Video Item Type Sample Video Capture Item Type Video stream not available. Start Video Stop this recording Save this video<\/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-34686","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\/34686","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=34686"}],"version-history":[{"count":6,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/34686\/revisions"}],"predecessor-version":[{"id":35321,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/posts\/34686\/revisions\/35321"}],"wp:attachment":[{"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/media?parent=34686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/categories?post=34686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myedme.com\/login\/wp-json\/wp\/v2\/tags?post=34686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}