After adding a button to my jitsi install (via this thread), I am now trying to use htlm2canvas to take a screenshot of the video conference.
However, when I run the function, it returns the video as black, even though its showing on display.
screenshot
(Feed on the left should show video but its black)
And as you can see, the icons are also all messed up.
Is there a fix around this? or an alternative?
This is because you might be trying to capture screenshot from outside code and jitsi is running video in iframe. Security features of browser does not allow to read iframe content. you need to implement custom logic in jitsi to handle your scenario.
I have looked around, found logic in ScreenshotCaptureEffect.js. It works now…
You must have in focus video which you want to screenshot, or you can change script to send all video streams.
const storedCanvas = document.createElement('canvas');
const storedCanvasContext = storedCanvas.getContext('2d');
var vids = $('video#largeVideo');
vids[0].play();
storedCanvas.height = parseInt(vids[0].videoHeight, 10);
storedCanvas.width = parseInt(vids[0].videoWidth, 10);
storedCanvasContext.drawImage(vids[0], 0, 0, vids[0].videoWidth, vids[0].videoHeight);
storedCanvas.toBlob(
blob => {
console.debug(blob);
var data = new FormData();
data.append('file', blob);
$.ajax({
url: S3_API_URL,
cache: false,
contentType: false,
processData: false,
method: 'POST',
data: data
});
},
'png',
1.0,
);
Related
This works fine if I was to implement uploading an image via tinymce etc, which I'm really not interested in doing.
I already have hundreds of images uploaded from another part of the website that I'd like to insert into pages being edited and created with tinymce v5.
But how can I indicate in the Insert/Edit dialog box to show just the contents of one directory on the server?
I had a hack from vers 3 something I think it was that I can't locate, and it being so ancient I'm sure it's pretty useless, it didn't even support Safari, so it had to be 10+ years old.
Can't find anything in tinymce docs about indicating a directory to use with insert image.
Some custom javascript to include somewhere???
My basic starter tinymce code:
<script>
tinymce.init({
selector: '#editor',
plugins: 'image code',
toolbar: 'undo redo | link image | code',
/* enable title field in the Image dialog*/
image_title: true,
/* enable automatic uploads of images represented by blob or data URIs*/
automatic_uploads: true,
/*
URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-
image-upload/#images_upload_url)
images_upload_url: 'postAcceptor.php',
here we add custom filepicker only to Image dialog
*/
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
/*
Note: In modern browsers input[type="file"] is functional without
even adding it to the DOM, but that might not be the case in some older
or quirky browsers like IE, so you might want to add it to the DOM
just in case, and visually hide it. And do not forget do remove it
once you do not need it anymore.
*/
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
/*
Note: Now we need to register the blob in TinyMCEs image blob
registry. In the next release this part hopefully won't be
necessary, as we are looking to handle it internally.
*/
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</strict>
There are several ways to do so:
MoxieManager plugin. Here is the demo. However, it's a premium feature.
Depends on the number of images you have on the server. If there aren't many, you can try to use the image_list option of the Image plugin. It will load the editor with a predefined set of images.
Implement the custom file picker with the file_picker_callback option.
I am trying to use QuillJS to let the user write a rich text, and then store it as JSON to display later on. There are 2 of these rich text areas in a single form, and may include images. QuillJS encodes images as base64 strings, and my POST request results in 413 by Express.
I have tried to change the limits by adding express json parameters, even trying extreme numbers.
// app.js
//----------------------------------------------------
// Middlewares
//----------------------------------------------------
app.use(express.json({limit: '2000mb'}));
app.use(express.urlencoded({extended: true, limit:'2000mb'}));
Even this did not help and I think it is not logical to let these parameters with such values.
I tried with json and urlencoded enctypes. When I tried to post with multipart/form, req.body was empty.
// My html page (pugJS)
form(enctype='application/x-www-form-urlencoded', action='/editor/page',
method='POST', onsubmit='return addContent()')
.form-control
label Content-1
div#toolbar
div#editor
input#content(name='content', type='text', hidden)
addContent() function that runs before form submit simply changes input#content's value with JSON.stringify(#editor.getContents())
I want to be able to store two quill content in a single database row, to display later.
A better approach to this would be to overwrite the image upload function and then save the image in Amazon S3 or some cloud server. Then you paste it inside the editor as <img src="http://uploaded-image-url"> This would solve your problem of maximum memory issue.
I fixed my problem few hours before #argo mentioned and I did it that way. So I wanted to post little bit of detail to the solution. I have been also guided by a github issue but can't seem to find the link again, in case I find it I will edit the post and add it.
// Quill - EN content
var quillEn = new Quill('#editor-en', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
// set custom image handler
quillEn.getModule('toolbar').addHandler('image', () => {
selectLocalImage(quillEn);
});
// create fake input to upload image to quill
function selectLocalImage(editor) {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/png, image/jpeg')
input.click();
// Listen upload local image and save to server
input.onchange = () => {
const file = input.files[0];
saveImageToServer(editor, file);
};
}
// upload image to server
function saveImageToServer(editor, file) {
const fd = new FormData();
fd.append('image', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/page/upload_image', true);
xhr.onload = () => {
if (xhr.status === 200) {
// this is callback data: url
const url = JSON.parse(xhr.responseText).data;
insertToEditor(editor, url);
}
};
xhr.send(fd);
}
// manipulate quill to replace b64 image with uploaded image
function insertToEditor(editor, url) {
// push image url to rich editor.
const range = editor.getSelection();
editor.insertEmbed(range.index, 'image', url.toString());
}
In the backend where you POST image, you must return json as { data: FullUrlToImg } with 200 response, if you want to change your status to 201 or something else, don't forget to update it in saveImageToServer function.
So to summarize, you set custom image handler for your quill editor, you post the image to server as soon as user chooses to insert, then you replace the URL with your uploaded image in the editor.
Thanks.
THIS IS A FEATURE REQUEST FOR THE SOUNDCLOUD CREW (since they do not respond via api#soundcloud.com)
Like SoundCloud itself, could the API show profile thumbnails when there are no track thumbnails available?
This way, when embedding SoundCloud tracks via Embedly or the like -- ie. http://jsbin.com/kezonutoroma/1/edit -- people won't have to be faced with those empty placeholder images.
https://soundcloud.com/oembed?url=https://soundcloud.com/liv-lykke/andres-haender&format=xml
<thumbnail-url>http://a1.sndcdn.com/images/fb_placeholder.png</thumbnail-url>
Should be:
<thumbnail-url>http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg</thumbnail-url>
Here is a static, more hacky solution:
var defaultimg = 'http://i1.sndcdn.com/avatars-000036988237-o1ck0r-t500x500.jpg';
$('div a').embedly({
key: '7c6cf67ad409446cacd53309d96b66a0',
query: {
maxwidth: 500,
autoplay: true
},
display: function(data, elem){
$(elem).html('<img src="'+defaultimg+'"/>');
$(elem).addClass('play')
.append('<span />')
.width(data.thumbnail_width)
.height(data.thumbnail_height)
.find('span')
.css('height', data.thumbnail_height)
.css('width', data.thumbnail_width);
}
}).on('click', function(){
var data = $(this).data('embedly');
$(this).replaceWith(data.html);
return false;
});
http://jsbin.com/qovirepoyoto/1/edit
I would recommend to get the default image via an API call to the user endpoint.
Hope this helps you.
I am using the Aviary-Filepicker tool to have a user upload an image, crop it, and then save it. When I use the code below in my javascript, the following happens.
I click the upload button
Filepicker opens
I choose an image using fiepicker.
The aviary edit pane opens.
I crop the image.
I save the image.
Then filepicker opens again (prompting me to choose another picture).
I choose the picture, and then it says my work is saved.
The console logs the console.log function.
I do not know why filepicker is opening again after I have cropped it and saved it.
Here is the code:
$(function(){var a=new Aviary.Feather({apiKey:'zwbGz6e420egYruuRuohTA',apiVersion:2,tools: 'all',initTool: 'crop',cropPresets: [['Square','1:1']],
onSave:function(a){filepicker.pickAndStore({mimetype:"image/*"},{},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});},
onError:function(a){},appendTo:"editpane"});filepicker.setKey(server_vars.apikey);$(".openbutton").click(function(){filepicker.pick({mimetype:'image/*'},function(b){var c=$('<img id="#editimage"/>');c.attr("src",b.url);$(".editpane").empty().append(c);a.launch({image:c[0],url:b.url});});});});
Here is how I did it and it works. I added the export function to the onSave within the aviary function. There is some weirdness trying to customize onSave or OnSaveButtonClicked as described by the Aviary API notes:
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
filepicker.exportFile(
newURL,
{mimetype:'image/png'},
function(FPFile){
console.log(FPFile.url);
});
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
There are some integration instructions up on the filepicker site, in case you haven't seen them.
Can anyone help me find out if/how you can get image data off of the 'camera roll' in an Android device, using (Appcelorator) Titanium ? I have found a 3rd party module for IOS that does this but I am desperate to find one for Android. Otherwise I'll have to scrap the Titanium and go true native.
What I need is a function that returns an array of data about the images on the device. Although I would love to get 'geolocation' data ( if it exists ), all I really need is a 'create date', and a path to the image, or the actual TiBlob.
Seems simple but i get no responses on the Appcelerator forums, which worries me. There must be at least an Android 'module' that achieves this?
Ti.Media.openPhotoGallery({
allowEditing : true,
success : function(event) {
var image = require('/modules/parts/squarecropper').crop(event.media);
setImage(image);
Ti.Media.hideCamera();
},
cancel : function() {
},
saveToPhotoGallery : false,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
});
The above method would do your job. Now then either access it directly or get into a file system and encode and decode the data.
var f = Titanium.Filesystem.getFile(currIamge);
var temp = f.read();
var encodeData = Ti.Utils.base64encode(temp);
alert("encodeData = "+encodeData);