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