zoukankan html css js c++ java

js 利用canvas + flv.js实现视频流截屏、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

项目：物联网监控项目----后台视频流管理（前端实现视频截屏功能）

本文就不同视频源分情况展示:

1 本地视频(项目同目录视频)截屏（canvas.getContext("2d).drawImage()）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        .screen_shot_btn,.screen_save_btn{display: inline-block; 72px;height: 36px;text-align: center;line-height: 36px;text-decoration: none;background: #4473C2;border: none;border-radius: 8px;margin:0 5px;color:#fff;outline: none;}
        .btn-wrap{margin:15px 0;}
        .img_show_wrap{ 720px;height: 450px;margin:15px 0;position:relative;}
        #image_el,#V2I_canvas{position:absolute; 720px;height: 450px;top:0;left:0;}
    </style>
</head>
<body>
        <div class="btn-wrap">
            <a id="screen_shot_btn"  class="screen_shot_btn" href="javascript:">截图</a>
            <a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a>
        </div>
        <div class="video_wrap">
            <video id="video_el" autoplay width="720" height="450"><source src="images/sp.mp4" /></video>
        </div>

        <div class="img_show_wrap">
            <canvas width="720" height="450" id="V2I_canvas" ></canvas>
            <img id="image_el" src="" alt="">
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/flv.js"></script>
        <script type="text/javascript">
            $(function() {
                var mySrc = "";

                function htmlToImage() {
                    var canvas = document.getElementById("V2I_canvas");
                    if (!canvas.getContext) {
                        alert("您的浏览器暂不支持canvas");
                        return false;
                    } else {
                        var context = canvas.getContext("2d");
                        var video = document.getElementById("video_el");
                        context.drawImage(video, 0, 0, canvas.width, canvas.height);
                        return mySrc = canvas.toDataURL("image/png");
                    }
                }
                $("#screen_shot_btn").click(function(event) {
                    htmlToImage();
                    $("#image_el").attr("src", mySrc);
                });

                $("#screen_save_btn").click(function() {
                    htmlToImage();
                    if ($("#image_el").attr("src") != "") {
                        downloadFile(mySrc);
                    } else {
                        alert("内容为空");
                    }
                })

                function downloadFile(src) {
                    var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");

                }
            })
        </script>
</body>
</html>

　　2跨域视频截屏

　　note: 在video 标签内添加 crossorigin="*" 即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        .screen_shot_btn,.screen_save_btn{display: inline-block; 72px;height: 36px;text-align: center;line-height: 36px;text-decoration: none;background: #4473C2;border: none;border-radius: 8px;margin:0 5px;color:#fff;outline: none;}
        .btn-wrap{margin:15px 0;}
        .img_show_wrap{ 720px;height: 450px;margin:15px 0;position:relative;}
        #image_el,#V2I_canvas{position:absolute; 720px;height: 450px;top:0;left:0;}
    </style>
</head>
<body>
        <div class="btn-wrap">
            <a id="screen_shot_btn"  class="screen_shot_btn" href="javascript:">截图</a>
            <a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a>
        </div>
        <div class="video_wrap">
            <video id="video_el" crossorigin="*"  autoplay width="720" height="450"><source src="http://jq22com.qiniudn.com/jq22-sp.mp4" /></video>
        </div>

        <div class="img_show_wrap">
            <canvas width="720" height="450" id="V2I_canvas" ></canvas>
            <img id="image_el" src="" alt="">
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/flv.js"></script>
        <script type="text/javascript">
            $(function() {
                var mySrc = "";

                function htmlToImage() {
                    var canvas = document.getElementById("V2I_canvas");
                    if (!canvas.getContext) {
                        alert("您的浏览器暂不支持canvas");
                        return false;
                    } else {
                        var context = canvas.getContext("2d");
                        var video = document.getElementById("video_el");
                        context.drawImage(video, 0, 0, canvas.width, canvas.height);
                        return mySrc = canvas.toDataURL("image/png");
                    }
                }
                $("#screen_shot_btn").click(function(event) {
                    htmlToImage();
                    $("#image_el").attr("src", mySrc);
                });

                $("#screen_save_btn").click(function() {
                    htmlToImage();
                    if ($("#image_el").attr("src") != "") {
                        downloadFile(mySrc);
                    } else {
                        alert("内容为空");
                    }
                })

                function downloadFile(src) {
                    var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");

                }
            })
        </script>
</body>
</html>

3 flv.js 实现视频流截屏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        .screen_shot_btn,.screen_save_btn{display: inline-block; 72px;height: 36px;text-align: center;line-height: 36px;text-decoration: none;background: #4473C2;border: none;border-radius: 8px;margin:0 5px;color:#fff;outline: none;}
        .btn-wrap{margin:15px 0;}
        .img_show_wrap{ 720px;height: 450px;margin:15px 0;position:relative;}
        #image_el,#V2I_canvas{position:absolute; 720px;height: 450px;top:0;left:0;}
    </style>
</head>
<body>
        <div class="btn-wrap">
            <a id="screen_shot_btn"  class="screen_shot_btn" href="javascript:">截图</a>
            <a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a>
        </div>
        <div class="video_wrap">
            <video id="video_el"  crossorigin="*" width="720" height="450"></video>
        </div>

        <div class="img_show_wrap">
            <canvas width="720" height="450" id="V2I_canvas" ></canvas>
            <img id="image_el" src="" alt="">
        </div>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/flv.js"></script>
        <script type="text/javascript">
            $(function() {

                if (flvjs.isSupported()) {
                    var videoElement = document.getElementById('video_el');
                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: 'http://192.168.30.218:8100/movie1'
                    });
                    flvPlayer.attachMediaElement(video_el);
                    flvPlayer.load();
                    flvPlayer.play();
                }
                var mySrc = "";

                function htmlToImage() {
                    var canvas = document.getElementById("V2I_canvas");
                    if (!canvas.getContext) {
                        alert("您的浏览器暂不支持canvas");
                        return false;
                    } else {
                        var context = canvas.getContext("2d");
                        var video = document.getElementById("video_el");
                        context.drawImage(video, 0, 0, canvas.width, canvas.height);
                        return mySrc = canvas.toDataURL("image/png");
                    }
                }
                $("#screen_shot_btn").click(function(event) {
                    htmlToImage();
                    $("#image_el").attr("src", mySrc);
                });

                $("#screen_save_btn").click(function() {
                    htmlToImage();
                    if ($("#image_el").attr("src") != "") {
                        downloadFile(mySrc);
                    } else {
                        alert("内容为空");
                    }
                })

                function downloadFile(src) {
                    var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");

                }
            })
        </script>
</body>
</html>

总结：

1、　context.drawImage(image, 0, 0, canvas.width, canvas.height);

　　此处的 context.drawImage 的方法 video 应该为 image绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource)，例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。

