triniwiz / nativescript-webrtc

Apache License 2.0
42 stars 25 forks source link

Wrong Video Scaling iOS on new beta release #25

Closed Who-Code closed 4 years ago

Who-Code commented 5 years ago

Again i have the issue on ios that the picture is stretched in WebRTCView.

My Version of nativescript-webrtc is '2.0.0-alpha.18'.

Following Layouts i tried but on every layout the vide is stretched into the view:

<StackLayout id="localVideoViewLayout" width="100" height="50" row="1" col="1" verticalAlignment="top" class="localVideoView">
                <ui:WebRTCView class="local-video-view" scaling="fill" id="localVideoView" loaded="videoLoaded"/>
              </StackLayout>

<StackLayout id="localVideoViewLayout" width="100" height="50" row="1" col="1" verticalAlignment="top" class="localVideoView">
                <ui:WebRTCView class="local-video-view" scaling="fit" id="localVideoView" loaded="videoLoaded"/>
              </StackLayout>

My last issue was marked as solved in the new version but seems it is currently not working completely.

ljcp commented 5 years ago

@triniwiz it's not working for me neither any idea what could be ?

when i set the scaling the video goes black but i don't see any error log

ljcp commented 5 years ago

@rkeller1 what was the last version that worked for you ?

Who-Code commented 5 years ago

On iOS it never worked, I now changed it and calculated the ratio and scaling myself. So the webrtc view always is inside a parent view and either overlaps it or fits in it.

ljcp commented 5 years ago

@rkeller1 would you be so kind to share that code with me ?

Who-Code commented 5 years ago

I add it to my to-do list for tomorrow, currently I'm away from my PC.

ljcp commented 5 years ago

I opened an issue on the ios project with the possible problem https://github.com/triniwiz/fancy-webrtc-ios/issues/2

Who-Code commented 5 years ago

@ljcp Here is the example, sorry for being late:

setupRemoteVideoContainer() {
        const platformModule = require("tns-core-modules/platform");
        const remoteVideoContainer: StackLayout = this.page.getViewById('remoteVideoViewLayout');
        //let initialSizing: number = platformModule.screen.mainScreen.widthDIPs;
        let initialSizingHeight: number = platformModule.screen.mainScreen.heightDIPs;
        let initialSizingWidth: number = platformModule.screen.mainScreen.widthDIPs;
        let newWidth: number = initialSizingWidth;
        let newHeight: number = initialSizingHeight;
        if (this.remoteView) {
            if (this.remoteStream) {
                let track = this.remoteStream.videoTracks[0];
                if (track) {
                    let trackHeight: number = track.settings.height;
                    let trackWidth: number = track.settings.width;
                    if (this.remoteSettings.height) {
                        trackHeight = this.remoteSettings.height;
                        trackWidth = this.remoteSettings.width;
                    }

                    let ratio: number = trackHeight / trackWidth;;
                    newHeight = ratio * newWidth;
                    remoteVideoContainer.width = newWidth;
                    remoteVideoContainer.height = newHeight;
                    this.settedRemoteContainer = true;
                }
            }
        }
    }