Geek Answers Handbook

Canvas iOS Safari SecurityError: DOM 18 exception

I am trying to manipulate a video on a canvas using all assets from the same domain. I run this through apache and use my local IP to access the site. All this seems to work on mobile chrome, but for some reason, it throws security exceptions on iOS safaris. Maybe there is a mistake in how the canvas is corrupted, using two different canvases and passing around the video? Anyway, I was hoping that around would work? Here is my code and exception:

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<h1>DOH</h1>
    <video id="video" width="800" height="600" src="doh.mp4" controls></video>
    <canvas width="800" height="600" id="output"></canvas>
    <button id="doh">Play</button>
    <script type="text/javascript" src="custom.js"></script>
</body>

JS:

var v = document.getElementById('video');
var canvas = document.getElementById('output');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var R = 10, G = 10, B = 10, dev = 10; 
//var R = 57, G = 94, B = 118, dev = 10; 
var hR = (R + dev), lR = (R - dev), hG = (G + dev), lG = (G - dev), hB = (B + dev), lB = (B - dev);

var cw,ch;

var click = document.getElementById('doh');

click.addEventListener('click', function(){
    v.play();
});

v.style.position = "absolute";
v.style.top = window.innerHeight; 

v.addEventListener('play', function(){
    cw = v.clientWidth;
    ch = v.clientHeight;
    canvas.width = cw;
    canvas.height = ch;
    back.width = cw;
    back.height = ch;
    draw(v,context,backcontext,cw,ch);
},false);

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,w,h);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4) {
        var r = data[i];
        var g = data[i+1];
        var b = data[i+2];
        if(r >= lR && r <= hR && g >= lG && g <= hG && b >= lB && b <= hB){
            data[i + 3] = 0;
        }
    }
    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
}

CSS

body {
    background-color: purple;
}

#doh{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 120px;
}

Exception

SecurityError: DOM Exception 18: An attempt was made to break through a user agent security policy.

And as expected, this is happening on

var idata = bc.getImageData(0,0,w,h); Line 41
+4

:

889
0
?

More articles:


All Articles