search

maartenbreddels / ipywebrtc

WebRTC for Jupyter notebook/lab
MIT License
243 stars 40 forks source link

Control size (height x width) of video playback. #47

Open vincenzon opened 5 years ago

vincenzon commented 5 years ago

When I playback a video, it is very large and I have to scroll around to see all of it. Is it possible to control the size of the video using the widget? I tried setting height and width in the layout but that just changed the size of the window one could watch the video through (I hope that makes sense) not the size of the underlying video.

martinRenou commented 5 years ago

If you are using a VideoStream, my_video_stream.video.width = 50 should work. If it doesn't, then it's a bug, the stream should have the same size as the underlying video widget.

If you are using a VideoRecorder, my_video_recorder.video.width = 50 should work. And when you display the recorded video, it should have the size you specified.

vincenzon commented 5 years ago

I did this:

video_stream = VideoStream.from_url(video_file)
video_stream.video.width = 100
video_stream.video.height = 100
video_stream

and it still plays very large. Is that the syntax that should work?

vincenzon commented 5 years ago

This way of playing the video respects the height and width setting:

video_stream = VideoStream.from_url(video_file)
video_stream.video.width = 100
video_stream.video.height = 100
video_stream.video

I'm not sure what the difference is in the invocations.

martinRenou commented 5 years ago

video_stream.video is a Video widget while video_stream is a VideoStream widget. You can see video_stream.video as the input video for the VideoStream widget.

The main difference between Video and VideoStream widgets is that if you display a Video widget multiple times, the views won't be synchronized, while if you do that with a VideoStream widget they will be synchronized. The fact that they are synchronized is crucial for making it possible to record images, sound or videos using the ImageRecorder, the AudioRecorder or the VideoRecorder.

What you found is a bug. The size of the VideoStream widget should be the same as the Video widget.

maartenbreddels commented 5 years ago

I thought this would work:

video_stream.layout.width = '50px'

But it does not, it will add the css to the div, but the child video element doesn't care about it. I'm not sure what the best strategy would be for VideoStream (and Video).

martinRenou commented 5 years ago

Video already has width and height attributes. I guess we "just" need to add width and height attributes to VideoStream and link them to those from the underlying Video widget. Then on the Javascript size, we need to set the attributes of the video element, as we do for the Video widget.

maartenbreddels commented 5 years ago

But it seems you cannot use flexbox, and i'm not sure why.

martinRenou commented 5 years ago

Why do you want to use flexbox? I don't think it's a CSS issue, there is no CSS to add in my opinion. We just need to set the width and height attributes of the video DOM element in the VideoStream widget.