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

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

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

　　

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title></title>
  7.     <link rel="stylesheet" href="">
  8.     <style type="text/css">
  9.         .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;}
  10.         .btn-wrap{margin:15px 0;}
  11.         .img_show_wrap{width: 720px;height: 450px;margin:15px 0;position:relative;}
  12.         #image_el,#V2I_canvas{position:absolute;width: 720px;height: 450px;top:0;left:0;}
  13.     </style>
  14. </head>
  15. <body>
  16.         <div class="btn-wrap">
  17.             <a id="screen_shot_btn"  class="screen_shot_btn" href="javascript:">截图</a>
  18.             <a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a>
  19.         </div>
  20.         <div class="video_wrap">
  21.             <video id="video_el" autoplay width="720" height="450"><source src="data:images/sp.mp4" /></video>
  22.         </div>
  23.  
  24.         <div class="img_show_wrap">
  25.             <canvas width="720" height="450" id="V2I_canvas" ></canvas>
  26.             <img id="image_el" src="" alt="">
  27.         </div>
  28.         <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
  29.         <script type="text/javascript" src="js/flv.js"></script>
  30.         <script type="text/javascript">
  31.             $(function() {
  32.                 var mySrc = "";
  33.  
  34.                 function htmlToImage() {
  35.                     var canvas = document.getElementById("V2I_canvas");
  36.                     if (!canvas.getContext) {
  37.                         alert("您的浏览器暂不支持canvas");
  38.                         return false;
  39.                     } else {
  40.                         var context = canvas.getContext("2d");
  41.                         var video = document.getElementById("video_el");
  42.                         context.drawImage(video, 0, 0, canvas.width, canvas.height);
  43.                         return mySrc = canvas.toDataURL("image/png");
  44.                     }
  45.                 }
  46.                 $("#screen_shot_btn").click(function(event) {
  47.                     htmlToImage();
  48.                     $("#image_el").attr("src", mySrc);
  49.                 });
  50.  
  51.                 $("#screen_save_btn").click(function() {
  52.                     htmlToImage();
  53.                     if ($("#image_el").attr("src") != "") {
  54.                         downloadFile(mySrc);
  55.                     } else {
  56.                         alert("内容为空");
  57.                     }
  58.                 })
  59.  
  60.                 function downloadFile(src) {
  61.                     var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");
  62.  
  63.                 }
  64.             })
  65.         </script>
  66. </body>
  67. </html>

　　

　　2跨域视频截屏

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title></title>
  7.     <link rel="stylesheet" href="">
  8.     <style type="text/css">
  9.         .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;}
  10.         .btn-wrap{margin:15px 0;}
  11.         .img_show_wrap{width: 720px;height: 450px;margin:15px 0;position:relative;}
  12.         #image_el,#V2I_canvas{position:absolute;width: 720px;height: 450px;top:0;left:0;}
  13.     </style>
  14. </head>
  15. <body>
  16.         <div class="btn-wrap">
  17.             <a id="screen_shot_btn"  class="screen_shot_btn" href="javascript:">截图</a>
  18.             <a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a>
  19.         </div>
  20.         <div class="video_wrap">
  21.             <video id="video_el" crossorigin="*"  autoplay width="720" height="450"><source src="http://jq22com.qiniudn.com/jq22-sp.mp4" /></video>
  22.         </div>
  23.  
  24.         <div class="img_show_wrap">
  25.             <canvas width="720" height="450" id="V2I_canvas" ></canvas>
  26.             <img id="image_el" src="" alt="">
  27.         </div>
  28.         <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
  29.         <script type="text/javascript" src="js/flv.js"></script>
  30.         <script type="text/javascript">
  31.             $(function() {
  32.                 var mySrc = "";
  33.  
  34.                 function htmlToImage() {
  35.                     var canvas = document.getElementById("V2I_canvas");
  36.                     if (!canvas.getContext) {
  37.                         alert("您的浏览器暂不支持canvas");
  38.                         return false;
  39.                     } else {
  40.                         var context = canvas.getContext("2d");
  41.                         var video = document.getElementById("video_el");
  42.                         context.drawImage(video, 0, 0, canvas.width, canvas.height);
  43.                         return mySrc = canvas.toDataURL("image/png");
  44.                     }
  45.                 }
  46.                 $("#screen_shot_btn").click(function(event) {
  47.                     htmlToImage();
  48.                     $("#image_el").attr("src", mySrc);
  49.                 });
  50.  
  51.                 $("#screen_save_btn").click(function() {
  52.                     htmlToImage();
  53.                     if ($("#image_el").attr("src") != "") {
  54.                         downloadFile(mySrc);
  55.                     } else {
  56.                         alert("内容为空");
  57.                     }
  58.                 })
  59.  
  60.                 function downloadFile(src) {
  61.                     var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");
  62.  
  63.                 }
  64.             })
  65.         </script>
  66. </body>
  67. </html>

　　

