opentok how to hide the publisher video display - opentok

I am using OpenTok and I am trying to swich with video display on/off.
So I use the following pubOptions
var pubOptions;
if (show_video)
{
pubOptions= null;
}
else
{
pubOptions= { videoSource: null, style: {buttonDisplayModeo: 'off'}};
}
//Replace the first parameter with the replacement element ID:
session.on("streamCreated", function(event)
{
session.subscribe(event.stream);
});
session.connect(token, function(error)
{
publisher = OT.initPublisher("publisher_text",pubOptions);
session.publish(publisher);
});
But the video window is displayed in both cases.

Look at the following documentation: https://tokbox.com/opentok/tutorials/audio-video/js/#publish_audio_video_only
If you want to disable video after publishing, you'll need:
publisher.publishVideo(false);

https://tokbox.com/opentok/libraries/client/js/reference/OT.html#initPublisher
I believe you want pubOptions = {publishVideo: false, style:{buttonDisplayMode: 'off'}};

I'm not sure if what you're looking for is this but you may try it...
session.unpublish(); //unpublishes your stream/video
session.forceUnpublish(); //unpublished your strea/video and forces other streams to be unpublished as well

Related

How do I block uploads that lack "DateTimeOriginal" exif data with Fine Uploader?

I have an app where having the DateTimeOriginal time stamp on photos are absolutely necessary. Is there a way for me to stop uploading and display a message using Fine Uploader?
I've never heard of the "taken-at" tag, and I don't believe this is a standard field. The rest of this answer assumes you really do want to focus on this tag, but even if you don't you can make a simple change in the source code below to focus on another EXIF tag instead.
One approach is to check each file in an onSubmit callback handler and simply reject the file is it does not contain a "taken-at" field. The following example utilizes the exif-js library to parse an image file's EXIF data:
var uploader = new qq.FineUploader({
callbacks: {
onSubmit: function(id) {
var blob = this.getFile(id)
return new Promise(function(resolve, reject) {
EXIF.getData(blob, function() {
var takenAt = EXIF.getTag(this, 'taken-at')
if (takenAt) {
resolve()
}
else {
reject()
}
})
})
}
}
})

Add a clientEvent filter to an AJAX fullCalendar

I'm trying to add a clientEvent filter to an already working AJAX fullCalendar. The idea is to allow the visitor to filter the events already displayed by selecting a choice in a droping list.
The code is currently as follows:
jQuery(document).ready(function($) {
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.post(
MyAjax.ajaxurl,
{
action: 'get_fullcalendar',
data: {
slotbegin: start.unix(), // données à compléter
slotend: end.unix()
}
},
function( events ) {
callback( events );
}
);
},
eventRender: function(event, element) {
element.qtip({
id: 'eventdetails',
content: {
text: event.image + event.description,
title: event.title
},
});
}
});
$("#cible_select").change(function() {
var cible = $(this).val()
var events = $('#calendar').fullCalendar('clientEvents', function(evt) {
return evt.public_cible == cible;
});
});
});
The fullCalendar works OK by itself. But I don't know how to integrate the clientEvents bit so it is used when the user makes change to the #cible_select selector.
I've been trying many things for the past hours, and would appreciate some help to solve this issue.
Thanks a lot for any hint.
This function might help you. call this function where ever you want.
function parseClientEvents(/*pass params here*/){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);
//all your logic goes here.
}
return true;
}
I seem to have misunderstood the way clientEvents works. I thought it would re-display the whole calendar with the selected events only, but that's not the case.
removeEvents works to hide/suppress events one doesn't want any more, but those are not available on the client side any more, so refetchEvents has to be used if the user changes his mind and makes another choice.
removeEventSource works only if you have a limited number of sources, and I want to be able to combine several filters, so there is quite a number of combinations.
So, I'm completely rethinking my filtering strategy: clientEvents is definitely not the way to toggle on/off events on a multicriteria basis.

Snap.svg capturing mousewheel events

