I'm trying to build an app that will need to be able to connect multiple peers together over WebRTC.
I'm working from the example at: https://github.com/webrtc/apprtc
I'm stuck on how to setup what is needed for the following 4 lines of code:
iceServerRequestUrl: '{{ ice_server_url }}',
iceServerTransports: '{{ ice_server_transports }}',
wssUrl: '{{ wss_url }}',
wssPostUrl: '{{ wss_post_url }}',
That would be part of this section of loading parameters:
var loadingParams = {
errorMessages: [],
isLoopback: false,
warningMessages: [],
mediaConstraints: {"audio": true, "video": {"optional": [{"minWidth": "1280"}, {"minHeight": "720"}], "mandatory": {}}},
offerOptions: {},
peerConnectionConfig: {"rtcpMuxPolicy": "require", "bundlePolicy": "max-bundle", "iceServers": []},
peerConnectionConstraints: {"optional": []},
iceServerRequestUrl: '{{ ice_server_url }}',
iceServerTransports: '{{ ice_server_transports }}',
wssUrl: '{{ wss_url }}',
wssPostUrl: '{{ wss_post_url }}',
bypassJoinConfirmation: false,
versionInfo: {"gitHash": "06b18b54af995bab9e16c2648ddb7edbbe553541", "branch": "master", "time": "Mon Sep 14 17:52:24 2020 +0200"},
};
I understand that a web socket is needed, but I'm unsure how to set this up for a web app. I'm working with cPanel.
How do I set up the iceServerRequestUrl, iceServerTransports, wssUrl, and wssPostUrl?
Related
I am trying to execute the curl command that take a variable as key in json body but the variable is not being replaced by the value due to which getting the 400 error:
tasks:
- name: set source tag
uri:
url: https://****/api/v2/source
method: POST
body:
tags:
"{{ ec2_tag_KubernetesCluster }}": true
"{{ ec2_tag_Environment }}": true
"{{ ec2_tag_aws_autoscaling_groupName }}": true
sourceName: "{{ ec2_tag_hostname }}"
body_format: "json"
headers:
Content-Type: "application/json"
Accept: "application/json"
output:
"changed": false,
"connection": "close",
"content": "{\"status\":{\"result\":\"ERROR\",\"message\":\"invalid tag: {{ ec2_tag_Environment }}\",\"code\":400}}",
"content_length": "91",
"content_type": "application/json",
"date": "Tue, 22 Jun 2021 11:24:33 GMT",
"elapsed": 0,
"invocation": {
"module_args": {
"attributes": null,
"backup": null,
"body": {
"sourceName": "eks-****-2-2a-worker53",
"tags": {
"{{ ec2_tag_Environment }}": true,
"{{ ec2_tag_KubernetesCluster }}": true,
"{{ ec2_tag_aws_autoscaling_groupName }}": true
}
},
"body_format": "json",
"client_cert": null,
"client_key": null,
"content": null,
"creates": null,
"delimiter": null,
"dest": null,
"directory_mode": null,
"follow": false,
"follow_redirects": "safe",
"force": false,
"force_basic_auth": false,
"group": null,
"headers": {
"Accept": "application/json",
as you see the "ec2_tag_hostname" is replace with variable value but 'ec2_tag_Environment', 'ec2_tag_KubernetesCluster' and 'ec2_tag_aws_autoscaling_groupName' is not getting replace as these are key of json object.
YAML does not support dynamic keys in any circumstance that I'm aware of; you will want to move the interpolation up one level in order to achieve what you're after:
body: >-
{{
{
"tags": {
ec2_tag_KubernetesCluster: True,
ec2_tag_Environment: True,
ec2_tag_aws_autoscaling_groupName: True,
},
"sourceName": ec2_tag_hostname,
}
}}
body_format: "json"
That works because unlike yaml, python (and thus jinja2) does support dynamic dict keys
I have a datatable in Laravel, here is my code
$(function() {
var user_id = $(this).data('user_id');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
paging: true,
info: true,
autoWidth: false,
responsive: true,
processing: true,
serverSide: true,
ajax: "{{ route('detail.user', 'user_id')}}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false,
},
{
data: 'title',
name: 'title',
orderable: false,
},
{
data: 'content',
name: 'content',
orderable: false,
visible: false,
},
{
data: 'progress',
name: 'progress'
},
{
data: 'status',
name: 'status'
},
{
data: 'kpi',
name: 'kpi'
},
{
data: 'target_selesai',
name: 'target_selesai'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
$('body').on('click', '.detailProduct', function() {
...
});
$('#saveBtn').click(function(e) {
...
});
$('body').on('click', '.deleteProduct', function() {
...
});
});
I want to get user_id value from url parameter (ex: http://127.0.0.1:8000/detail/1000000004 ), I've tried code above, but it will return empty value.
Seems like I write wrong code to get url parameter. Because, If I change the ajax: "{{ route('detail.user', 'user_id')}}", into ajax: "{{ route('detail.user', '1000000004')}}", the program will works as expected. What sould I do? thanks in advance
You can not set variable in PHP code using JavaScript. You should not use PHP code on dynamic JavaScript code. There are 2 alternatives :
Use static path instead of Laravel route, just change ajax: "{{ route('detail.user', 'user_id')}}" to ajax: "/detail/"+user_id
Send user_id variable using Laravel blade view arg. on your controller define user_id like below:
return view('index',
['user_id', 1000000004]
);
then call it on the blade as php variable ($user_id) example ajax: "{{ route('detail.user', $user_id)}}"
be sure url in routes/web.php, provide one variable passing, ex /name-routes/{id}
and then in your controller function take the data id, function function_name($id){ }
and the last be sure format return json with format be like { data : [ name : "value name 1", name : "value_name2" ] }
I have an article post service, which has an upload form with uppy.io
Everything works great, but I need to edit those articles and their linked images.
How can I prefill already uploaded images to the uppy.io DashBoard?
My actual code:
<div class="DashboardContainer"></div>
<!-- AJAX Uploading for Add Post -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.8.0/uppy.min.js"></script>
<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.11.0/es_ES.min.js"></script>
<script>
const uppy = Uppy.Core({
debug: true,
autoProceed: true,
restrictions: {
maxFileSize: 600000,
maxNumberOfFiles: 10,
minNumberOfFiles: 1,
allowedFileTypes: ['.jpg', '.jpeg', '.png', '.gif']
},
locale: Uppy.locales.es_ES
})
.use(Uppy.Dashboard, {
inline: true,
target: '.DashboardContainer',
replaceTargetContent: true,
showProgressDetails: true,
note: 'Sólo imágenes, hasta 10 fotos, de no más de 800kb',
height: 350,
width: '100%',
metaFields: [{
id: 'name',
name: 'Name',
placeholder: 'Nombre del fichero subido'
},
{
id: 'caption',
name: 'Caption',
placeholder: 'Describe la imagen que estás subiendo'
}
],
browserBackButtonClose: true,
plugins: ['Webcam']
})
.use(Uppy.XHRUpload, {
endpoint: "{{ route('save-image-ajax') }}",
formData: true,
fieldName: 'files[]',
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
},
})
uppy.on('upload-success', (file, response) => {
response.status // HTTP status code
response.body // extracted response data
// do something with file and response
$('<input>', {
type: 'hidden',
name: 'imageID[]',
value: response.body.imageID
}).appendTo("#add");
})
uppy.on('complete', result => {
console.log('successful files:', result.successful)
console.log('failed files:', result.failed)
})
</script>
The form works great for publishing an article, I just want to edit them, even the linked images.
You can prefill images from url (first converting the remote image into blob):
fetch({{your_image_url}})
.then((response) => response.blob())
.then((blob) => {
uppy.addFile({
name: "image.jpg",
type: blob.type,
data: blob
});
});
And then, set the state of the loaded images to "Completed" to avoid Uppy re upload them:
uppy.getFiles().forEach(file => {
uppy.setFileState(file.id, {
progress: { uploadComplete: true, uploadStarted: false }
})
})
Also, the property "autoProceed" must be false in the Uppy object configuration.
Source: https://github.com/transloadit/uppy/issues/1112#issuecomment-432339569
I want to use filepond as my product editor.
How to load current images that is stored on the server? So visitor can decide wheter to change the current images or add a new image.
It's like this form:
=> https://stackoverflow.com/users/edit/{your_user_id}
prefill some data if it has been filled before, but shows nothing when its hasnt been filled before.
I'm mentioning this filepond:
=> https://github.com/pqina/filepond
This is my code on how I show a default image.
const inputElement = document.querySelector('#image');
const pond = FilePond.create(inputElement, options);
pond.setOptions({
allowImagePreview: true,
acceptedFileTypes: ['image/*'],
server: {
process: {
url: 'upload.php',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
},
revert: {
url: 'deleteTmpImage.php',
method: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'_method': 'DELETE',
},
},
load: (uniqueFileId, load) => {
fetch(uniqueFileId)
.then(res => res.blob())
.then(load);
},
},
files: [
{
source: 'https://www.example.com/default_image.jpg',
options: {
type: 'local',
}
},
]
});
Have anyone got issue in ajax post request in laravel 5.4. I am unable to get request data in controller.
Ajax request is something like this:
$.ajax({
data: { 'selected_data':[2,4,5] },
type: "POST",
url: "{{ url('test') }}",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
success: function (res) {
console.log(res)
},
});
In controller method, i am just doing
dd($request->all());
But getting empty array. can anyone help me with this issue?
Thanks!
Instead of this:
$.ajax({
data: { 'selected_data':[2,4,5] },
type: "POST",
url: "{{ url('test') }}",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
success: function (res) {
console.log(res)
},
});
Try this:
$.ajax({
data: { selected_data:[2,4,5], _token: "{{csrf_token()}}" },
type: "POST",
url: "{{ url('test') }}",
success: function (res) {
console.log(res)
},
});