How do I stop showing the Network Error message and just autoreload the player when the player lose the connections with the stream?
I am using an HLS stream for this player: MediaElementJS
I found this solution in a blog but for me it is not the best option and can be difficult to set up a private proxy 24hs.
This can be solved externally by running an in-app proxy. I have the player in a wrapper that also starts up an HTTPListener. Then instead of giving the MediaElement http://server.com/file.m3u8, I rewrite this URL to http://localhost:58392/http/80/server.com/file.m3u8. FFmpeg hits the proxy with requests and the proxy parses the URL from the request, gets the content and returns it to ffmpeg.
This is my player configuration in js:
<script>
$("video").mediaelementplayer({
features: ["playpause", "volume", "progress", "airplay", "chromecast", "fullscreen"],
forceLive: true
});
playerObject = document.getElementById("player");
</script>
The solution is a two-step process:
First you need to attach an event to notify you of the player being created:
$("video").mediaelementplayer({
features: ["playpause", "volume", "progress", "airplay", "chromecast", "fullscreen"],
forceLive: true,
success: playerReady
});
Now, after the player is created, you can attach to the "ended" event of the player:
function playerReady(media, node, player) {
media.addEventListener('ended', function(e) {
//Do what you want, e.g. reload the page
});
}
Related
I am trying to connect a unity client to a browser client using Webrtc. This step is complete the two clients are now connected (Signaling is complete). What I need to do next is to send the video stream from the c# Camera object to the other peer (browser). Here's what have done which is not working and I do not know why?
The c# code :
var track = arCamera.CaptureStreamTrack(1280, 720, 3000);
localConnection.AddTrack(track);
Then I register the ontrack event for the RTCPeerConnection Object
The javascript code:
function handleTrack (e) {
console.log("Recieved a Track");
remotePeerVideo.current.srcObject = e.streams[0];
}
When I
console.log(e.streams); this is the result:
[MediaStream]
0:{active: true, id: "9322aaa7-69b6-4ef4-8f49-c457ef4ffd16"}
I add this track to the srcObj of a video element, but it does not work. Any Ideas what might be wrong or if there is another way to get the video stream from the c# Camera Object?
I was trying to make my first website.
I'm working on local, so if you need an online website for debug it, I can upload it.
I want to create a preload section on the first visit where show a preload bar/% progress and load all elements before show the page.
I'm doing the audio part and the preloader of the website.
To accomplish this part, I'm using howler.js for audio management and preloadjs.js for the preloader part.
The problem that I can not solve is to start the mp3 at the complete function of the mp3 load.
Below is the code I used.
This is the music part with howler.
var baseurl = document.location.origin;
var soundfolder = baseurl+'/alink/wp-content/themes/alink/media/sounds/';
//SOUNDS EFFECTS
var bgmusic = [soundfolder+'background.mp3', soundfolder+'background.ogg'];
//Music background
var musicbg = new Howl({
src: [bgmusic[0], bgmusic[1]],
loop: true,
volume: 0.5,
preload: false,
});
This is the preloader part with prealodjs.
//PRELOADER
var manifest;
var preload;
function setupManifest() {
manifest = [{
src: baseurl+"/alink/wp-content/themes/alink/media/sounds/background.mp3",
id: "mp3file"
}
];
}
function startPreload() {
preload = new createjs.LoadQueue(true);
preload.on("fileload", handleFileLoad);
preload.on("progress", handleFileProgress);
preload.on("complete", loadComplete);
preload.on("error", loadError);
preload.loadManifest(manifest);
}
function handleFileLoad(event) {
console.log("A file has loaded of type: " + event.item.type);
}
function loadError(evt) {
console.log("Error!",evt.text);
}
function handleFileProgress(event) {
}
function loadComplete(event) {
console.log("Finished Loading Assets");
musicbg.play();
}
setupManifest();
startPreload();
Following some tutorials and js library guidelines, in the howler call I entered the "preload: false" parameter.
Without the preload part and without the "preload: false" parameter, the musical part works perfectly.
By inserting the parameter and the code part of the preloader, when the loadComplete() function is called, the music does not start. (in the console the function is called correctly.
I really can not figure out where the problem is, so I ask you what I'm doing wrong. I think there is a missing part where the file loaded from preloadjs functions is not related to howler call and it can't find the mp3 file in the cache.
Thank you very much for your help.
if you load audio using PreloadJS without SoundJS "installed" to assist with preloading, the audio can only be loaded as HTMLAudio, which is pretty limited. I am fairly certain Howler uses the WebAudio context, so it would just re-load the audio when it needs it.
PreloadJS is really only designed to load WebAudio sounds to be played with SoundJS. In fact, it actually uses a lot of shared code to download and prepare audio for playback. This is not necessarily by design (to prevent usage of other libraries), but WebAudio uses a shared audio context when preloading audio buffers, and PreloadJS knows how to share that context with SoundJS. Howler is probably similar, where it preloads using an audio context it knows how to work with.
As a maintainer of the CreateJS libraries I am certainly biased, but if you want to preload audio with PreloadJS, then SoundJS is a better option than Howler.
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound); // Tell PreloadJS to use SoundJS to load audio
// ... other queue stuff
// After loading is done:
createjs.Sound.play("soundId");
Hope that helps.
Is it possible to Create live video and voice chat application in my website using WebRTC + PubNub.
Any one can help me to find out a good existing code and how to integrate. I am using joomla 2.5.
i need multiple and single channel video and audio streaming.
Yea they have a demo on the site you have to signup to try. http://www.pubnub.com/developers/webrtc/
Looks like you write code with the WebRTC libraries, and in PubNub fashion, the PubNub library provides methods for both subscribing and listen for new connections. (The PubNub library comes with the functionality to see what users come online and offline.) Is this what you're looking for? A sort of chat presence with ability to call users who are available? If so, probably a good idea to use PubNub.
If you are really a WebRTC beginner and are trying to get basic video calling between your Joomla website users, you could try open source SIP.js (sipjs.com) and OnSIP. That's written on top of WebRTC and SIP. You can get a quick user at getonsip.com. Like this is what making a video call looks like (starts call on page load, click end button to end the call):
In HTML
<script src="http://sipjs.com/download/sip-0.6.3.min.js">
<video id="remoteVideo"></video>
<video id="localVideo" muted="muted"></video>
<button id="endCall">End Call</button>
In JavaScript:
var session;
var endButton = document.getElementById('endCall');
endButton.addEventListener("click", function () {
session.bye();
alert("Call Ended");
}, false);
//Creates the anonymous user agent so that you can make calls
var userAgent = new SIP.UA();
//here you determine whether the call has video and audio
var options = {
media: {
constraints: {
audio: true,
video: true
},
render: {
remote: {
video: document.getElementById('remoteVideo')
},
local: {
video: document.getElementById('localVideo')
}
}
}
};
//makes the call
session = userAgent.invite('sip:youruser#yourdomain.onsip.com', options);
You can sign up for a quick user address at getonsip.com and login to the end point.
An issues popped up in the last few days with the YouTube embed API. The issue is that when you embed a video with the official API, it simply doesn't allow you to access to the API. When you try to access to the API, you got error message on the log (IOS) and if you try to play the video through the API the video blacks out. If you load it via the API, but you do not use the API, the user is able to play the video with tap.
The issue persist on the following browsers:
IOS 7 Safari on iPad and iPhone
IOS 7 Chrome on iPad and iPhone
Android 4 Chrome
(My play button uses the API to play the video and that produce the error)
JSfiddle: http://jsfiddle.net/frdd8nvr/6/
Error message:
Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net.
postMessage[native code]:0
Jwww-widgetapi.js:26:357
Nwww-widgetapi.js:25
(anonymous function)[native code]:0
html5player.js:1201:97
Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://jsfiddle.net". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Some debug info:
As I see the API create the iframe on the site. The src is sometime http and sometime https.
http://www.youtube.com/embed/ZPy9VCovVME?enablejsapi=1&origin=http%3A%2F%2Ffiddle.jshell.net&autoplay=0&modestbranding=1&wmode=opaque&forceSSL=false
My test showed that most of the times YouTube servers simply LOCATION: https://... the request to the https url, but around 10% they served the http request with proper content.
I think somehow the issue related with the forced https, but I was not able to figure out the solution.
Have you experienced the same? Do you have some kind of solution for this problem? Is it a YouTube bug?
My test code:
<div id="myvideo"></div>
<button id="play-button">Play</button>
JS:
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
onYouTubeIframeAPIReady = function () {
var vars = {
enablejsapi: 1,
origin: window.location.protocol + "//" + window.location.host,
autoplay: 0,
modestbranding: 1,
wmode: "opaque",
forceSSL: false
};
if (+(navigator.platform.toUpperCase().indexOf('MAC') >= 0 && navigator.userAgent.search("Firefox") > -1)){
vars.html5 = 1;
}
var playerobj = new YT.Player('myvideo', {
videoId: 'ZPy9VCovVME',
wmode: 'opaque',
playerVars: vars,
events: {
onReady: function(){
$('#play-button').on('click', function(){
playerobj.playVideo();
});
//playerobj.playVideo();
},
onStateChange: function(state){
switch(state.data){
case YT.PlayerState.PLAYING:
break;
//case YT.PlayerState.PAUSED:
case YT.PlayerState.ENDED:
break;
}
}
}
});
}
First, I think this is a duplicate of the following question: YouTube IFrame API play method doesn't work before touch on some Android tablets
I could reproduce the same problem on the YouTube Player Demo page.
The error
Unable to post message to https://www.youtube.com. Recipient has origin http://fiddle.jshell.net.
is only occuring on your jsfiddle. On the demo page this error is not occuring, therefore your observed bug seems not to be related to the error logged in the console. I checked this with chrome on Android 4.4.4.
Workaround
I have a dirty workaround which works on chrome on Android 4.4.4 (Nexus5) and 4.1.2 (S2). I have no iOS Device to test this. The workaround works on my phones, because the video always starts the second time I click the play-button.
http://jsfiddle.net/kjwpwpx8/6/
I can always start the video on click-Events after the playVideo function was called once before. In my workaround I put two iframes on the page. One is hidden while the other one is visible. If the page is viewed by a mobile browser I call the playVideo function of the second video after the OnReady-Event. The video won't play as the browser blocks this.
Now when our play-button is pressed the first video becomes hidden and stopped and the second video becomes visible and the playVideo function is called again.
Here is the important code:
var playerOptions = {
videoId: 'ZPy9VCovVME',
wmode: 'opaque',
playerVars: vars,
events: {}
};
var playerobj1 = new YT.Player('myvideo1', playerOptions);
var playerobj2 = null;
playerOptions.events.onReady = function(){
$('#play-button').on('click', function(){
$("#videowrapper .video1wrapper").hide();
playerobj1.stopVideo();
$("#videowrapper .video2wrapper").show();
playerobj2.playVideo();
});
if(isMobileBrowser)
playerobj2.playVideo();
};
playerobj2 = new YT.Player('myvideo2', playerOptions);
I'm currently working with soundmanager2 in an IE/flash context (not html5). The issue is that audio playback of mp3 content does not occur for the following case where the 'onload' callback function is defined as null OR as a function that does almost nothing.
soundManager.createSound({
id: 'someidforasoundfile',
url: 'pathtoaudiofile.mp3',
autoLoad: true,
autoPlay: true,
onload: function() {
return 1;
},
volume: 50
});
If I define the "onload" callback as:
function() { alert('zing'); }
soundmanager2 will actually start playing the audio file...but there's an annoying alert pop up that the user has to contend with.
Is this a soundmanager2 configuration issue or something else?
Thanks in advance!
ct
I think im understanding is that when a user indicates a stream, theres a message alert to indicate that the song is starting or they have to let permission.
I would say its soundmanager, As flash can stream or download media content with out any "USER" permissions.
this is limited/ restricted of course to:Examples mp3,video,other SWF files.ect
but say downloading zipfiles or other media types may need permissions.
They maybe something in the (alert) function, to create this message or pop up to appear, check that source code and follow its script.
if you have some source code for this please post i will take a look at it