Hi all I am using Signalwire's video calling functionality to make a video calling app. I am facing one issue here, as most of the times, we use video calling through phones or small screen sizes the height of the video is very small there.
Is there any way to increase the height of that div on which the video stream is getting injected?
Here What it looks like-
In mobile my video screen is quite small I want to increase the height.
I tried something like-
$scope.roomObject = new SignalWire.Video.RoomSession({
token: token,
rootElement: document.getElementById('root'), // an html element to display the video
audio: true,
video: {
width: { min: 720},
height: { min: 1280}
}
}
});
This does change the inner video into portrait mode but the issue remains, I can't increase the height.
Note- increasing the height of div not working I can increase the width though.
Thanks
It sounds like you're trying to extend the video canvas vertically to fill the entire screen. While you can change the aspect ratio of your video stream itself (which is how you're swapping your stream to portrait), you can't change the aspect ratio of the whole canvas.
Related
I have an Electron desktop app which has a feature of showing a user's local videos in a 'lightbox' using jQuery lightgallery. It's a bit of a complicated setup as I am using an iframe loaded with videojs within lightgallery to present the videos.
I've wrestled with being able to handle videos of varying aspect ratios – settings that work for 16:9 don't work for 4:3, etc.
The best I've got so far is the first image below: the video's aspect ratio is preserved but the "control bar" fills the entire container which lightgallery has provided.
Is there some way to get the "control bar" to size to the width of the video?
Further details
All the videos are loaded dynamically so I don't know their aspect ratios. The first two images below result from using:
<video id="videoPlayer" class="video-js vjs-default-skin vjs-16-9"></video>
I've tried using vjs-fluid or vjs-fill but that resulted in the third image below with the scroll bars.
Video: 4:3
Video: 16:9
Video: 4:3 - Using vjs-fluid
Player set-up code
var player = videojs("videoPlayer", {
controls: true,
autoplay: false,
preload: 'auto'
}, function () {
this.src(videoPath);
this.poster(posterPath);
this.load();
});
Im using a JS Plugin I found on GitHub that makes a video header parallax, the problem is that when I run it responsive for phone the video turns black, im trying to change the video for an image when responsive mode.
I tried with #mediatag but can't make it work.
<main style="height: 100%">
<video class="bv-video"></video>
</main>
<script>
const backgroundVideo = new BackgroundVideo('.bv-video', {
src: [
'img/01.mp4',
'img/01.mp4'
],
onReady: function() {
// Use onReady() to prevent flickers or force loading state
const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
vidParent.classList.add('bv-video-wrap--ready');
}
});
</script>
Link for the plugin - Licensed under the MIT license
Using media queries, its simple.
All you would need to do is write a media query in your css to display your image at a maximum screen width and display none for your video. Also set the image display to none outside of the media query so it defaults to that until the media query detects the mobile screen width and changes it.
I have a button that allows a user to preview their video that comes through their camera. The video stream is successfully displayed but I am struggling to find out how to alter the dimensions of the displayed video. This is what I have:
HTML:
<div id="local-media"></div>
JavaScript:
previewMedia = new Twilio.Conversations.LocalMedia();
Twilio.Conversations.getUserMedia().then(
function (mediaStream) {
previewMedia = new Twilio.Conversations.LocalMedia();
previewMedia.on('trackAdded', function (track) {
if(track.kind === "video"){
track.dimensions.height = 1200;
track.on('started', function (track) { // DOES NOT FIRE
console.log("Track started");
});
track.on('dimensionsChanged', function (videoTrack) { // DOES NOT FIRE
console.log("Track dimensions changed");
});
}
previewMedia.addStream(mediaStream);
previewMedia.attach('#local-media')
}),
function (error) {
console.error('Unable to access local media', error);
};
);
The trackAdded event fires but I don't get the started or dimensionsChanged events firing and setting the track.dimensions.height does not work.
I can shrink the video by using:
div#local-media {
width:270px;
height:202px;
}
div#local-media video {
max-width:100%;
max-height:100%;
}
but I cannot increase it beyond 640x375 pixels.
Based upon some interactions with our support team it seems you should first try setting the size of a <div> using CSS before attaching the video track. This technique is used in the quickstart application.
https://www.twilio.com/docs/api/video/guide/quickstart-js
Then, try passing in the optional localStreamConstraints when calling inviteToConversation
https://media.twiliocdn.com/sdk/js/conversations/releases/0.13.5/docs/Client.html#inviteToConversation
It looks like you can specify the dimensions for video:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
which is then used by getUserMedia (the WebRTC function)
Keep in mind that you can adjust the capture size locally.This is the size of the Video Track being captured from the camera.
However, depending on network conditions, the WebRTC engine in your browser (and the receivers browser) may decide that the video resolution being captured is too high to send across the network at the desired frame rate (you can also set frame rate constraints on the capturer if you'd like to trade off temporal vs spatial resolution). This means that the receiving side may receive a video feed that is smaller than what you intended to send. To overcome this, you can use CSS to style the <video> element to ensure that it stays at a certain size, which will result in video upscaling/downscaling where required on the receiving side.
We plan to update our documentation with more of these specifics in the future. But you can always find additional support from help#twilio.com.
you can adjust the screensize using following css. you can find this css file in Quickstart->public->index.css
Remote Media Video Size
div#remote-media video
{
width: 50%;
height: 15%;
background-color: #272726;
background-repeat: no-repeat;
}
I have a video (let's call it composite video) composed by multiple other videos concatenated using some pattern. For example, see the screenshot of the videos below, composed by two and four other videos, respectively:
However, I need to display it differently: One main, larger, video and N-1 video thumbnails, where N is the total number of videos. Here are this other display corresponding to the videos above:
To display the main I'm using a combination of HTML and CSS to position the video I want in the larger div. It runs smoothly, no matter the number of videos in the composite videos.
To display the thumbnails, I'm using <canvas> to draw the parts I want:
video.addEventListener('play', function() {
(function loop() {
drawThumbnails();
setTimeout(loop, 1000 / 30); // drawing at 30fps
})();
}, false);
function drawThumbnails() {
for (var i = thumbs.length - 1; i >= 0; i--) {
drawThumbnail(thumbs[i]);
};
}
function drawThumbnail(thumb) {
var thumbNumber = Number(thumb.id.match(/\d+/g));
var canvasContext = thumb.getContext('2d');
var thumbCoordinates = getVideoCoordinates(thumbNumber);
var srcX = thumbCoordinates.column * videoWidth;
var srcY = thumbCoordinates.row * videoHeight;
canvasContext.drawImage(
video, srcX, srcY, videoWidth, videoHeight, // Source
0, 0, thumb.width, thumb.height); // Destination
}
It was working well for 3 (sometimes 4) videos. However, as the number of videos in the composite video increases, the videos in the thumbnails start to freeze and run not in a smooth way. This is probably happening because there's too much image processing being done at the same time.
I think the proper way to do it is, somehow, using <video> and methods specific for videos, not for images. I've also tried to use the same src in the multiple <video> tags (one for each thumbnail) and add eventListeners to play/pause the videos in the thumbnails once the main video is played/paused. That's not very efficient, particularly because videos can get out of sync sometimes, when seeking/buffering.
Is there a way of using only one video in multiple <video> tags and use only one of them (in my case, the one that contains the main video) to control all the others? In case there's no way of doing that, is there an alternative approach for my problem?
Thanks a lot,
P.S. Having multiple, separated, videos is not an option in my situation. It would take a very long time to process the input video and divide it in multiple videos.
You can certainly reference the same video across multiple video elements. Cloning the original and appending them as thumbnail videos might alleviate some of the tedium.
Iterating over the thumbnails and .play()ing them should be fine so long as you set their currentTime with that of the main video prior to playing, to minimize drift. There may be some need to wait for canplay to fire on the main video and/or the thumbnails depending on the exact experience you're looking to deliver.
If each thumbnail is given a parent container you could possibly position the video element serving as your thumbnail such that only the portion of the video you care to see is visible, clipping the rest.
FWIW, CSS masking might be of interest to you as a performance optimization if it helps the compositing performance.
You will need to manually coordinate playing/pausing all of the video elements, but that should be easy enough to do with a facade object that handle the play pause of all the "linked" video elements.
I know I'm posting late, and you may have already found an answer. However, if anyone else comes across this question, here is my answer:
You can use multiple video elements with the same source. The way to do it is with css.
.wrapper {
height: /*height of one video*/;
width: /*width of one video*/;
overflow: hidden;
}
video {
position: relative;
top: /*height offset*/;
left: /*width offset*/;
}
And HTML
<div class="wrapper">
<video src="myvideo.mp4"></video>
</div>
So, if I was doing the top right video, and each one was 250px by 250px, I would set my wrapper height and width to 250px and my video top to 0px and my video left to 250px
What's the format of the main video? Is it an on demand mp4/webm file?
If you still want to go with your approach of grabbing frames and paint them but is facing performance issues, consider using web workers for the heavy jobs. Here you can find some examples of video/canvas manipulation with web workers.
I have an image, the full image size is 1920x1080. When displayed on screen in one place it's 128x128, and you can move it to another part of the screen and it resizes to 50% using jQuery's .animate() function, then calls $(el).resizable(), but the resizable region is 1920x1080 so you have to scroll down, way past the image to get to the resize handles.
I created a custom function to animate the upscaling of the image and 'destroy' the resize, then after upscaling the image it recalls resize and still the handles are 1920x1080 regardless of how big the image is on the screen. I have even tried, after calling resizable on the image, to directly manipulate the CSS of the ui-wrapper to match the size of the image, but it always resets to 1920x1080. Below is a snippet of code that I'm using trying to directly manipulate the wrapper... unsuccessfully.
Anyone has any ideas how I can get resizable() to put the handles at the edge of the image regardless how big or small the image is, instead of placing them at the edges of the full sized image. Thank you!
el.resizable('destroy');
var myHeight = el.height(),
myWidth = el.width();
el.resizable({
aspectRatio: that.calculateAR(el)
})
el.parent('.ui-wrapper').css({
width: myWidth + "px",
height: myHeight + "px"
})