Couple of day again flow player stop playing audio and video files. This is my code
<div id="player" style="display:block;width:728px;height:330px;"></div>
<script>
$f("player", "https://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
url: 'file_url',
scaling: 'fit'
}
});
</script>
Can any body know why?
Related
I am using the library https://github.com/felipenmoura/qr-code-scanner to implement scanning of the QR codes. I am facing two problems -
Google chrome throws the following error whenever I click the button to trigger. The library works fine on Safari.
Uncaught (in promise) OverconstrainedError {name: "OverconstrainedError", message: "", constraint: "facingMode"}constraint: "facingMode"message: ""name: "OverconstrainedError"__proto__: OverconstrainedError
The camera feed doesn't work for mobile phones (both safari and chrome). It opens the camera, and doesn't show the live feed, instead it keeps on showing a static image
I am not sure if this is the best library for QR code scanning. My aim is to implement a button that triggers the camera, scans QR,enter image description here and puts the scanned string into the input field.
My code is -
<script src='../scanner.js'></script>
<script>
function tryIt () {
window.QRScanner.initiate({
match: /^[a-zA-Z0-9]{16,18}$/,
onResult: function (result) {
console.info('DONE: ', result);
document.getElementById("memberno").value = result;
},
onError: function (err) { console.error('ERR :::: ', err); },
onTimeout: function () { console.warn('TIMEDOUT'); },
});
}
</script>
and the button is -
<button class="btn btn-outline-info" value='Scan QR' onclick='tryIt()' type="button" id="button-addon1">Scan QR</button>
For anyone who is still looking for an answer to the best library for QR code scanning-
I found this library ScanThng to be pretty decent in terms of image scanning, camera feed scanning, etc.
Just started with PubNub, and seems that I fail to understand even the simplest possible scenario. I created the following test page:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.15.1.js"></script>
<script>
const pubnub = new PubNub({
publishKey : '<guid>',
subscribeKey : '<one more guid>'
});
pubnub.subscribe({channels: ['3']});
pubnub.addListener({
message: v => {
console.log("on message", v);
},
});
function onClick() {
pubnub.publish({channel: '3', message: 'foo'});
}
</script>
</head>
<body>
<button onclick="onClick()">start</button>
</body>
</html>
Opening it with latest Chrome and clicking "start" button will result in test message being received endlessly over and over. I was under impression that after single client receives a message from a bus, this client will not receive it again. why such behaviour? I understand that I can read all the docs and most probably answer is somewhere deep inside, but tutorial + quickstart gives no clues, and rest of docs are quite huge.
Your example code works perfectly for me. The message published is received one time on the channel "3". One way to validate this is to simultaneously have the PubNub Console open (https://www.pubnub.com/docs/console). Make sure you enter your Publish and Subscribe keys into the console, along with the channel "3". After clicking the "Subscribe" button in the PubNub Console, you should see your test message "foo" appearing once in the "messages" section at the bottom each time you click the "start" button on your test page.
I can see that you're using the latest SDK-JS V4 (perfect starting point)
Your code works!
I would like to point you to a bit of a diff way to init PubNub and few functionalities.
(which are available in their docs)
Please look at the attached link to view my PubNub demo
<script type="text/javascript">
console.log('init PubNub.');
pubnub = new PubNub({
publishKey: 'demo',
subscribeKey: 'demo',
uuid: 'myDemo'
})
console.log("addListener..");
pubnub.addListener({
status: function(statusEvent) {
if (statusEvent.category === "PNConnectedCategory") {
console.log("PNConnectedCategory..");
publishSampleMessage();
}
},
message: function(message) {
console.log("New Message!!", message.message);
},
presence: function(presenceEvent) {
//handle presence
}
})
console.log("Subscribing..");
pubnub.subscribe({
channels: ['myDemo']
});
function publishSampleMessage() {
console.log("Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish.");
var publishConfig = {
channel: "myDemo",
message: "I'm here, I'm alive!!"
}
pubnub.publish(publishConfig, function(status, response) {
console.log(status, response);
})
}
function onClick() {
publishSampleMessage();
}
</script>
I am trying to stream video attachment from CouchDB using nano middleware in NodeJS. Video is received on the browser. I do not know how I should stream it on client and how to display it in HTML Tag.
Here is my NodeJS code to read attachment from CouchDB which I found from here:
if (req.headers.range) {
var stream = db.attachment.get(docid, docname, {Range: req.headers.range});
stream.on('response', function(response) {
var start = req.headers.range.replace(/bytes=/, "").split("-")[0];
var end = response.headers['content-length'];
res.writeHead(206, {
'ETag': response.headers.etag,
'Content-Range': 'bytes ' + start + "-" + (end - 1) + '/' + end,
'Accept-Ranges': 'bytes',
'Content-Length': end - start,
'Content-Type': response.headers['content-type']
});
});
} else {
stream = db.attachment.get(docid, docname);
}
stream.pipe(res);
stream.on('end', function() {
res.end();
});
On the client side my ajax call looks like this :
jQuery.ajax({
url: '/getvideoattachment/?id=' + this.id + "&name=" + videoname,
contentType: 'video/webm',
type: 'GET',
headers : { "Range" : 'bytes=0-3200' },
processData : false,
success: function(content) {
var oMyBlob = new Blob([content], { "type" : "video\/webm" });
var docURL = window.URL.createObjectURL(oMyBlob);
var elVideo = document.getElementById("videoid" );
elVideo.addEventListener("load", function (evt) { window.URL.revokeObjectURL(docURL); });
elVideo.setAttribute("src", docURL);
},
error : function(content)
{
Em.Logger.info('Model:', this.id, 'has no image', err);
return '';
}
});
In HTML Video tag is like this :
<video controls id="videoid" >
<source src="" type="video/webm" />
</video>
I am not sure if Blob is the right way to stream video to Video tag. How should I append the streams to the video tag?
Edit :
You are right brianchirls.
It works! I have set the video URL. But what I get in the video tag is this :
<video controls="" id="videoa" class="visible" data-bindattr-7="7">
<source src="/getvideoattachment/?id=a26de29ded4e33ad47205187f4000f46&name=c.webm" data-bindattr-8="8" type="video/webm">
</video>
But when I click on play it does not play the video. But when I click on the link from the inspect element it plays the video in new browser window.
This solution is almost there.
#brianchirls answer has helped.
By changing the src attribute of video tag rather than source tag started the video streaming.
Thanks!
#Bhoomi, I know it was a long time ago, but how did you go streaming directly from CouchDB in terms of stability and performance?
I'm trying to build an iOS Webapp that uses audio. While it has been a very fickle endeavor, I finally managed to get it to work in Safari Mobile (interestingly enough it worked in chrome mobile a long time before, I don't know why…). Yet when I save it as a webapp on the home screen, the audio stops working mysteriously…
Here is the audio code. window.helpers.gongis a base64 encoded mp3 file.
I checked the console output in the webapp via the desktop safari, yet there are no errors thrown.
Any ideas what might be going wrong?
window.helpers.audio = {
myAudioContext: null,
mySource: null,
myBuffer: null,
init: function() {
if ('AudioContext' in window) {
this.myAudioContext = new AudioContext();
} else if ('webkitAudioContext' in window) {
this.myAudioContext = new webkitAudioContext();
} else {
alert('Your browser does not support yet Web Audio API');
}
var self = this;
var load = (function (url) {
var arrayBuff = window.helpers.Base64Binary.decodeArrayBuffer(window.helpers.gong);
self.myAudioContext.decodeAudioData(arrayBuff, function(audioData) {
self.myBuffer = audioData;
});
}());
},
play: function() {
this.mySource = this.myAudioContext.createBufferSource();
this.mySource.buffer = this.myBuffer;
this.mySource.connect(this.myAudioContext.destination);
if ('AudioContext' in window) {
this.mySource.start(0);
} else if ('webkitAudioContext' in window) {
this.mySource.noteOn(0);
}
}
};
The code is called like this on load:
window.helpers.audio.init();
And later it is triggered through user action:
...
$('#canvas').click(function() {
if(this.playing == false) {
window.helpers.audio.play();
}
}.bind(this));
...
Ouch, the answer was blindingly simple:
I had the mute switch on the side of the iPhone set to mute the whole time.
So it turns out that safari plays audio even when the switch is on mute, yet when you save it as a web app, it doesn't work anymore.
If I understand correctly the audio works on desktop Safari, and not on mobile Safari?
This could be a result of a limitation placed on mobile Safari that requires any sound that is played to be a triggered in a user action (for example, a click).
Read more here:
http://buildingwebapps.blogspot.com/2012/04/state-of-html5-audio-in-mobile-safari.html
The problem is, as soon as pjaxed request finishes, pjax also initiates a normal GET request.
My codes are like this:
$(document).on('pjax:end', function(event){
alert("end");
inpjax = false;
});
$(document).on('pjax:timeout', function(event) {
alert("timeout")
event.preventDefault();
});
$(document).on('pjax:error', function() {
alert("error");
});
$(document).on('pjax:success', function() {
alert("success");
});
$(document).ready(function(e) {
inpjax = false;
$('.pj').click( function(e) {
e.preventDefault();
if(!inpjax)
{
inpjax = true;
$.pjax({
timeout: 5000,
url: $(this).attr('href'),
container: '#codeport'
});
}
});
});
As you can see, it should give me an alert on different stiuations, but I only get alert on pjax:end event, and after that alert, pjax initiates normal GET request, timing is like this:
[17:36:02.002] GET http://localhost/abstract?_pjax=%23codeport [HTTP/1.1 200 OK 86 ms]
[17:36:02.170] GET http://localhost/abstract [HTTP/1.1 200 OK 73 ms]
I don't get timeout, error or success alert.
What could be causing this? Please help...
SOLUTION:
The problem turned out to be that my serverside code was responding with a full page, and that was causing a second GET request. So if this problem happens to you too, make sure that your server side code responds correctly to PJAX requests.
example:
<!DOCTYPE html>
<html>
<head>
<!-- styles, scripts, etc -->
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Download content from the other site ?.
</div>
</body>
</html>
Try to add pjax to an element which you want to get event messages from like $(document).pjax('a', '#pjax-container')