JavaScript检测视频的编码格式是否为h264

                         JavaScript检测视频的编码格式是否为h264 

更多前端信息可以关注博客:http://www.colbrus.com

       之前在网上找的都是些浏览器判断是否支持h264格式的代码,后来在git上看到有解决方案,并且有插件可以直接使用,只是插件文件比较大,有7M多,大家在使用的时候注意一下,以下是我用了插件之后提炼出来的代码,希望能看懂,看不懂可以及时评论哦。

git源码:https://github.com/buzz/mediainfo.js/tree/gh-pages

一、引用插件:
引用1.mediainfo.jshttps://github.com/buzz/mediainfo.js/blob/gh-pages/js/mediainfo.js(文件有7M比较大,在打开的时候可能有点卡)
引用2.xml2json.jshttps://github.com/buzz/mediainfo.js/blob/gh-pages/js/xml2json.js

<script src="/js/mediainfo.js"></script>
<script src="/js/xml2json.js"></script>

引用3.mediainfo.js.memhttps://github.com/buzz/mediainfo.js/blob/gh-pages/js/mediainfo.js.mem

 (此文件我也不知道有什么用,不需要在html页面中引用,但是在mediainfo.js中有用到此文件

   mediainfo.js 的最下面可以找到引用mem的路径,可以在这里修改。memoryInitializerPrefixURL

return function(cb) {
  return Module({
    memoryInitializerPrefixURL: '/assets/js/mediainfo/',
    onRuntimeInitialized: cb
  });
};

二、预加载,并判断改变后进行解析文件(部分可以进行修改),下一步 parseFile() 

    var $videoFile = document.querySelector('#videos');
    var CHUNK_SIZE = 5 * 1024 * 1024;
    var miLib, mi;
    var processing = false;
    var x2js = new X2JS();

    //创建mediaInfo ,页面一打开就运行
    miLib = MediaInfo(function() {
       console.debug('MediaInfo ready');

       window['miLib'] = miLib; // debug
       mi = new miLib.MediaInfo();

       $videoFile.addEventListener('change', () => {
          //判断input是否上传是否有变化,有变化则运行
          const videoFile = document.querySelector('#videos').files[0];
          parseFile(videoFile);
       });
    });

三、解析视频文件 (此段代码照抄), 下一步 addResult()

    function parseFile(file) {
        //解析视频文件
        processing = true;
        var fileSize = file.size, offset = 0, state = 0, seekTo = -1, seek = null;
        mi.open_buffer_init(fileSize, offset);
        var processChunk = function(e) {
            var l;
            if (e.target.error === null) {
                var chunk = new Uint8Array(e.target.result);
                l = chunk.length;
                state = mi.open_buffer_continue(chunk, l);

                var seekTo = -1;
                var seekToLow = mi.open_buffer_continue_goto_get_lower();
                var seekToHigh = mi.open_buffer_continue_goto_get_upper();

                if (seekToLow == -1 && seekToHigh == -1) {
                    seekTo = -1;
                } else if (seekToLow < 0) {
                    seekTo = seekToLow + 4294967296 + (seekToHigh * 4294967296);
                } else {
                    seekTo = seekToLow + (seekToHigh * 4294967296);
                }

                if(seekTo === -1){
                    offset += l;
                }else{
                    offset = seekTo;
                    mi.open_buffer_init(fileSize, seekTo);
                }
                chunk = null;
            } else {
                var msg = 'An error happened reading your file!';
                console.err(msg, e.target.error);
                alert(msg);
                return;
            }
            // bit 4 set means finalized
            if (state&0x08) {
                var result = mi.inform();
                mi.close();
                addResult(file.name, result);
                return;
            }
            seek(l);
        };

        seek = function(length) {
            if (processing) {
                var r = new FileReader();
                var blob = file.slice(offset, length + offset);
                r.onload = processChunk;
                r.readAsArrayBuffer(blob);
            }
            else {
                mi.close();
            }
        };
        // start
        seek(CHUNK_SIZE);
    }

四、解析完成后复制到results (判断format的值是否为AVC,h264编码只需判断这个即可)

    function addResult(name, result) {
        //解析完成后复制到results
        var results = [];
        var resultObj = x2js.xml_str2json(result);
        results.unshift(resultObj);
        var video_format;
        video_format=results[0].File.track[1].Format;

        if(video_format == "AVC"){
            console.log(video_format,"文件是h264编码格式");
        }else{
            // alert("请上传h264编码格式的视频文件!");
        }
    }

注: 如果上述有错误的,希望可以积极帮忙指出错误,谢了!

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
好的,以下是一个 HTML 页面,可以采集摄像头视频,并将视频流编码为 H.264 格式: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>摄像头视频采集</title> </head> <body> <video id="camera-feed" autoplay></video> <canvas id="video-canvas" style="display:none;"></canvas> <script type="text/javascript"> // 获取视频流 navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { var video = document.getElementById('camera-feed'); video.srcObject = stream; }) .catch(function(error) { console.log(error); }); // 将视频流编码为 H.264 格式 var canvas = document.getElementById('video-canvas'); var ctx = canvas.getContext('2d'); var encoder = new Whammy.Video(30); function encodeVideoFrame() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); encoder.add(imageData); setTimeout(encodeVideoFrame, 1000 / 30); } setTimeout(encodeVideoFrame, 1000 / 30); setTimeout(function() { encoder.compile(false, function(output) { var blob = new Blob([output], { type: 'video/mp4' }); var url = URL.createObjectURL(blob); window.open(url); }); }, 10000); </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/antimatter15/whammy/whammy.min.js"></script> </body> </html> ``` 这个页面使用了 `Whammy` 库来将视频流编码为 H.264 格式。在页面加载后,它会获取摄像头的视频流,并将其展示在一个 `video` 元素中。同时,它还创建了一个 `canvas` 元素,并使用 `ctx.drawImage()` 方法从视频流中获取图像数据,并将其添加到 `Whammy.Video` 实例中。最后,它使用 `encoder.compile()` 方法将视频编码为 MP4 格式,并在新的窗口中打开它。 需要注意的是,这个页面中使用了 `Whammy` 库,你需要在页面中引入该库才能正常使用。你可以将 `whammy.min.js` 文件下载到本地,或者使用外部链接来引入它。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值