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;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="data: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;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 实现 视频流截屏
<!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>
总结：
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截屏跨域问题，无音频视频流加载不显示问题的更多相关文章
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS图片加载失败显示默认图片
代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- 利用Django REST framework快速实现文件上传下载功能
安装包 pip install Pillow 设置 首先在settings.py中定义MEDIA_ROOT与MEDIA_URL.例如: MEDIA_ROOT = os.path.join(BASE_D ...
- js的跨域问题和解决办法
我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是js在不用域之间的数据传输或者通信,比如你在使用ajax从另外一个域请求数据,或者你的页面引入了iframe,要从iframe中获取 ...
- 初步了解关于js跨域问题
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- 初步了解关于js跨域问题-jsonp
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- js便签笔记（8）——js加载XML字符串或文件
1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...
随机推荐
- CBV源码分析
1 在views中写一个类,继承View,里面写get方法,post方法 2 在路由中配置: url(r'^test/', views.Test.as_view()),实际上第二个参数位置,放的还是一 ...
- python的排序方式
""" 冒泡排序: 冒泡排序的思想: 每次比较两个相邻的元素, 如果他们的顺序错误就把他们交换位置 比如有五个数: 12, 35, 99, 18, 76, 从大到小排序, ...
- POJ2960 S-Nim 【博弈论】
Description Arthur and his sister Caroll have been playing a game called Nim for some time now. Nim ...
- 20165223《网络对抗技术》Exp1 PC平台逆向破解
目录--PC平台逆向破解 1 逆向及BOF基础实践说明 1.1 实践内容 1.2 实践要求 1.3 基础知识 2 实验步骤 2.1 直接修改程序机器指令,改变程序执行流程 2.2 通过构造输入参数,造 ...
- Atcoder刷题小记
1. 2019.4.27 agc016d 一道很坑的题. 首先判无解,求出异或值后排个序就可以. 然后直接让\(a_i\rightarrow b_i\)并查集维护,注意离散化和判重,答案加上联通块个数 ...
- 实验二 Java面向对象程序设计 20175301李锦然实验报告
实验二 Java面向对象程序设计 实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计 ...
- 隧道6in4 和隧道6to4（GNS3)
隧道6in4实验配置 拓扑图 Device Interface IP Address(IPv6) R1 F 0/0 10.1.81.1 F 0/1 2001:db8:cafe:81::10 R2 F ...
- shell拼写检查，利用Linux字典
rename #find path -type f -name "*.mp3" -exec mv { } target_dir \; #mp3 file mv dir_file ...
- Python实现身份证号码有效性验证
# -*- coding: utf-8 -*- import re #Errors=['验证通过!','身份证号码位数不对!','身份证号码出生日期超出范围或含有非法字符!','身份证号码校验错误!' ...
- chrome浏览器开发常用快捷键之基础篇-遁地龙卷风
1.标签页和窗口快捷键 打开新的标签页,并跳转到该标签页 Ctrl + t 重新打开最后关闭的标签页,并跳转到该标签页 Ctrl + Shift + t 跳转到下一个打开的标签页 Ctrl + PgD ...