js 利用canvas + flv.js實現視頻流 截屏 、本地下載功能實現，兼容火狐，谷歌；canvas截屏跨域問題，無音頻視頻流加載不顯示問題

時間  2019-12-05
標籤 利用 canvas flv.js flv 實現 視頻 截屏 本地 下載 功能 兼容 火狐 谷歌 問題 音頻 加載 顯示 欄目 JavaScript 简体版
原文   原文鏈接

 項目：物聯網監控項目----後臺視頻流管理（前端實現視頻截屏功能）javascript

 

本文就不一樣視頻源分狀況展現:css

1 本地視頻(項目同目錄視頻)截屏（canvas.getContext("2d).drawImage()）html

　　

<!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 ($("#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="*" 便可java

 

<!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" 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 實現 視頻流截屏  jquery

 

 

<!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"  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>

　　

總結：canvas

一、　context.drawImage(image, 0, 0, canvas.width, canvas.height);跨域

　　此處的 context.drawImage 的方法  video  應該爲 image繪製到上下文的元素。容許任何的 canvas 圖像源(CanvasImageSource)，例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。瀏覽器

　　傳送門：CanvasRenderingContext2D.drawImage() 。app

　　note: 所以 視頻流截屏時不能用 video.js ，由於video.js 本質是用的flash ,把video標籤處理了.

 

二、出現跨域 不能用canvas.toDataURL（）

　　解決辦法：一、把視頻資源放入目錄中

　　　　　　　2，或者在 視頻標籤中添加 crossorigin="*"

 

三、 flv.js兼容性不大好，目前只測兼容pc 端火狐，谷歌；移動端不支持。下載的 download 屬性兼容性 也不樂觀，後續找到解決方案再補上。

 四、 視頻流若是無音頻 可在屬性裏添加 hasAudio:false

　　無音頻的話會出現，視頻流加載進來可是沒法播放的問題，控制檯也不報錯

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

 

 

 

---------------------（題外話）下載方法補充：-------------------------

藉助 bolb download下載文件方法 替換上述 downloadFile方法（轉自 by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6252）：

圖片下載方法：

var funDownload = function(domImg, filename) {
// 建立隱藏的可下載連接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 圖片轉base64地址
var canvas = document.createElement('canvas');
var width = domImg.naturalWidth;
var height = domImg.naturalHeight;
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
console.log(`${width}+${height}`);
context.drawImage(domImg, 0, 0,width,height);
// 若是是PNG圖片，則context.toDataURL('image/png')
eleLink.href = canvas.toDataURL('image/png');
// 觸發點擊
document.body.appendChild(eleLink);
eleLink.click();
// 而後移除
document.body.removeChild(eleLink);
};

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

文本類 文件下載：

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);
};

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程