Low latency RTMP playback with video.js - video.js

i'am trying to play a RTMP stream with low latency uinsg HTML5, vido.js and videojs-flash. For now i can get the stream to display with a 3-4 seconds latency but playing the same stream with ffplay gives a sub-second latency.
Looking at older videojs version it seems that some code that allowed to specify flashvars to be passed to the swf object were never merged. In newer video.js version, one can use the videojs-flash plugin to play a flash video and this plugin seems to support flashVars in the player options and this vars are passed to the swf object.
Did anyone used this feature and how can i provide the flashVars option to the videojs object .
This is the code i tried so far :
var player = videojs('my-video', {
autoplay: true,
muted: true,
preload: "auto",
sources: [{
type: "rtmp/flv",
}],
flashVars: {
buffertime: 0
}
});

if found an answer to my own question that reduces the latency quite a lot. It's not very stable for now since i sometimes get ~1s latency but can go up to 3s. The solution is to use a patched swf that will interpre take into account the buffering options. Now the player initialization becomes:
var player = videojs('my-video', {
techOrder: ['flash'],
autoplay: true,
sources: [{
type: "rtmp/flv",
}],
bufferTime: 0,
flash: {
swf: "js/video-js.swf",
flashVars: {
bufferTime: 0,
autoPlay: true,
bufferTimeMax: 0.25
}
}
});
the video-js.swf is compiled from the patched version at :
https://github.com/sea-kg/video-js-swf.git
Just compile this version and use the "swf:" flash option to provide the path to this swf.
This reduces the latency significantly but in my experience, the latency can vary per connection.

Related

WebRTC what is the correct way to removeStream and addStream again

My RTC session was started with text only. And video is added by user when needed (renegotiation)
navigator.getUserMedia({ video: true, audio: false }, function (myStream) {
localVideo[0].srcObject = myStream;
myConn.addStream(myStream);
}, function (error) {
console.log(error);
});
When user do not need the video session anymore, I remove using:
var tracks = localVideo[0].srcObject.getTracks();
tracks.forEach(function (t) {
t.stop();
});
myConn.removeStream(localVideo[0].srcObject);
localVideo[0].srcObject = null;
Everything is working fine, until I try to add the video again I noticed that the createOffer() request size is getting larger and larger.
Seems to me that WebRTC didn't forget about the previous stream, and is adding to the offer again and again. Or maybe my way of removing a video stream / track is wrong?
This is a known issue see this thread on the W3C list.
The best way to get around this is to use replaceTrack and is suggested in the thread.
Note: It is still possible to prevent the list of transceivers from growing
by *manually* recycling them using transceiver.sender.replaceTrack() and
transceiver.direction, but that still wastes resources on transceivers
currently not used, and implies you probably shouldn't use
transceiver.stop() in most cases.
Also see the "Unified Plan" Transition Guide

createjs, soundjs, preloadjs Sound not working in Safari desktop Version 9.1.3, OSX 10.11.6

I have sound working in Chrome, Firefox on Mac, but not Safari Version 9.1.3, OSX 10.11.6.
I can only find a statement in the docs saying that Safari will need the Quicktime plugin. However, when I point my Safari to the Soundjs and Preloadjs demo pages, the sound works fine in the demos. Furthermore, apparently Apple is no longer including the QT plugin on current installs of Safari. It would be unacceptable to ask users to install a legacy plugin. (edit: just received word the sound isn't working in MS Edge either)
Here is all of my code:
var stage;
var canvas;
canvas = document.getElementById("gamezCanvas");
stage = new createjs.Stage(canvas);
var soundsManifest = [
{
id: 0, src: '10_ciiruhi.ogg'
},
{
id: 1, src: '20_shuuk.ogg'
}
];
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.on("complete", handleComplete);
queue.loadManifest(soundsManifest, true, audio_url);
function handleComplete() {
createjs.Sound.play(1,
{
interrupt: createjs.Sound.INTERRUPT_NONE,
loop: 0,
volume: 1
}
);
}
var btn = new createjs.Shape();
btn.graphics.beginFill("#000");
btn.graphics.drawRect(0, 0, 200, 120);
stage.addChild(btn);
stage.update();
btn.on("click", function() {
createjs.Sound.play(0,
{
interrupt: createjs.Sound.INTERRUPT_NONE,
loop: 0,
volume: 1
}
);
});
It was a simple file format issue. Outside the scope of createjs's documents to inform me about. Shame on me :(
OGG is no bueno in Safari and Exploder.

Can I receive video without giving permission to browser to use my camera in SimpleWebRTC?

Does SimpleWebRTC has this feature to get data(video/audio) without giving permission to browser to use my camera/microphone?
// create our webrtc connection
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: '',
// immediately ask for camera access
**autoRequestMedia: true,**
debug: true,
detectSpeakingEvents: true,
autoAdjustMic: false,
media: {
video: false,
**audio: true**
},
});
When I change those parts surrounded by asterisks to true it works, otherwise it doesn't.
Have you tried setting autoRequestMedia to true and while having both video and audio of the media object set to false? You should receive the readyToCall event and can join the room as shown on the simplewebrtc homepage.
First negotiate (accept the call/join the room) with video and audio and then disable the video, somehting like webrtc.videoStreams.disable()