I would like to take the mousewheel event on an element, but have't found anything on the documentation. Do you have an example of the kind?
I'm not sure of any direct Snap methods to use mousewheel, but I guess you can just add a mousewheel listener...this example works in Chrome, you may need to tweak and add test case for different browsers.
var s = Snap(400, 620);
var c = s.circle(30,30,30);
if( (/Firefox/i.test(navigator.userAgent)) ) {
s.node.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
} else {
s.node.addEventListener("mousewheel", mouseWheelHandler, false);
}
function mouseWheelHandler (ev) {
ev.preventDefault();
console.log( ev.target.localName );
}
Edit: Have updated to check for firefox as well.
jsfiddle example

Not getting streamCreated event, page goes to 100% CPU usage

Whenever I allow webcam access in chrome as a part of setup up a multi-party or a p2p conference, I am expecting to get a streamCreated notification which is not coming through. My camera turns on and the "google chrome renderer" for the page goes to 100% CPU usage. When I pause the execution of the stream I find that the execution is somewhere deep inside TB.min.js. Here's what the relevant parts of my code look like:
void meetingInProgress(info) {
var session = TB.initSession(info.sessionId);
session.connect(info.apiKey, info.token);
session.addEventListener("sessionConnected", function(e) {
console.log("Connected to session");
subscribeToStreams(session, e.streams);
session.publish("selfview", { name: name });
});
session.addEventListener("streamCreated", function(e) {
console.log("New stream");
subscribeToStreams(session, e.streams);
});
}
var subscribeToStreams = function(session, streams) {
var selfId = session.connection.connectionId;
console.log('Subscribing to streams, self id:', selfId);
console.log('No. of streams:', _.size(streams));
_.forEach(streams, function(s) {
console.log('Stream id: ', s.connection.connectionId);
if (s.connection.connectionId == selfId) {
console.log('Toggling');
$("#selfview").toggle();
}
else
session.subscribe(s, addViewport(), { width: 640, height: 480 });
});
console.log('Done subscribing to streams...');
}
Seems to me like if the publisher div element is hidden, there's a problem with receiving the streamCreated event. I was hoping to only show the publisher div panel when the user actually approves the use of camera. When I disable this div visibility toggling, things seem to work better.
Unfortunately, with the latest release, this will happen when the publisher is hidden. If you still want to hide it, the best option for now would be to make it a 1x1 pixel and have it absolutely positioned at -1, -1 of the screen.

Track Youtube player's states in YUI.add

My embed code to play Youtube video is:
<object height="356" width="425" type="application/x-shockwave-flash" id="myytplayer" data="http://www.youtube.com/v/MTf6qXn5Prw?enablejsapi=1&playerapiid=ytplayer&version=3"><param name="allowScriptAccess" value="always"></object>
I want to track Youtube player's events (play/pause/stop etc)
The following piece of code works independently
window.onYouTubePlayerReady = function(playerId){
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
window.onytplayerStateChange = function (newState) {
alert("Player's new state: " + newState);
}
I am using YUI.
When I put the same in
YUI.add('module-name', function(Y) {
[some other code...]
window.onYouTubePlayerReady = function(playerId){
// console.log(playerId); console.log(ytplayer);
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
window.onytplayerStateChange = function (newState) {
alert("Player's new state: " + newState);
}
},'3.4.0', {requires:'module-a', 'module-b'})
Function onytplayerStateChange works in Firefox and Safari but not in other browsers.
Then I tried YUI functions to make that working in all browsers so I did some changes
window.onYouTubePlayerReady = function(playerId){
var shinyPlayer = Y.one("#myytplayer");
shinyPlayer.on('onStateChange', function (e) {
e.preventDefault();
alert('here');
});
}
but it didn't work for me.
I don't want to place window.onytplayerStateChange outside of YUI.add('module-name', function(Y) {})
Please suggest what should I do to track Youtube player's states in all browsers.
Thanks in advance.
I made a jsFiddle to test this:
http://jsfiddle.net/2Mj6b/4/
For me it feels like addEventListener is a custom implementation of Google.
Normally the second parameter is a callback/function-pointer and no string.
If you attach a variable to the window object it gets global and is from every scope visible. So it's no problem if you define it in the YUI module.
The second problem is that you cant use the player as YUI object you have to stay on dom objects to get this work.
Oh this is a old question. Damn. But i will post this anyway. ;)

Resources