webm-duration-fix
webm-duration-fix copied to clipboard
buynao
How do I make it work in Browserify?
Hi. I am a new JS programmer. I am interested to apply this at client side. I have tried this but cannot manage to get this to work. In my head, after Browserify, I should be able to use this at client side for MediaRecorder but I keep getting error Uncaught (in promise) TypeError: windows.webmfix.fixWebmDuration is not a function.
I have downloaded this repository to my local PC.
In my sourcecode/js/webm-duration-fix/node_modules/webm-duration-fix; I run:
browserify lib/index.js -s webmfix -o dist/webm_duration_fix.js
and take this webm_duration_fix.js and place into my webfolder, web-root/js/ my index.html is in web-root.
In my index.html:
...
<body>
<script type="module" src="./js/webm_duration_fix.js" ></script>
<script type="module">
import OtherModules from "./js/myothermodules.mjs";
console.log( window ); // I can see this on the console the function exists: window.webmfix.fixWebmDuration
console.log( window.webmfix ); // same as above.
function startRecording() {
let mediaRecorder = "";
let videoBuffer = "";
let myBlob = void 0;
// Create MediaRecorder here
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
}
function stopRecording() {
mediaRecorder.stop();
};
async function handleDataAvailable(event) {
console.log(event.data, "event");
if (event.data && event.data.size > 0) {
myBlob = new Blob([event.data], {
type: "video/webm",
});
videoBuffer = await window.avs.fixWebmDuration( myBlob ); // keep getting error here
//videoBuffer = myBlob; // if above line is commented out and use this; then there is a download here but no webmfix
let url = window.URL.createObjectURL(videoBuffer);
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
// download
link.setAttribute('download', 'test.webm')
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
myBlob = void 0;
}
};
...
</script>
</body>
Have I misunderstood something and how do I make this Browserify work? This window.avs.fixWebmDuration is definitely loaded in the HTML.
Thank you! :-)