　　传送门：CanvasRenderingContext2D.drawImage() 。

　　note: 因此视频流截屏时不能用 video.js ，因为video.js 本质是用的flash ,把video标签处理了.

2、出现跨域不能用canvas.toDataURL（）

　　解决办法：1、把视频资源放入目录中

　　　　　　　2，或者在视频标签中添加 crossorigin="*"

3、 flv.js兼容性不大好，目前只测兼容pc 端火狐，谷歌；移动端不支持。下载的 download 属性兼容性也不乐观，后续找到解决方案再补上。

4、视频流如果无音频可在属性里添加 hasAudio:false

　　无音频的话会出现，视频流加载进来但是无法播放的问题，控制台也不报错

-------------------------完-------------------------

---------------------（题外话）下载方法补充：-------------------------

借助 bolb download下载文件方法替换上述 downloadFile方法（转自 by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6252）：

图片下载方法：

-----------------------------------------------------------

文本类文件下载：

var fileDownload = function (content, filename) {
// 创建隐藏的可下载链接
var elLink = document.createElement('a');
elLink.download = filename;
elLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
elLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(elLink);
elLink.click();
// 然后移除
document.body.removeChild(elLink);
};

----------------------------------------

查看全文

相关阅读:
Javascript自动打开匹配的超链接
 Javascript 广告浮动效果在浏览器中间N秒后移动到右下角
 吾爱破解论坛有漏洞！！所有资源都曝光了...开心吧
 C# Ajax 技术
 花花公子写代码
 C++ Strings(字符串)
C++语言的I/o使用方法详解
 标准c内存函数的使用方法
 [原]Python 简单文件处理
 [原]Python 简单异常处理

原文地址：https://www.cnblogs.com/xiaomaotao/p/9225589.html

js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

js 利用canvas + flv.js实现视频流截屏、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题