js 利用canvas + flv.js实现 视频流 截屏 、本地下载功能实现，兼容火狐，谷歌， 截屏跨域的坑

1 本地视频截屏（canvsa）

　　

<!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="" >
        </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;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="" >
        </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;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="" >
        </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 属性兼容性 也不乐观，后续找到解决方案再补上。

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

时间： 2024-10-10 07:40:18

js 利用canvas + flv.js实现 视频流 截屏 、本地下载功能实现，兼容火狐，谷歌， 截屏跨域的坑的相关文章

前端JS利用canvas的drawImage()对图片进行压缩

对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 2.最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇

js 利用canvas绘制直线、曲线

<body> <!--画板--> // 当浏览器不支持的时候才会出现文字 <canvas id="canvas" style="background-color: black;">您当前的版本不支持 </canvas> <script type="text/javascript"> // 拿到画板 var canvas = document.getElementById('canvas'

js 利用canvas 生成文字图片

// text,需要生成的文字 // font,字体样式 drawLogo: function(text, font) { // 创建画布 let canvas = document.createElement('canvas'); // 绘制文字环境 let context = canvas.getContext('2d'); // 设置字体 context.font = font; // 获取字体宽度 let width = context.measureText(text).width;

js 利用jquery.gridly.js实现拖拽并且排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='javascripts/jquery.js' type='text/javascript'></script> <script src='javascripts/jqu

js 导出到excel 最新兼容火狐谷歌ie11

function isIE() { //ie?            if (!!window.ActiveXObject || "ActiveXObject" in window)                return true;            else                return false;        }        function getXlsFromTbl(inTblId, inWindow) {            try {    

利用Django REST framework快速实现文件上传下载功能

安装包 pip install Pillow 设置 首先在settings.py中定义MEDIA_ROOT与MEDIA_URL.例如: MEDIA_ROOT = os.path.join(BASE_DIR, "files") MEDIA_URL = "/files/" files可以是项目根目录的任何一个文件夹 在urls.py的urlpatterns中,设置访问文件的url from django.views.generic import TemplateView

js跨域方法

JavaScript跨域总结与解决办法 什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用HTML5 postMessage 6.利用flash 本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充. 什么是跨域 JavaScript出于安全方面的考虑,不

详解JS跨域问题

什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a

Vue.js&mdash;&mdash;基于$.ajax实现数据的跨域增删查改

概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说起ajax请求,大家第一时间会想到jQuery.除了拥有强大的DOM处理能力,jQuery提供了较丰富的ajax处理方法,它不仅支持基于XMLHttpRequest的ajax请求,也能处理跨域的JSONP请求. 之前有读者问我,Vue.js能结合其他库一起用吗?答案当然是肯定的,V