webm-to-mp4.html | searchcode

/ffmpeg/webm-to-mp4.html

https://github.com/azorac/WebRTC-Experiment · HTML · 286 lines · 230 code · 49 blank · 7 comment · 0 complexity · af372b8c7d652ba765630899d873eb91 MD5 · raw file

<!--
> Muaz Khan     - www.MuazKhan.com
> MIT License   - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/WebRTC-Experiment/tree/master/ffmpeg
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>RecordRTC WebM to mp4 using ffmpeg-asm.js ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css">
        
        <style>
            video {
                vertical-align: bottom;
                width: 300px;
            }

            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

            p, .inner { padding: 1em; }

            li {
                border-bottom: 1px solid rgb(189, 189, 189);
                border-left: 1px solid rgb(189, 189, 189);
                padding: .5em;
            }

            label {
                display: inline-block;
                width: 8em;
            }
        </style>
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
        
        <!-- script used for audio/video/gif recording -->
        <script src="//www.webrtc-experiment.com/RecordRTC.js"> </script>
    </head>

    <body>
        <article>
            <header style="text-align: center;">
                <h1>
                    <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> WebM to mp4 using <a href="http://bgrins.github.io/videoconverter.js/">ffmpeg-asm.js</a>!
                </h1>            
                <p>
                    <a href="https://www.webrtc-experiment.com/">HOME</a>
                    <span> &copy; </span>
                    <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
                    
                    .
                    <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
                    
                    .
                    <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>
                    
                    .
                    <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
                </p>
            </header>

            <div class="github-stargazers"></div>
            
            <section class="experiment">  
                <h2 class="header">Logs</h2>
                <ol id="logs-preview">
                    <li>
                        <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a> experiment converting WebM to mp4 inside the browser!
                    </li>
                </ol>
            </section>
            
            <section class="experiment">  
                <h2 class="header">Record Video and convert into "mp4" using <a href="https://googledrive.com/host/0B6GWd_dUUTT8OEtLRGdQb2pibDg/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a>!</h2>
			
                <div class="inner">
                    <video id="video-preview" controls></video>
                    <button id="record-video">Record</button>
                    <button id="stop-recording-video" disabled>Stop</button>
                </div>
            </section>
            <script>
                var recordVideo;
                var videoPreview = document.getElementById('video-preview');
                var inner = document.querySelector('.inner');
                var videoFile = !!navigator.mozGetUserMedia ? 'video.gif' : 'video.webm';

                document.querySelector('#record-video').onclick = function() {
                    this.disabled = true;
                    navigator.getUserMedia({
                            video: true
                        }, function(stream) {
                            videoPreview.src = window.URL.createObjectURL(stream);
                            videoPreview.play();

                            recordVideo = RecordRTC(stream, {
                                type: 'video'
                            });

                            recordVideo.startRecording();
                        }, function(error) { throw error;});
                    document.querySelector('#stop-recording-video').disabled = false;
                };

                document.querySelector('#stop-recording-video').onclick = function() {
                    this.disabled = true;

                    recordVideo.stopRecording(function(url) {
                        videoPreview.src = url;
                        videoPreview.download = videoFile;
                        
                        log('<a href="https://googledrive.com/host/0B6GWd_dUUTT8OEtLRGdQb2pibDg/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file download started. It is about 18MB in size; please be patient!');
                        convertStreams(recordVideo.getBlob());
                    });
                };

                // var workerPath = location.href.replace(location.href.split('/').pop(), '') + 'ffmpeg_asm.js';
                var workerPath = 'https://googledrive.com/host/0B6GWd_dUUTT8OEtLRGdQb2pibDg/ffmpeg_asm.js';

                function processInWebWorker() {
                    var blob = URL.createObjectURL(new Blob(['importScripts("' + workerPath + '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});'], {
                        type: 'application/javascript'
                    }));

                    var worker = new Worker(blob);
                    URL.revokeObjectURL(blob);
                    return worker;
                }

                var worker;

                function convertStreams(videoBlob) {
                    var aab;
                    var buffersReady;
                    var workerReady;
                    var posted;

                    var fileReader = new FileReader();
                    fileReader.onload = function() {
                        aab = this.result;
                        postMessage();
                    };
                    fileReader.readAsArrayBuffer(videoBlob);

                    if (!worker) {
                        worker = processInWebWorker();
                    }

                    worker.onmessage = function(event) {
                        var message = event.data;
                        if (message.type == "ready") {
                            log('<a href="https://googledrive.com/host/0B6GWd_dUUTT8OEtLRGdQb2pibDg/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file has been loaded.');

                            workerReady = true;
                            if (buffersReady)
                                postMessage();
                        } else if (message.type == "stdout") {
                            log(message.data);
                        } else if (message.type == "start") {
                            log('<a href="https://googledrive.com/host/0B6GWd_dUUTT8OEtLRGdQb2pibDg/ffmpeg_asm.js" download="ffmpeg-asm.js">ffmpeg-asm.js</a> file received ffmpeg command.');
                        } else if (message.type == "done") {
                            log(JSON.stringify(message));

                            var result = message.data[0];
                            log(JSON.stringify(result));

                            var blob = new Blob([result.data], {
                                type: 'video/mp4'
                            });

                            log(JSON.stringify(blob));

                            PostBlob(blob);
                        }
                    };
                    var postMessage = function() {
                        posted = true;

                        worker.postMessage({
                            type: 'command',
                            arguments: ['-i', videoFile, '-c:v', 'mpeg4', '-b:v', '64k', '-strict', 'experimental', 'output.mp4'],
                            files: [
                                {
                                    data: new Uint8Array(aab),
                                    name: videoFile
                                }
                            ]
                        });
                    };
                }

                function PostBlob(blob) {
                    inner.appendChild(document.createElement('hr'));
                    var h2 = document.createElement('h2');
                    h2.innerHTML = '<a href="' + URL.createObjectURL(blob) + '" target="_blank" download="Converted Video.mp4">Download Converted mp4 and play in VLC player!</a>';
                    inner.appendChild(h2);

                    h2.tabIndex = 0;
                    h2.focus();

                    document.querySelector('#record-video').disabled = false;
                }

                var logsPreview = document.getElementById('logs-preview');

                function log(message) {
                    var li = document.createElement('li');
                    li.innerHTML = message;
                    logsPreview.appendChild(li);

                    li.tabIndex = 0;
                    li.focus();
                }
            </script>
        
            <section class="experiment">
                <h2 class="header" id="feedback">Feedback</h2>
                <div>
                    <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                </div>
                <button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
            </section>
			
			
            <section class="experiment">
                <h2 class="header">Using ffmpeg-asm.js...</h2>
                <ol>
                    <li>
                        WebM can be converted in mp4.
                    </li>
                    <li>
                        WAV can be converted in ogg or mp3.
                    </li>
                    <li>
                        WAV can be merged in mp4.
                    </li>
                </ol>
                <p style="margin-top: 0;">
                    If WAV or WebM is 5MB in size; ogg, mp3 or mp4 will be 700kb!
                </p>
            </section>
            
            <section class="experiment">
                <p style="margin-top: 0;">
                    RecordRTC is MIT licensed on Github! <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" target="_blank">Documentation</a>
                </p>
            </section>
			
            <section class="experiment own-widgets latest-commits">
                <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
                <div id="github-commits"></div>
            </section>  
        </article>
        
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ffmpeg" class="fork-right"></a>
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" class="fork-left"></a>
        
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
                © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
                <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            </p>
        </footer>
    
        <!-- commits.js is useless for you! -->
        <script src="https://www.webrtc-experiment.com/commits.js" async> </script>
    </body>
</html>
Alerts (12)

'<style>' Inline CSS detected; use external stylesheets for maintainability and performance
18
'<script>' Inline JavaScript detected; move to external files with CSP for security and maintainability
45 99
'style=' Inline CSS detected; use external stylesheets for maintainability and performance
56 236 238 255 261 267
'http://' Insecure HTTP link detected; use HTTPS for encrypted connections
58 63 66