MP4 recorder

MP4 recorder
2019-09-14T22:51:42+02:00
2019-09-23T20:40:47+02:00
2022-12-06T03:25:56+01:00
Bokor Béla
Sziasztok
Egy régebbi témában kérnék újra segítséget.
Van egy kódom
egy tömbben tárolt mp3-at játszik le
közben a képernyőn egy részét veszi fel a program 
(Az eddigi kód is a prog.hu segítségével jött létre)

2 problémában kérek segítséget
Az első, hogy a "var source = context2.createMediaElementSource(audio);" sor hibaüzenetet küld
Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
at Audio.<anonymous>

A másik 
Jó lenne ha az getMp3FromUrl ne kétféleképpen kelljen meghívni

A kód

<head> <style> html, body { margin: 0!important; padding: 0!important; } video { width: auto; max-width: 100%; } </style> <br> <button id="btn-start-recording">Start Recording</button> <button id="btn-stop-recording" >Stop Recording</button> <hr> <div style="display: none;"> <video controls autoplay playsinline id="preview-video"></video> </div> <div id="element-to-record" style="border: 5px solid gray; border-radius: 5px; padding: 20px; margin: 20px;width: 480px; height: 360px;"> <div id="szam" style=" font-size:36px" >1</div> <input type="text"/> <canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas> <script src="https://www.webrtc-experiment.com/RecordRTC.js"></script> <script src="https://www.webrtc-experiment.com/html2canvas.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script> document.getElementById("szam").innerText = 999; window.AudioContext = window.AudioContext || window.webkitAudioContext; var recordAudio; var sz =0 var recorder; var elementToRecord; var canvas2d; var isRecordingStarted = false; var isStoppedRecording = false; var context2; var finalStream = new MediaStream(); var audio = new Audio(); (function looper() { if (!isRecordingStarted) { return setTimeout(looper, 500); } html2canvas(elementToRecord).then(function(canvas) { context.clearRect(0, 0, canvas2d.width, canvas2d.height); context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height); if (isStoppedRecording) { return; } requestAnimationFrame(looper); }); })(); function getMp3FromUrl(mp3URL, callback) { document.getElementById("szam").innerText = mp3URL;; audio.volume = 1; audio.src = mp3URL; audio.crossOrigin = "anonymous"; audio.addEventListener("canplay", function() { audio.play(); //console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds."); if (context2 == undefined) { context2 = new AudioContext(); } var gainNode = context2.createGain(); gainNode.connect(context2.destination); gainNode.gain.value = 1; // don't play for self var source = context2.createMediaElementSource(audio); var destination = context2.createMediaStreamDestination(); source.connect(destination); callback(destination.stream); audio.onended = function() { sz++; if (sz<MP3.length){ getMp3FromUrl(MP3[sz],function(audioStream) { }) }else{ document.getElementById('btn-stop-recording').click(); }; }; }); audio.onerror = function() { alert('Failed to load: ' + mp3URL); }; } document.getElementById('btn-start-recording').onclick = function() { getMp3FromUrl(MP3[0], function(audioStream) { isRecordingStarted = true; elementToRecord = document.getElementById('element-to-record'); canvas2d = document.getElementById('background-canvas'); context = canvas2d.getContext('2d'); canvas2d.width = elementToRecord.clientWidth; canvas2d.height = elementToRecord.clientHeight; var canvasStream = canvas2d.captureStream(); audioStream.getAudioTracks().forEach(function(track) { finalStream.addTrack(track); }); canvasStream.getVideoTracks().forEach(function(track) { finalStream.addTrack(track); }); recorder = RecordRTC(finalStream, { type: 'video' }); recorder.startRecording(); }); }; document.getElementById('btn-stop-recording').onclick = function() { this.disabled = true; recorder.stopRecording(function() { isRecordingStarted = false; isStoppedRecording = true; var blob = recorder.getBlob(); // document.getElementById('preview-video').srcObject = null; document.getElementById('preview-video').src = URL.createObjectURL(blob); document.getElementById('preview-video').parentNode.style.display = 'block'; }); }; var MP3 = ['download2_160.mp3','download24.mp3','download22.mp3','download24.mp3','download22.mp3']; </script> </body> </html>
Mutasd a teljes hozzászólást!
Szerintem rosszul értelmezted a Frostech0 által adott fiddle-kódot és ezért tévesen alakítottad át...
1. Base64 text helyett egy mp3 fájlokat tartalmazó tömb az MP3 változód...
2. Ezt a tömböt adod át a "getMp3FromUrl" függvényednek a felvételi startnál...
3. Szerintem nagy hiba, hogy a "getMp3FromUrl" függvényben saját magát hívod meg. Nem gondoltad át a Frostech0 javaslatot alaposan...
4. Véleményem szerint az adott mp3 fájlokat előbb valamilyen módszerrel össze kellene fűzni egyetlen egy Base64 text-be és azt átadni a felvevődnek.
5. Ha tévedek vagy nem felel meg a javaslat, akkor
Mutasd a teljes hozzászólást!

  • Esetleg egy link a tesztedről a kipróbálás, tesztelés érdekében?
    Lehet úgy is, mint Frostecth0 adta neked az előző kérdésednél, valahogy így ha emlékszel még rá...
    Megj: Vagy a hibaüzenet értelmezése az adott kódod végigkövetve...
    Mutasd a teljes hozzászólást!
  • http://anyspeak.hu/angol/pr3.php
    ezen a linken tudod elérni
    Mutasd a teljes hozzászólást!
  • Szerintem rosszul értelmezted a Frostech0 által adott fiddle-kódot és ezért tévesen alakítottad át...
    1. Base64 text helyett egy mp3 fájlokat tartalmazó tömb az MP3 változód...
    2. Ezt a tömböt adod át a "getMp3FromUrl" függvényednek a felvételi startnál...
    3. Szerintem nagy hiba, hogy a "getMp3FromUrl" függvényben saját magát hívod meg. Nem gondoltad át a Frostech0 javaslatot alaposan...
    4. Véleményem szerint az adott mp3 fájlokat előbb valamilyen módszerrel össze kellene fűzni egyetlen egy Base64 text-be és azt átadni a felvevődnek.
    5. Ha tévedek vagy nem felel meg a javaslat, akkor
    Mutasd a teljes hozzászólást!
  • Ugye ez valójában csak egy demo program
    Ahol az a feladat, hogy az mp3 fájlok folyamatos lejátszása alatt a képernyőn futó képet vegye fel. (Vagyis a ha összefűzöm a mp3-kat , akkor&nbsp; nem nem tudom&nbsp;mellé rakni a képet)
    Az eredeti programban a képen a felolvasott szövegek vannak mindkét nyelven,.
    Az érdekes az , hogy a program végül is működik<br>Elkészül a fájl, csak hibát jelez.
    Igazad van abban, hogy ;Frostech0 programját nem tudtam jól átalakítani. Nekem se tetszik a "megoldás"
    Mutasd a teljes hozzászólást!
  • Akkor csak két kérdés:
    1. "Az eredeti programban a képen a felolvasott szövegek vannak mindkét nyelven" => A tesztedben miért nem ez van???
    2. "Az érdekes az , hogy a program végül is működik" => Miért nem látni ezt a linkeden is???
    (Azaz a kiíírt kifejezés(ek) két nyelven és közben szinkronban a felolvasás videóként)
    .
    ..ezek után részemről OFF...
    Mutasd a teljes hozzászólást!
  • 1. azért nem azt raktam be.mert az nagyon hosszú.
    Ezen kívül még sok funkció van benne.
    2. Nekem a program elkészíti a fájlt. Tehát a kép és hang is egyben.
    Mutasd a teljes hozzászólást!
  • => ON

    Végül ez is válasz a két kérdésre.
    => OFF
    Mutasd a teljes hozzászólást!
  • Sziasztok
    Van egy "végleges" működő verzió.
    Ez a megoldás azonban nagyon lassú.

    Köszönöm a segítséget

    </style> <br> <button id="btn-start-recording">Start Recording</button> <button id="btn-stop-recording" >Stop Recording</button> <hr> <div style="display: none;"> <video controls autoplay playsinline id="preview-video"></video> </div> <div id="element-to-record" style="border: 5px solid gray; border-radius: 5px; padding: 20px; margin: 20px;width: 480px; height: 360px;"> <div id="szam" style=" font-size:20px" >1</div> <input type="text"/> <canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas> <script src="https://www.webrtc-experiment.com/RecordRTC.js"></script> <script src="https://www.webrtc-experiment.com/html2canvas.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script> document.getElementById("szam").innerText = 999; window.AudioContext = window.AudioContext || window.webkitAudioContext; var recordAudio; var sz =0 var recorder; var elementToRecord; var canvas2d; var isRecordingStarted = false; var isStoppedRecording = false; var context2; var finalStream = new MediaStream(); var audio = new Audio(); (function looper() { if (!isRecordingStarted) { return setTimeout(looper, 500); } html2canvas(elementToRecord).then(function(canvas) { context.clearRect(0, 0, canvas2d.width, canvas2d.height); context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height); if (isStoppedRecording) { return; } requestAnimationFrame(looper); }); })(); function getMp3FromUrl(mp3URL, callback) { audio.volume = 1; audio.src = mp3URL; audio.crossOrigin = "anonymous"; audio.onended = function() { document.getElementById("szam").innerText = audio.src; console.log("onend") audio.removeEventListener("canplay",record); sz++; if (sz<MP3.length){ audio.src=MP3[sz]; audio.play(); }else{ document.getElementById('btn-stop-recording').click(); }; }; function record() { context2 = new AudioContext(); var gainNode = context2.createGain(); gainNode.connect(context2.destination); gainNode.gain.value = 1; // don't play for self var source = context2.createMediaElementSource(audio); var destination = context2.createMediaStreamDestination(); source.connect(destination); callback(destination.stream); audio.play(); } audio.addEventListener("canplay",record); audio.onerror = function() { alert('Failed to load: ' + mp3URL); }; } document.getElementById('btn-start-recording').onclick = function() { getMp3FromUrl(MP3[0], function(audioStream) { isRecordingStarted = true; elementToRecord = document.getElementById('element-to-record'); canvas2d = document.getElementById('background-canvas'); context = canvas2d.getContext('2d'); canvas2d.width = elementToRecord.clientWidth; canvas2d.height = elementToRecord.clientHeight; var canvasStream = canvas2d.captureStream(); audioStream.getAudioTracks().forEach(function(track) { finalStream.addTrack(track); }); canvasStream.getVideoTracks().forEach(function(track) { finalStream.addTrack(track); }); recorder = RecordRTC(finalStream, { type: 'video' }); recorder.startRecording(); }); }; document.getElementById('btn-stop-recording').onclick = function() { this.disabled = true; recorder.stopRecording(function() { isRecordingStarted = false; isStoppedRecording = true; var blob = recorder.getBlob(); // document.getElementById('preview-video').srcObject = null; document.getElementById('preview-video').src = URL.createObjectURL(blob); document.getElementById('preview-video').parentNode.style.display = 'block'; }); }; var MP3 = ['download2_160.mp3','download24.mp3','download22.mp3','download24.mp3','download22.mp3'];
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd