浏览器抓取网页(如何通过js调用本地*敏*感*词*呢？获取后如何对视频进行截图)
优采云 发布时间: 2022-03-25 14:24浏览器抓取网页(如何通过js调用本地*敏*感*词*呢？获取后如何对视频进行截图)
如何通过js调用本地*敏*感*词*？获取视频后如何截图？下面我就和大家做一个简单的Demo来实现以上功能。
涉及的知识点实现的功能点的html简单布局
下面先用HTML实现一个简单的布局，包括样式和按钮。
H5 canvas 调用*敏*感*词*进行绘制
html,body{
width:100%;
height:100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#canvas{
width:500px;
height:300px;
}
#video{
width:500px;
height:300px;
}
.btn{
display:inline-block;
text-align: center;
background-color: #333;
color:#eee;
font-size:14px;
padding:5px 15px;
border-radius: 5px;
cursor:pointer;
}
您的浏览器不支持H5 ,请更换或升级!
截图
暂停
打开
看起来像这样：
hahiahia 是空白的
我们隐藏视频，然后添加几个按钮，以及底部的画布和图片显示区域（用于存储截图）。
js实现函数
先把核心代码贴在这里：
navigator.getUserMedia({
video : {width:500,height:300}
},function(stream){
LV.video.srcObject = stream;
LV.video.onloadedmetadata = function(e) {
LV.video.play();
};
},function(err){
alert(err);//弹窗报错
})
相关知识点可以参考
：
然后根据页面逻辑实现事件等功能，包括：截图、暂停。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var events = {
open : function(){
LV.open();
},
close : function(){
console.log(LV.timer);
clearInterval(LV.timer);
},
screenshot : function(){
//获得当前帧的图像并拿到数据
var image = canvas.toDataURL('jpeg');
document.getElementById('show').innerHTML = '<img style="width:500px;height:300px;" />'
}
};
var LV = {
video : document.getElementById('video'),
canvas : document.getElementById('canvas'),
timer : null,
media : null,
open :function(){
if(!LV.timer){
navigator.getUserMedia({
video : {width:500,height:300}
},function(stream){
LV.video.srcObject = stream;
LV.video.onloadedmetadata = function(e) {
LV.video.play();
};
},function(err){
alert(err);//弹窗报错
})
}
if(LV.timer){
clearInterval(LV.timer);
}
//将画面绘制到canvas中
LV.timer = setInterval(function(){
LV.ctx.drawImage(LV.video,0,0,500,300);
},15);
},
init : function(){
LV.ctx = LV.canvas.getContext('2d');
//绑定事件
document.querySelectorAll('[filter]').forEach(function(item){
item.onclick = function(ev){
var type = this.getAttribute('filter');
events[type].call(this,ev);
}
});
return LV;
}
};
LV.init();
原谅我的波西米亚命名...