Error when trying to create a data store of Iterations

I'm trying to get back a data store of iterations to build a board similar to the iteration planning board. Here is my code...
Ext.create('Rally.data.wsapi.Store', {
model: 'Iteration',
fetch: true,
autoLoad: true,
context: {
workspace: 'workspace/22050374191',
project: 'project/27401497157',
projectScopeUp: false,
projectScopeDown: false
},
listeners: {
load: this._onIterationsLoaded,
scope: this
}
});
However I always get the following error.
XMLHttpRequest cannot load https://rally1.rallydev.com/slm/webservice/v2.0/Project/27401497157?fetch=O…kDays%2CIterationEstimateUnitName%2CReleaseEstimateUnitName%2CTaskUnitName. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1337' is therefore not allowed access.
I am creating other data stores successfully so I don't think it's a general configuration type of error.
The way that I've found to work around this is to clear my browser cache of images and files (but not cookies). In Chrome, go to settings (chrome://settings/clearBrowserData), and check the "Cached images and files" checkbox. I've had this error a few times while using the "rally-app-builder run" command, and it took me a while to empirically track this down.
Clearing images and files does not affect your cookies. In Chrome, anyhow.

flowplayer streaming mp4 from apache

I'm having some problems getting this to work. I think I've done it right based on http://flowplayer.org/forum/5/14664#post-14830). The clip starts to play fine, but when I skip to a part of the clip which hasn't loaded yet it just goes back to the start of the file/video
Sadly the browser used is IE6 for the most part :(
Apache 2 running on Redhat
I've created an mp4 file with ffmpeg.
Run qt-faststart 1.mp4 1.qt.mp4
Installed mod_flvx.c
Added:
LoadModule flvx_module modules/mod_flvx.so
AddHandler flv-stream .flv
To Apache httpd.conf
Using the example page:
<script type="text/javascript">
flowplayer("player", "flash/flowplayer-3.0.3.swf", {
clip: {
url: 'http://servername/player/media/1.qt.mp4',
// default provider: 'h264streaming'
provider: flashembed.isSupported([9, 115]) ? 'h264streaming' : 'lighttpd',
scaling: 'fit',
autoBuffering: true,
autoplay: false,
bufferLength: 3
},
log: {
level: 'debug'
},
plugins: {
h264streaming: {
url: 'flash/flowplayer.h264streaming-3.0.5.swf'
},
controls: {
url: 'flash/flowplayer.controls-3.0.3.swf',
// which buttons are visible and which not ?
play:false,
fullscreen:true,
// scrubber is a well known nickname to the timeline/playhead combination
scrubber: true
}
}
});
</script>
Anyone have any suggestions?
Thanks
First off, you need to see if your apache is configured to correctly seek to parts of the video. You can do that by passing a get parameter like my_vide_path.mp4?start=10 to have it start 10 seconds in. If it successfully starts 10 seconds in, then apache is set up correctly and you need to make flowplayer work. If apache isn't set up correctly, then even the correct flowplayer config won't help.
I doubt your apache is set up correctly though. You're telling apache to handle .flv files and yet you're using mp4s.
I've successfully gotten this to work with the apache module from http://h264.code-shop.com/trac/wiki.
You'll need to add and load the module into apache and tell apache to handle .mp4 files with it.
Next step would be to test with that get parameter ?start=10 to see if it is seeking correctly.
After that, all you need to do is:
<script type="text/javascript">
flowplayer("player", "flash/flowplayer-3.0.3.swf", {
clip: {
url: 'http://servername/player/media/1.qt.mp4',
default provider: 'h264streaming'
},
plugins: {
h264streaming: {
url: 'flash/flowplayer.h264streaming-3.0.5.swf'
}
}
});
</script>
I used the updated flowplayer swf and instead of h264's swf, the flowplayer plugin for psuedostreaming, as it works with the newer version of flowplayer and apparently the h264 one didnt.