<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Adaptive Stream Video Throws DOM Exception 18 When Uploaded to a Texture"
href="https://bugs.webkit.org/show_bug.cgi?id=154189">154189</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Adaptive Stream Video Throws DOM Exception 18 When Uploaded to a Texture
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Critical
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Canvas
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>jonobrandel@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>dino@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=271208" name="attach_271208" title="Screenshot of Chrome (left) and Safari (right) behavior.">attachment 271208</a> <a href="attachment.cgi?id=271208&action=edit" title="Screenshot of Chrome (left) and Safari (right) behavior.">[details]</a></span>
Screenshot of Chrome (left) and Safari (right) behavior.
It's really common practice to use a <video /> element to play some content. Less frequent, but still very useful is to take that elements content and put it in a canvas. In this example I'm using the <video /> element, but pointing it to a stream via the library Shaka Player (<a href="https://github.com/google/shaka-player">https://github.com/google/shaka-player</a>). I expect to be able to take the pixel information of the <video /> element at a given time and reproduce it / manipulate it on a canvas element. However, in Safari 9 this is not the case. When implementing with WebGL I get a DOM Exception 18 error. When implementing with canvas I get no error, but also no image. The assets are same domain, so I don't think there are CORS issues present. Below are links that reproduce this behavior:
1) Go to either:
Example using canvas via texImage2D in WebGL (with Three.js):
<a href="https://dl.dropboxusercontent.com/u/1595444/shaka-player/stream-texture.html">https://dl.dropboxusercontent.com/u/1595444/shaka-player/stream-texture.html</a>
Example using canvas via drawImage directly:
<a href="https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html">https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html</a>
2) Click the "Play Button" on the <video /> element.
3) The video starts playing
When going through these steps in Google Chrome when I hit play I see 2 videos on the page. One that is the <video /> element and one that is the <canvas /> element that reproduces the pixel information of the source <video /> element. I expect Safari to behave similarly.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>