I am using the below code to open a local text file.It works fine in firefox but in safari i get the error as
'[object BlobConstructor]' is not a constructor (evaluating 'new Blob([xhr.response])').please help me by providing links.
var xhr = new XMLHttpRequest(),blob;
xhr.open('GET', 'example.txt');
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
blob = new Blob([xhr.response]);
console.log(blob);
}
It's a bug in the older Safari/WebKits. Upgrade your browser or operating system.
Note: It still does not appear to accept ArrayBufferView's as arguments, but should be fine for normal arrays.
Related
It works on Edge, Chrome, Firefox, but not in safari. In Safari the iframe looks like it knows it should display a pdf (grey background) but with no pages inside it.
const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
setDataStreamURL(window.URL.createObjectURL(pdf))
...
<iframe title={iframeTitle} className={className} src={dataStreamURL} type={type} />
It does work fine if I give it an url to a pdf like this one:
https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
but I need to give it the blob:... url created by window.URL.createObjectURL(pdf)
I might be a little late in answering this but I faced this same issue while previewing a PDF from a blob url using an iframe on Safari. FileReader did the trick for me. From your code, instead of using window.URL.createObjectURL(pdf), read the blob which is here is pdf through a FileReader as shown bellow:
const pdf = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/pdf' })
const reader = new FileReader();
reader.onload = () => {
const url = reader.result; // Use this `url` in iframe src
};
reader.readAsDataURL(pdf);
Note that this trick worked in Safari but might not work in other browsers, so use the blob url for other browsers and this trick for Safari.
I'm starting with webRTC and am trying to access to my camera, however, the code doesn't work, although there is no mistakes in it.
The code is:
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia
|| navigator.msGetUserMedia);
if (navigator.getUserMedia){
var constrains ={video:true};
function successCallback(localMediaStream){
var video = document.querySelector("video");
window.stream = localMediaStream;
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata =function(e){
video.play();
}
}
function errorCallback(error){
console.log("Error: ",error);
}
navigator.getUserMedia(constrains,successCallback,errorCallback);
}else{
alert('Sorry, the browser you are using doesn\'t support getUserMedia');
}
Can you help me please?
i am guessing that the code above is put in a html file and accessed directly by clicking on file( and url being like file:///...), this way would work in firefox, but not in chrome, for camera capture to work on chrome, you need to host the file in some server.
also, on an unrelated note, you can replace
video.onloadedmetadata =function(e){
video.play();
}
with simply
video.play();
Its not obvious whether you have a valid HTML5 video element to set the stream on. If you do, you can use the developer tools to verify the stream has been set on the source.
If you have a web server on your development machine, you can host your code that way, and view it 'locally'.
In page.open I can read about how to open a page using http.
How do use the WebPage module to open an url from the file system?
I have tried to omit http:// and have an url with ../some_dir/foo.html, but it seems to fail.
I Have tried this:
var page = require('webpage').create();
var fs = require('fs');
fs.changeWorkingDirectory('../foo/bar');
page.open('file://index.html', function(status)
{
console.log(status);
//console.log(document.title);
phantom.exit();
});
which outputs "fail".
I got the advice to test an absolute path, trying this:
var page = require('webpage').create();
var fs = require('fs');
page.open('file:///absolute/path/to/index.html', function(status)
{
console.log(page.title);
console.log($('body').length);
phantom.exit();
});
(with and without the call to changeWorkingDirectory, but with the same result)
I get a page title, but phantomjs reports that $ is undefined, jQuery is included in my html file (that is too large to post here). It is included like this:
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
Trying to run functions also produces errors like
Can´t find variable: function_name
Does the page/file you are opening already have jquery embedded on the page? If not, you will need to use either injectJs or includeJs on the page object before you can use the $ operator.
http://phantomjs.org/page-automation.html
If you are just doing a simple DOM selection, I would recommend just calling
document.querySelector('body').length
As these functions already exist within the Phantom instance.
Following code works in Chrome (22.0) but not in Safari (6.0)
<!DOCTYPE html>
<html>
<head>
<script>
function onGo(e) {
var fr = new FileReader();
var file = document.getElementById("file").files[0];
fr.onload = function(e) {
var data = new Uint8Array(e.target.result);
var blob = new Blob([data], {type: 'audio/mpeg'});
var audio = document.createElement('audio');
audio.addEventListener('loadeddata', function(e) {
audio.play();
}, false);
audio.addEventListener('error', function(e) {
console.log('error!', e);
}, false);
audio.src = webkitURL.createObjectURL(blob);
};
fr.readAsArrayBuffer(file);
}
</script>
</head>
<body>
<input type="file" id="file" name="file" />
<input type="submit" id="go" onclick="onGo()" value="Go" />
</body>
</html>
In Safari, neither callback (loadeddata nor error) is called.
The content used is an mp3 file, which is normally played back with audio tag.
Is there any special care needed for Safari?
Many years later, I believe the example in the OP should work just fine. As long as you somehow set the mime type when creating the blob, like the OP does above with the type property of the options passed in:
new Blob([data], {type: 'audio/mpeg'});
You could also use a <source> element inside of an audio element and set the type attribute of the <source> element. I have an example of this here:
https://lastmjs.github.io/safari-object-url-test
And here is the code:
const response = await window.fetch('https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Alexander_Graham_Bell%27s_Voice.ogg/Alexander_Graham_Bell%27s_Voice.ogg.mp3');
const audioArrayBuffer = await response.arrayBuffer();
const audioBlob = new Blob([audioArrayBuffer]);
const audioObjectURL = window.URL.createObjectURL(audioBlob);
const audioElement = document.createElement('audio');
audioElement.setAttribute('controls', true);
document.body.appendChild(audioElement);
const sourceElement = document.createElement('source');
audioElement.appendChild(sourceElement);
sourceElement.src = audioObjectURL;
sourceElement.type = 'audio/mp3';
I prefer just setting the mime type of the blob when creating it. The <source> element src attribute/property cannot be updated dynamically.
I have the same problem, and I spend a couple days troubleshooting this already.
As pwray mentioned in this other post, Safari requires file extensions for media requests:
HTML5 Audio files fail to load in Safari
I tried to save my blob to a file, named it file.mp3 and Safari was able to load the audio that way, but after I renamed the file to have no extension (just "file"), it didn't load.
When I tried the url created from the blob in another tab in Safari:
url = webkitURL.createObjectURL(blob);
it download a file right away called "unknown", but when I tried the same thing in Chrome (also on Mac), it showed the content of the file in the browser (mp3 files start with ID3, then a bunch of non-readable characters).
I couldn't figure out yet how I could force the url made of blob to have an extension, because usually it looks like this:
blob:https://example.com/a7e38943-559c-43ea-b6dd-6820b70ca1e2
so the end of it looks like a session variable.
This is where I got stuck and I would really like to see a solution from some smart people here.
Thanks,
Steven
Sometimes, HTML5 audio can just stop loading without any apparent reason.
If you take a look to the Media Events (http://www.w3schools.com/tags/ref_eventattributes.asp) you´ll see an event called: "onStalled", the definition is "Script to be run when the browser is unable to fetch the media data for whatever reason" and it seems that it should be helpful for you.
Try listening for that event and reloading the file if necessary, with something like this:
audio.addEventListener('onstalled', function(e) {
audio.load();
}, false);
I hope it helps!
Just use source tag in audio.
<audio controls>
<source src="blob" type="blobType">
</audio>
I have the following code to load a file after creating a web page which displays a WebGL canvas:
// Load ccconnect.js file
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4){
eval.call( Window, xmlhttp.response );
}
};
xmlhttp.open("GET","../ccconnect.js",true);
xmlhttp.send(null);
It works fine in Chrome but Safari brings up an error saying:
ReferenceError: Can't find variable: Window
on the line eval.call(...). The ccconnect.js code is displayed when I hover the mouse over 'response' on that same line when debugging so it seems to have retrieved it. Any idea what is wrong? I'm using Safari 5.1.5.
both window and Window is the global object both are understand by other browsers.
but when I checked in safari, it don't understand the variable Window. So my suggestion is replace Window with window.