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

本文介绍了在物联网监控项目中，如何利用JavaScript和canvas进行视频截屏，包括本地视频、跨域视频以及flv.js视频流的截屏方法，并讨论了解决canvas跨域问题和无音频视频流加载问题的策略。同时提供了借助blob下载视频文件的方法。

摘要由CSDN通过智能技术生成

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

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

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;width: 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{width: 720px;height: 450px;margin:15px 0;position:relative;}
        #image_el,#V2I_canvas{position:absolute;width: 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 ($(