Databases
StackOverflow2013
Postsdbo
POShow video blob after reading it through AJAX
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow video blob after reading it through AJAX
    primarykey
    data
    text
    <p>While I was trying to create a workaround for Chrome unsupporting blobs in IndexedDB I discovered that I could read an image through AJAX as an arraybuffer, store it in IndexedDB, extract it, convert it to a blob and then show it in an element using the following code:</p> <pre><code>var xhr = new XMLHttpRequest(),newphoto; xhr.open("GET", "photo1.jpg", true); xhr.responseType = "arraybuffer"; xhr.addEventListener("load", function () { if (xhr.status === 200) { newphoto = xhr.response; /* store "newphoto" in IndexedDB */ ... } } document.getElementById("show_image").onclick=function() { var store = db.transaction("files", "readonly").objectStore("files").get("image1"); store.onsuccess = function() { var URL = window.URL || window.webkitURL; var oMyBlob = new Blob([store.result.image], { "type" : "image\/jpg" }); var docURL = URL.createObjectURL(oMyBlob); var elImage = document.getElementById("photo"); elImage.setAttribute("src", docURL); URL.revokeObjectURL(docURL); } } </code></pre> <p>This code works fine. But if I try the same process, but this time loading a video (.mp4) I can't show it:</p> <pre><code>... var oMyBlob = new Blob([store.result.image], { "type" : "video\/mp4" }); var docURL = URL.createObjectURL(oMyBlob); var elVideo = document.getElementById("showvideo"); elVideo.setAttribute("src", docURL); ... &lt;video id="showvideo" controls &gt;&lt;/video&gt; ... </code></pre> <p></p> <p>Even if I use xhr.responseType = "blob" and not storing the blob in IndexedDB but trying to show it immediately after loading it, it still does not works!</p> <pre><code>xhr.responseType = "blob"; xhr.addEventListener("load", function () { if (xhr.status === 200) { newvideo = xhr.response; var docURL = URL.createObjectURL(newvideo); var elVideo = document.getElementById("showvideo"); elVideo.setAttribute("src", docURL); URL.revokeObjectURL(docURL); } } </code></pre> <p>The next step was trying to do the same thing for PDF files, but I'm stuck with video files!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UScubitouch
    1. USPedro Almeida
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POShow video blob after reading it through AJAX
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POShow video blob after reading it through AJAX
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POShow video blob after reading it through AJAX
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI figure out that the problem is with the following command: URL.revokeObjectURL(docURL);. Without it the video is shown. With it I get the following error: GET blob:http%3A//localhost/c8009120-e025-46e3-8822-69d18c5a36b4 404 (Not Found)
      singulars
      1. POShow video blob after reading it through AJAX
      1. USPedro Almeida
    2. COOK, I solved the problem adding an event that waits for the video/image to load before executing the revokeObjectURL method: var elImage = document.getElementById("photo"); elImage.addEventListener("load", function (evt) { URL.revokeObjectURL(docURL); } elImage.setAttribute("src", docURL); I suppose the revokeObjectURL method was executing before the video was totally loaded.
      singulars
      1. POShow video blob after reading it through AJAX
      1. USPedro Almeida
    3. COyou should answer with "answer your own question", so your answer doesn't keep showing up as unanswered in stackoverflow.
      singulars
      1. POShow video blob after reading it through AJAX
      1. USsonjz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload