1
我的网站允许用户录制画布并同时在画布上绘制。如果用户开始记录画布，并开始在画布上绘制画布上的图形，它将开始落下。我被告知多线程网络工作者应该能够解决这个问题。但是我不确定我该如何开始。如何在我的JavaScript中实现多线程？
有人可以指导我吗？我应该在postmessage/onmessage中放置什么？
var recordUrl;
var audioUrl;
var audioStream;
var audiorecorder;
var elementToShare = document.getElementById("elementToShare");
var recorder = RecordRTC(elementToShare, {
type: 'canvas'
});
document.getElementById('start').onclick = function() {
/*
<script id="worker" type="javascript/worker">
<!--M KY -->
multithreading
var blob = new Blob([document.getElementById('worker').textContent]);
var worker = new Worker(window.webkitURL.revokeObjectURL(blob));
URL.revokeObjectURL(blob);
return worker;
worker.onmessage = function(event) {
}
worker.postnmessage = function(event) {
}
*/
$('#record').trigger('click');
if (!audioStream)
navigator.getUserMedia(audioConstraints, function(stream) {
if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks());
audioStream = stream;
// "audio" is a default type
audiorecorder = window.RecordRTC(stream, {
type: 'audio',
bufferSize: typeof params.bufferSize == 'undefined' ? 16384 : params.bufferSize,
sampleRate: typeof params.sampleRate == 'undefined' ? 44100 : params.sampleRate,
leftChannel: params.leftChannel || false,
disableLogs: params.disableLogs || false
});
audiorecorder.startRecording();
}, function() {});
else {
audio.src = URL.createObjectURL(audioStream);
audio.muted = true;
audio.play();
if (audiorecorder) audiorecorder.startRecording();
}
window.isAudio = true;
recorder.startRecording();
document.getElementById('start').disabled = true;
setTimeout(function() {
document.getElementById('stop').disabled = false;
}, 1000);
//worker.terminate();
// }
};
画布代码
<div id="cover">
<!-- <canvas id="fakecanvas" width="890" height="1267" style="z-index: 2; position: absolute;left:18%"></canvas> -->
<canvas id="canvas" width="890" height="1267" style="z-index: 1; border:1px solid black; position: absolute;"></canvas>
</div>
</div>
</section>
<section id="section-2">
<div style="width: 100%; height:5%; float:left;">
<a id="capture2" onclick="capFunction2();">
<input type="image" name="screenshot2" value="Save This Page" style="float: right; width:25px; height:25px;" src="img/camera.png">
</a>
<script>
function downloadCanvas2(link, canvasId, filename) {
html2canvas([document.getElementById(canvasId)], {
onrendered: function(cvs2) {
//var canvasData = cvs2.toDataURL('image/png');
var link = document.createElement("a");
link.href = cvs2.toDataURL();
link.download = filename;
link.click();
}
});
}
document.getElementById('capture2').addEventListener('click', function() {
var currentTime2 = new Date().YYYYMMDDHHMMSS();
downloadCanvas2(this, 'viewer2', currentTime2 + '.jpg');
}, false);
</script>
Web Workers无法访问dom，这可能是您的使用案例的限制。尽管我不知道它是如何工作的，但您仍然可以使用它来处理背景中的原始数据。 – Ali
谢谢..其他人可以指导我在上述代码上实现web worker吗？ –
WebWorkers将只用于执行巨大的计算，例如上下文的imageData。如果这是你正在做的事情，那么把图像数据发送给你的webworker。在这里我们没有关于您的画布代码的任何内容，除了您似乎尝试通过RecordRTC录制它。这个录音不应该造成你遇到的滞后。 – Kaiido