window.URL.createObjectURL bug All In One

window.URL.createObjectURL bug All In One

window.URL.createObjectURL

error ❌

https://html5.xgqfrms.xyz/Canvas/safety-canvas.html

solution ✅

//切换成原生的 Fetch API

Security Web Camera

https://cdn.xgqfrms.xyz/HTML5/Canvas/safety-canvas.html

QRCode Scaner App

https://cdn.xgqfrms.xyz/HTML5/H5-qrcode-scaner/index.html

PWA App

https://learning.xgqfrms.xyz/000projects/pwa-photo/index.html

demos

var video = document.querySelector('video');
var audio = document.querySelector('audio');
var canvas = document.querySelectorAll('canvas')[0];
var canvasForDiff = document.querySelectorAll('canvas')[1];

// video捕获摄像头画面
navigator.webkitGetUserMedia({
  video: true
}, success, error);

function success(stream) {
  video.src = window.URL.createObjectURL(stream);
  video.play();
}

function error(err) {
  alert('video error: ' + err)
}

//canvas
var context = canvas.getContext('2d');
var diffCtx = canvasForDiff.getContext('2d');

//将第二个画布混合模式设为“差异”
diffCtx.globalCompositeOperation = 'difference';

//前一帧
var preFrame;
//当前帧
var curFrame;

//存放差异帧的imageData
var diffFrame;

//捕获并保存帧内容
function captureAndSaveFrame(){
  preFrame = curFrame;
  context.drawImage(video, 0, 0, 640, 480);
  //转为base64并保存
  curFrame = canvas.toDataURL();
}

//绘制base64图像到画布上
function drawImg(src, ctx){
  ctx = ctx || diffCtx;
  var img = new Image();
  img.src = src;
  ctx.drawImage(img, 0, 0, 640, 480);
}

//渲染前后两帧差异
function renderDiff(){
  diffCtx.clearRect(0, 0, 640, 480);
  drawImg(preFrame);
  drawImg(curFrame);
  //捕获差异帧的imageData对象
  diffFrame = diffCtx.getImageData( 0, 0, 640, 480 );
}

//计算差异
function calcDiff(){
  if(!diffFrame) return 0;
  var cache = arguments.callee;
  var count = 0;
  //整个画布都是白色时所有像素的值的总和
  cache.total = cache.total || 0;
  for (var i = 0, l = diffFrame.width * diffFrame.height * 4; i < l; i += 4) {
    count += diffFrame.data[i] + diffFrame.data[i + 1] + diffFrame.data[i + 2];
    //只需在第一次循环里执行
    if(!cache.isLoopEver){
      //单个白色像素值
      cache.total += 255 * 3;
    }
  }
  cache.isLoopEver = true;
  //亮度放大
  count *= 3;
  //返回“差异画布高亮部分像素总值”占“画布全亮情况像素总值”的比例
  return Number(count/cache.total).toFixed(2);
}

//播放音频
function fireAlarm(){
  audio.play();
}


//定时捕获
function timer(delta){
  setTimeout(function(){
    captureAndSaveFrame();
    if(preFrame && curFrame){
      renderDiff();
      if(calcDiff() > 0.2){
        //监控到异常发送 日志
        submit();
        //播放音频告警
        fireAlarm();
      }
    }
    timer(delta)
  }, delta || 500);
}

//设定打开页面十分钟后才开始监控
setTimeout(timer, 60000 * 10);

//异常图片上传处理
function submit(){
  var cache = arguments.callee;
  var now = Date.now();
  // 日志创建最小间隔为5秒
  if(cache.reqTime && (now - cache.reqTime < 5000)) return;
  cache.reqTime = now;
  // ajax 提交form
  $.ajax({
    url : 'http://i.cnblogs.com/EditDiary.aspx?opt=1',
    type : "POST",
    timeout : 5000,
    data : {
      '__VIEWSTATE': '',
      '__VIEWSTATEGENERATOR': '4773056F',
      'Editor$Edit$txbTitle': '告警' + Date.now(),
      'Editor$Edit$EditorBody': '<img src="' + curFrame + '" />',
      'Editor$Edit$lkbPost': '保存'
    },
    success: function(){
      console.log('submit done')
    },
    error: function(err){
      cache.reqTime = 0;
      console.log('error: ' + err)
    }
  });
}

refs

https://www.cnblogs.com/xgqfrms/p/16021791.html#5180639

https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---