I'm building a webrtc group video call, so far so good everything is working but the video resolution of the other users are too large. I've tried some solutions given on other questions like:
var video_constraints = {
mandatory: {
maxHeight: 480,
maxWidth: 640
},
optional: []
};
webrtc.mediaDevices.getUserMedia({
audio: true,
video: video_constraints
}, onsuccess);
But still no progress, instead my local video go blank. Here is my code:
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Group Video Call</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="container">
<!--============================ Main Starts
=============================================-->
<section>
<div class="ui container">
<div class="ui two column stackable grid">
<div class="ui ten wide column">
<div class="ui segment" id="segment">
<!--=========================== local camera =============================================-->
<div class="ui six wide column" id="local">
<img id="local-image" class="ui large image">
<video id="local-video" class="ui large image" autoplay></video>
</div>
</div>
</div>
<div class="video-actions">
<button value="submit" class="outBtn">Make room public</button>
<button value="submit" class="outBtn">Leave</button>
<button value="submit" id="muteBtn">Mute</button>
<button value="submit" class="outBtn">Kick</button>
</div>
<!--========================== reomte cameras
=============================================-->
<div id="remote-videos" class="ui stackable grid">
<div >
<img class="ui centered small image">
</div>
<div >
<img class="ui centered small image">
</div>
<div >
<img class="ui centered small image">
</div>
<div >
<img class="ui centered small image">
</div>
</div>
</div>
<!--======================== remote video template
=============================================-->
<script id="remote-video-template" type="text/x-handlebars-template">
<div id="{{ id }}" class="remote-img">
</div>
</script>
<div class="clr"></div>
</div>
</section>
</div>
<!--================================ scripts
==============================================-->
<script src="../functions/node_modules/jquery/dist/jquery.min.js"></script>
<script src="../functions/node_modules/handlebars/dist/handlebars.min.js ">
</script>
<script src="../functions/node_modules/simplewebrtc/out/simplewebrtc-with-
adapter.bundle.js"></script>
<script src="../functions/node_modules/semantic-ui-css/semantic.min.js">
</script>
<script src="js/app.js"></script>
</body>
</html>
JAVASCRIPT:
window.addEventListener('load', () => {
// for Group Creator Video
const localImageEl = $('#local-image');
const localVideoEl = $('#local-video');
// Joined Friends Videos
const remoteVideoTemplate = Handlebars.compile($('#remote-video-
template').html());
const remoteVideosEl = $('#remote-videos');
let remoteVideosCount = 0;
let height = 200;
let width = 200;
// Hiding cameras until they are initialized
localVideoEl.hide();
// initial rules for form verification
formEl.form({
fields: {
roomName: 'empty',
username: 'empty',
},
});
// create the webrtc connection
const webrtc = new SimpleWebRTC({
// the id dom element that will hold "our" video
localVideoEl: 'local-video',
// the id dom element that will hold remote videos
remoteVideosEl: 'remote-videos',
// for gaining video and voice access
autoRequestMedia: true,
debug: false,
detectSpeakingEvents: true,
autoAdjustMic: false,
});
// if (localCameraacess==1)
webrtc.on('localStream', () => {
localImageEl.hide();
localVideoEl.show();
});
// adding remote videos
webrtc.on('videoAdded', (video, peer) => {
// eslint-disable-next-line no-console
const id = webrtc.getDomId(peer);
const html = remoteVideoTemplate({ id });
if (remoteVideosCount < 5){
if (remoteVideosCount === 0) {
remoteVideosEl.html(html);
} else {
remoteVideosEl.append(html);
}
$(`#${id}`).html(video);
//$(`#${id} video`).addClass('ui image medium'); // for video
image to be responsive not good through
remoteVideosCount += 1;
}
});
// registeration of new chat room
const createRoom = (roomName) => {
console.info(`Creating new room: ${roomName}`);
webrtc.createRoom(roomName, (err, name) => {
formEl.form('clear');
showChatRoom(name);
postMessage(`${username} created chatroom`);
});
};
// Join existing Chat Room
const joinRoom = (roomName) => {
// eslint-disable-next-line no-console
console.log(`Joining Room: ${roomName}`);
webrtc.joinRoom(roomName);
showChatRoom(roomName);
postMessage(`${username} joined chatroom`);
};
});
I want to use a resolution of 320 x 240 on all remote video screens and also if i could get some code snippet on how to mute both VIDEO and AUDIO. And also leaving a connected peer. I appreciate any help.
Thanks for all the answers, but i found a fix from a question asked already:
WebRTC video constraints not working
All i did was place the code above the 'window' function and it worked.
Still don't know if it will work on firefox.
Related
I want to capture the elements inside a WebView in react native.
This is the html of the WebView
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.4.1/dist/html2canvas.min.js" integrity="sha256-6H5VB5QyLldKH9oMFUmjxw2uWpPZETQXpCkBaDjquMs=" crossOrigin="anonymous"></script>
</head>
<body>
<div class="certificateDOM">
<div class="container-fluid">
<div class="row d-flex justify-content-center" id="certificateBlock">
<img
class="imageTemplate"
src="file:///android_asset/images/certificate1.png"
alt="certificate Image" />
<span class="certificateId"></span>
<span class="certificateName">is here by awarded the certification of achievement for the successfull completion of <b class='certificateBoldName'></b></span>
<span class="userName"></span>
<img class="certificateSign" src="file:///android_asset/images/authority1.png" alt="authority sign" />
</div>
</div>
</div>
</body>
</html>
This will look like this :
The student name and authority signature are absolutely positioned on the image (I have not included styles for these).
The image src is a 'file:///' url due to how android references the android assets.
This is the function which uses html2canvas to convert the element to a canvas:
const takeCertificateSnap = ()=>{
window.scrollTo(0, 0);
return html2canvas(document.querySelector('#certificateBlock'), {
allowTaint:true,
useCORS: true,
});
};
const getCertificateImageDataUrl = ()=>{
const canvasPromise = takeCertificateSnap();
canvasPromise.then((canvas) => {
const dataUrl = canvas.toDataURL();
const obj={
action:'getCertificateImageDataUrl',
data: {
dataUrl,
}
};
window.ReactNativeWebView.postMessage(JSON.stringify(obj));
}).catch((e) => {
const errmsg={
action:'error',
data: {
cause: 'html2canvas',
error: err.message,
}
};
window.ReactNativeWebView.postMessage(JSON.stringify(errmsg));
});
}
the image I am getting as a result of capturing the element as canvas and converting it to a dataUrl is this
Although the image is of same-origin, the image is not being rendered.
I saw couple of posts and included allowTaint and useCORS options, but it did not help.
Any help is appriciated.
I followed this tutorial https://css-tricks.com/creating-vue-js-component-instances-programmatically/
My component :
const button = Vue.component('button', {
props: {
id: String,
color: String
},
data: function() {
return {
count: 0
}
},
template:
`
<div class="button">
{{ count }}
</div>
`
});
The html :
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="app">
<main id="main" ref="container">
<span #click="add">Add</span>
</main>
</div>
</body>
<script src="vue.js"></script>
<script src="app.js"></script>
</html>
All is fine but at this step I get the error "instance is not a html node" How to make vue component as a html node ?
ComponentClass = Vue.extend(button)
instance = new ComponentClass()
this.$refs.container.appendChild(instance.$el)
I have been trying to get chips autocomplete to work as part of a project.
I have stripped code right back to remove any odd effects and replicated code as on the Materialize site. As in attached code I can get autocomplete to work as expected but not with chips.
I have tried with Chrome and Edge browsers and various combinations of tags and class names but still unable to make it work.
So now I need some help!
What have I missed?
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container" >
<!-- autocomplete from materialize web site -->
<div class="row">
<div class="col s12">
<div class="input-field col s6">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">from materialize web site</label>
</div>
</div>
</div>
<!-- chip autocomplete from materialize web site -->
<div class="row">
<div class="col s6">
<div id="chips-autocomplete" class="chips chips-autocomplete " ></div>
</div>
</div>
</div> <!-- container end -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
options={"data": {"abel":null,"baker":null,"charlie":null},
"placeholder":'fred'}
console.log (options)
var autoElems = document.querySelectorAll('.autocomplete');
var attemptElems = document.getElementById("attempt");
var chipsElems = document.getElementById("chips-autocomplete");
var auto = M.Autocomplete.init(autoElems, options);
var chips = M.Chips.init(chipsElems, options);
});
</script>
</body>
</html>
The data init for chips-autocomplete is incorrect. From the docs:
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': null
},
limit: Infinity,
minLength: 1
}
});
With Vanilla JS:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.chips-autocomplete');
var instances = M.Chips.init(elems, {
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': null
},
limit: Infinity,
minLength: 1
}
});
});
you are simply setting data (in quotes, when there should be no quotes). It should be autocompleteOptions as an object, and then data inside this.
I have an issue with loading Leaflet map using Vue.js and Bulma tab components (via Buefy).
If map is placed inside tab then it does not load all tiles until browser window is resized.
If map is placed outside of Bulma tabs component then it loads without any issue.
Calling map.invalidateSize() seems to help, but to do it automatically when tab changes I have to call it using setTimeout and put very big delay, like 1sec - which is very ugly.
How to get this working without this invalidateSize workaround?
Example with the issue: https://codepen.io/alxxnder/pen/zyYxwd
Example without the issue: https://codepen.io/alxxnder/pen/LMYEjr
Code:
new Vue({
el: '#app',
data: {
map: null,
},
methods: {
invalidateSize: function() {
this.map.invalidateSize();
}
},
mounted() {
this.map = L.map('map').setView([38.63, -90.23], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Leaflet Test</title>
<link rel="stylesheet" href="https://unpkg.com/buefy#0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css">
</head>
<body>
<div class="section">
<div class="container" id="app">
<b-tabs position="is-centered">
<b-tab-item label="Tab 1">
<div class="section">
Tab 1
<div class="map" id="map" style="height: 400px; width: 100%"></div>
<button class="button is-info" #click="invalidateSize()">invalidateSize</button>
</div>
</b-tab-item>
<b-tab-item label="Tab 2">
<div class="section">
Tab 2
</div>
</b-tab-item>
</b-tabs>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy#0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
</html>
As explained in Data-toggle tab does not download Leaflet map, the issue is caused by the fact that your map container does not have yet its full size when you initialize it. You may understand it more easily if your map had been in an initially hidden tab (e.g. in tab 2).
As for your initially active tab (i.e. tab 1), it is probable that Buefy / Bulma still takes some time to reveal the tab content.
Since there is no event when the tab transition completes, you have to wait for the transition duration before calling the invalidateSize method. In your case, 300ms seems to be fine.
Then you should also call it again when the user changes the tab (see Buefy tabs events), otherwise should the browser had changed size while your tab was hidden, the same issue would happen again.
Demo with maps in the 2 tabs:
new Vue({
el: '#app',
data: {
map: null,
map2: null,
tabMaps: []
},
methods: {
invalidateSize: function(tabIndex) {
setTimeout(() => {
if (typeof tabIndex === "number") {
this.tabMaps[tabIndex].invalidateSize();
} else {
// invalidate all maps
this.tabMaps.forEach(map => {
map.invalidateSize();
});
}
}, 300);
}
},
mounted() {
this.map = L.map('map').setView([38.63, -90.23], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
// map2 in tab2
this.map2 = L.map(this.$refs.map2).setView([38.63, -90.23], 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
this.map2
);
this.tabMaps.push(this.map); // 0
this.tabMaps.push(this.map2); // 1
this.invalidateSize();
}
})
<link rel="stylesheet" href="https://unpkg.com/buefy#0.7/dist/buefy.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css">
<div class="section">
<div class="container" id="app">
<b-tabs #change="invalidateSize" position="is-centered">
<b-tab-item label="Tab 1">
<div class="section">
Tab 1
<div class="map" id="map" style="height: 400px; width: 100%"></div>
<button class="button is-info" #click="invalidateSize()">invalidateSize</button>
</div>
</b-tab-item>
<b-tab-item label="Tab 2">
<div class="section">
Tab 2
<div class="map" ref="map2" style="height: 400px; width: 100%"></div>
</div>
</b-tab-item>
</b-tabs>
</div>
</div>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy#0.7/dist/buefy.min.js"></script>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
I am doing my application in MVC. I have registration and Login links. I have implemented Login link in all pages. If i click login it is moving to the server side(controller) and opening. MY problem is from whatever page i click login it needs to open in the same window in popup. It means that it doesn't go the server side.
My code is
#model SYTMain.Models.Login
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout_for_login.cshtml";
//Layout = "~/Views/Shared/_Layout_for_login_registration .cshtml";
}
<center><h2>Login</h2></center>
<div id="dialog-modal" title="Login">
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "Login failed. Check your login details.");
<div style=" margin-bottom: 400px;">
<fieldset>
<legend>Login</legend>
<div class="editor-label">
#Html.LabelFor(u => u.EmailID)
</div>
<div class="editor-field">
#Html.TextBoxFor(u => u.EmailID)
#Html.ValidationMessageFor(u => u.EmailID)
</div>
<div class="editor-label">
#Html.LabelFor(u => u.Password)
</div>
<div class="editor-field">
#Html.PasswordFor(u => u.Password)
#Html.ValidationMessageFor(u => u.Password)
</div>
#*<div class="editor-label">
#Html.CheckBoxFor(u => u.RememberMe)
#Html.LabelFor(u => u.RememberMe)
</div>*#
<input type="submit" value="Log In" />
</fieldset>
</div>
}
</div>
Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
#*<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />*#
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
#Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>
<script src="~/Scripts/Popup/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/Popup/jquery-ui-1.8.11.js"></script>
#Scripts.Render("~/bundles/modernizr")
<script>
$(function () {
$("#dialog-modal").dialog({
width: 400,
height: 200,
show: {
effect: "shake",
duration: 100
},
hide: {
effect: "explode",
duration: 1000
}
});
});
</script>
</head>
<body style=" margin: 0px auto;overflow: scroll; overflow-x: hidden; /* width: 1330px; */height: auto;">
<div class="layoutouter">
<div class="layoutlogo">
#Html.ActionLink("Sell Your Time", "Index", "Home")
</div>
<div class="layoutmenu">
#if (!string.IsNullOrEmpty(Convert.ToString(Session["EmailID"])))
{
#Html.ActionLink("Signout", "Logout", "CU")
}
else
{
#Html.ActionLink("Register", "Create", "CU")
}
</div>
<br /><br />
#*<strong>Welcome #Session["EmailID"]</strong>*#
<div>
#RenderSection("featured", required: false)
</div>
</div>
<div style="width:1000px ; margin:0px auto;">
#RenderBody()
</div>
<div class="layoutfooter">
<div class="layoutfooter_data">
<div class="layout_location">
#Html.ActionLink("Change Location", "yy", "zz")
<span>|</span>
</div>
<div class="layout_feedback">
#Html.ActionLink("Feedback", "yy", "zz")
<span>|</span>
</div>
<div class="layout_help">
#Html.ActionLink("Help", "yy", "zz")
</div>
</div>
<div class="footer_copy">
<p>© #DateTime.Now.Year - acutesoftsys</p>
</div>
<div class="footer_condition">
<div class="footer_term">
<span>|</span>
#Html.ActionLink("Term & Condition", "", "")
</div>
<div class="footer_policy">
#Html.ActionLink("Privacy Policy", "yy", "zz")
</div>
</div>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
My controller code is
[HttpPost, ValidateInput(false)]
public ActionResult Login(Login loginDetails)
{
if (ModelState.IsValid)
{
using (SYTEntities context = new SYTEntities())
{
var LoginUser = context.tblUsers.Where(a => a.EmailID == loginDetails.EmailID && a.Password == loginDetails.Password).FirstOrDefault();
if (LoginUser != null)
{
FormsAuthentication.SetAuthCookie(loginDetails.EmailID, loginDetails.RememberMe);
Session["EmailID"] = LoginUser.EmailID;
Session["UserID"] = LoginUser.UserID;
return RedirectToAction("CalendarView", "Appt", new { CustomerUserid = Session["UserID"]});
// return RedirectToAction("Details/" + Session["UserID"]);
}
else
{
ModelState.AddModelError("", "Login data is incorrect!");
}
}
}
return View(loginDetails);
}
Please help me to achieve this .
Thanks in Advance
Your controller code should look something like this
public ActionResult YourControllerAction( int Userid )
{
//Add your logic here
return PartialView( "UserDetails", model );
}
Your partial view should look like this
#model Models.Login
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>login</title>
</head>
<body>
<div>
/*Your markup here*/
</div>
</body>
</html>
Your jQuery code should look something like this.
$('#loginlinkid').on('click', function(evt) {
var $loginDiv = $('#PopUpDiv')
$.get(urlOfYourAction, function(data) {
$loginDiv.replaceWith(data);
});
//Add code to open popup here. eg..bootstrap modal dialog
});
Similar post here Render a partial view inside a Jquery modal popup on top of a parent view