#javascript #django
Вопрос:
Я создаю веб-сайт с использованием Django, где пытаюсь реализовать функцию скриншотов и совместного использования экрана с помощью javascript. Я пытаюсь сделать снимок экрана, используя html2canvas, который является библиотекой javascript. На той же веб-странице есть функция совместного использования экрана, помимо скриншота. Когда я нажимаю «Сделать снимок экрана», делается снимок экрана div видео. Но видеоэкран не запечатлен на снимке экрана.
<html>
<head runat="server">
<title>Demo</title>
<style>
#video {
border: 1px solid #999;
width: 50%;
max-width: 860px;
}
.error {
color: red;
}
#photo {
width: 51%;
border: 4px solid green;
padding: 4px;
}
.warn {
color: orange;
}
.info {
color: darkgreen;
}
</style>
<!-- Include from the CDN -->
</head>
<body>
<h1>recording</h1>
<form id="form1" runat="server">
<div>
<p>
This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.
</p>
<p>
<input type="button" id="start" value="Start Capture" />amp;nbsp;
<input type="button" id="stop" value="Stop Capture" />
</p>
<p>
<a></a>
</p>
<div id="photo">
<video id="video" autoplay="autoplay"></video>
<hr>
<a onclick="takeshot()">
Take Screenshot
</a>
</div>
<br />
<h1>Screenshot:</h1>
<div id="output"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
// Options for getDisplayMedia()
var displayMediaOptions = {
video: {
cursor: "always"
},
audio: false
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function (evt) {
startCapture();
}, false);
stopElem.addEventListener("click", function (evt) {
stopCapture();
}, false);
var stream = null;
async function startCapture() {
try {
stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
videoElem.srcObject = stream;
let recorder = new MediaRecorder(stream);
let chunks = [];
recorder.start();
recorder.ondataavailable = event => {
if (event.data.size > 0) {
chunks.push(event.data)
}
console.log(chunks);
}
recorder.onstop = () => {
const blob = new Blob(chunks, {
type: 'video/mp4'
})
var blobUrl = URL.createObjectURL(blob);
// download the video file
saveData(blob,"samce");
var fs = require('fs');
console.log(fs);
chunks = [];
reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (event) {
var arrayBuffer = event.target.resu<
//console.log(arrayBuffer);
$.ajax({
type: "POST",
url: "RecordAndSave.aspx/Save",
data: '{ "blobData": "' arrayBuffer '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Do something here
console.log("upload vedio file" msg.d);
}
});
};
}
//console.log(stream);
dumpOptionsInfo();
} catch (err) {
console.error("Error: " err);
}
}
function stopCapture(evt) {
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => track.stop());
videoElem.srcObject = null;
}
function dumpOptionsInfo() {
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
}
// @func saveData(blob, filename)
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (blob, fileName) {
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
// Define the function
// to screenshot the div
function takeshot() {
let div = document.getElementById('photo');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
</script>
</div>
</form>
</body>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.3.2/dist/html2canvas.js"></script>
<script>
</script>
</html> Вы можете наблюдать за проблемой по ссылке: https://jsfiddle.net/79szpn24/
Еще один дополнительный момент, которым я хочу поделиться о функции Mozilla Firefox «Сделать снимок экрана». Пожалуйста, перейдите в Mozilla Firefox и нажмите «Ctrl Shift s», вы найдете их функцию скриншота. Как я могу сделать, как этот тип функции настройки скриншота с помощью javascript»?