3 flv.js 实现 视频流截屏

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title></title>
  7.     <link rel="stylesheet" href="">
  8.     <style type="text/css">
  9.         .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;}
  10.         .btn-wrap{margin:15px 0;}
  11.         .img_show_wrap{width: 720px;height: 450px;margin:15px 0;position:relative;}
  12.         #image_el,#V2I_canvas{position:absolute;width: 720px;height: 450px;top:0;left:0;}
  13.     </style>
  14. </head>
  15. <body>
  16.         <div class="btn-wrap">
  17.             <a id="screen_shot_btn"  class="screen_shot_btn" href="javascript:">截图</a>
  18.             <a id="screen_save_btn" class="screen_save_btn" href="javascript:">下载</a>
  19.         </div>
  20.         <div class="video_wrap">
  21.             <video id="video_el"  crossorigin="*" width="720" height="450"></video>
  22.         </div>
  23.  
  24.         <div class="img_show_wrap">
  25.             <canvas width="720" height="450" id="V2I_canvas" ></canvas>
  26.             <img id="image_el" src="" alt="">
  27.         </div>
  28.         <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
  29.         <script type="text/javascript" src="js/flv.js"></script>
  30.         <script type="text/javascript">
  31.             $(function() {
  32.  
  33.                 if (flvjs.isSupported()) {
  34.                     var videoElement = document.getElementById('video_el');
  35.                     var flvPlayer = flvjs.createPlayer({
  36.                         type: 'flv',
  37.                         url: 'http://192.168.30.218:8100/movie1'
  38.                     });
  39.                     flvPlayer.attachMediaElement(video_el);
  40.                     flvPlayer.load();
  41.                     flvPlayer.play();
  42.                 }
  43.                 var mySrc = "";
  44.  
  45.                 function htmlToImage() {
  46.                     var canvas = document.getElementById("V2I_canvas");
  47.                     if (!canvas.getContext) {
  48.                         alert("您的浏览器暂不支持canvas");
  49.                         return false;
  50.                     } else {
  51.                         var context = canvas.getContext("2d");
  52.                         var video = document.getElementById("video_el");
  53.                         context.drawImage(video, 0, 0, canvas.width, canvas.height);
  54.                         return mySrc = canvas.toDataURL("image/png");
  55.                     }
  56.                 }
  57.                 $("#screen_shot_btn").click(function(event) {
  58.                     htmlToImage();
  59.                     $("#image_el").attr("src", mySrc);
  60.                 });
  61.  
  62.                 $("#screen_save_btn").click(function() {
  63.                     htmlToImage();
  64.                     if ($("#image_el").attr("src") != "") {
  65.                         downloadFile(mySrc);
  66.                     } else {
  67.                         alert("内容为空");
  68.                     }
  69.                 })
  70.  
  71.                 function downloadFile(src) {
  72.                     var triggerDownload = $("#screen_save_btn").attr("href", src).attr("download", "jietu.png");
  73.  
  74.                 }
  75.             })
  76.         </script>
  77. </body>
  78. </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 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);
};

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

　

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

  1. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS图片加载失败显示默认图片

    代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...

  4. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

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

    安装包 pip install Pillow 设置 首先在settings.py中定义MEDIA_ROOT与MEDIA_URL.例如: MEDIA_ROOT = os.path.join(BASE_D ...

  6. js的跨域问题和解决办法

    我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...

  7. 初步了解关于js跨域问题

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  8. 初步了解关于js跨域问题-jsonp

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  9. js便签笔记（8）——js加载XML字符串或文件

    1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...

随机推荐

  1. windows无法完成安装，若要在此计算机上安装，请重新启动安装

    当出现如上提示的时候,不要重启,按下shift+f10 会打开命令窗口,先输入cd oobe 进入到C:\windows\system32\oobe文件夹,输入msoobe回车然后输入msoobe即可 ...

  2. The Preliminary Contest for ICPC China Nanchang National Invitational I. Max answer (单调栈+线段树)

    题目链接:https://nanti.jisuanke.com/t/38228 题目大意:一个区间的值等于该区间的和乘以区间的最小值.给出一个含有n个数的序列(序列的值有正有负),找到该序列的区间最大 ...

  3. java 11 实现RFC7539中指定的ChaCha20和Poly1305两种加密算法, 代替RC4

    实现 RFC 7539的ChaCha20 and ChaCha20-Poly1305加密算法 RFC7748定义的秘钥协商方案更高效, 更安全. JDK增加两个新的接口 XECPublicKey 和 ...

  4. termux

    使用http服务,链接原服务器要挂vpn. apt edit-sources 如果提示 $ apt edit-sources e: Sub-process editor returned a n er ...

  5. （十四）QFile操作，QByteArray，文件流操作,QTextStream，QDataStream，QFileInfo, QIODevice

    QFile f 1.readall #include "widget.h" #include "ui_widget.h" #include <QFileD ...

  6. SaltStack 介绍和安装

    SaltStack 介绍和安装 SaltStack 介绍 SaltStack是一种利用Python语言开发的,用于批量管理主机的一套工具,主要实现三种功能: 远程执行:通过saltstack工具,可以 ...

  7. (二叉树 BFS) leetcode993. Cousins in Binary Tree

    In a binary tree, the root node is at depth 0, and children of each depth knode are at depth k+1. Tw ...

  8. python timeit模块用法

    想测试一行代码的运行时间,在python中比较方便,可以直接使用timeit: >>> import timeit #执行命令 >>> t2 = timeit.Ti ...

  9. python基础学习小结

    Python是一门面向对象的解释性语言(脚本语言),这一类语言的特点就是不用编译,程序在运行的过程中,由对应的解释器向CPU进行翻译,个人理解就是一边编译一边执行.而JAVA这一类语言是需要预先编译的 ...

  10. mp的猜猜看

    ~~~~|yjb1072452141---dc9339b4c33103abc4919375203e7a24|A1482583628---0142e0b6090b9b2838328445a79cd1b8 ...