Setting resolution for push and pull streaming using WebRTC is not working ,Android

[lichao5585]

html code

<script type="text/javascript">
        $(function() {
            let sdk = null; 

            const startPublish = async function() {
                const videoElement = $('#rtc_media_player')[0];

                
                try {
                    const stream = await navigator.mediaDevices.getUserMedia({
                        video: {
                            width: { ideal: 3840 }, // 4K
                            height: { ideal:  2160}, // 4K
                            frameRate: { ideal: 60, max: 120 } // 
                        },
                        audio: true // 
                    });

                  
                    if (sdk) {
                        sdk.close();
                    }

                    sdk = new SrsRtcPublisherAsync();
                    videoElement.srcObject = stream;
                    sdk.stream = stream; 

                    const url = "webrtc://xxxxxx";
                    await sdk.publish(url); 
                    console.log("success！");
                    alert("success");
                } catch (error) {
                    console.error("failed :", error);
                    alert("failed : " + error.message);
                    if (sdk) sdk.close();
                }
            };

            $("#btn_publish").click(startPublish);
        });
    </script>

srs.sdk.js code

self.constraints = {
        audio: true,
        video: {
            width: {ideal: 3840},
            height: { ideal: 2160 },
            frameRate: { ideal: 60, max: 120 }
            // facingMode: 'environment'
        }
    };

But the actual recording is 720 * 1280 should i need to configure any additional information

[suzp1984]

try to set sdk.constraints instead of the sdk.stream before sdk.publish. And use MediaDevices.getSupportedConstraints to get a list of available constraints.

[lichao5585]

try to set sdk.constraints instead of the sdk.stream before sdk.publish. And use MediaDevices.getSupportedConstraints to get a list of available constraints.

Still can't do it ,still 720*1280

`

        const startPublish = async function() {
            const videoElement = $('#rtc_media_player')[0];

            try {
                const constraints = {
                    video: {
                        width: 3840, // 4K
                        height: 2160, // 4K
                        frameRate: { ideal: 60, max: 120 }, // 60~120fps
                        facingMode: 'environment'
                    }
                };

                const stream = await navigator.mediaDevices.getUserMedia(constraints);

                if (sdk) {
                    sdk.close();
                }

                sdk = new SrsRtcPublisherAsync();

              
                sdk.constraints = constraints; 

              
                videoElement.srcObject = stream;

                const url = "webrtc://xxxxxx";
                await sdk.publish(url); 
                console.log("Publish success!");
                alert("Publish success!");
            } catch (error) {
                console.error("Publish failed:", error);
                alert("Publish failed: " + error.message);
                if (sdk) sdk.close();
            }
        };

        $("#btn_publish").click(startPublish);
    });
</script>`

[lichao5585]

The phone itself supports 4K, and I can obtain the resolution of the camera, but I cannot achieve 4K playback during recording

[gg22mm]

srs.sdk.js code

self.constraints = {
        audio: true,
        video: {
            width: {ideal: 3840},
            height: { ideal: 2160 },
            frameRate: { ideal: 60, max: 120 }
Change the 'facingMode' to 'environment' but it seems to have no effect.
        }
    };

[suzp1984]

https://github.com/ossrs/srs/blob/5f134798b69264a9f2bb7c61a29fafd77d6522b1/trunk/src/app/srs_app_rtc_source.cpp#L485

profile-level-id=42e01f means the h.264 video codec profile is Constrained Baseline Profile, codec level id is 3.1, which restrict the maximum supported resolutions up to 1080p (1920*1080).

So I do think the SDP's profile-level-id is one of the cause SRS can't support video resolution larger than 1080p.

[duiniuluantanqin]

that is a problem

[winlinvip]

Let's identify where the resolution is being limited. Please help us gather some information:

const startPublish = async function() {
    try {
        // Check device capabilities first
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        console.log('Available video devices:', videoDevices);

        // Get supported constraints
        const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
        console.log('Supported constraints:', supportedConstraints);

        const stream = await navigator.mediaDevices.getUserMedia({
            video: {
                width: { ideal: 3840 },
                height: { ideal: 2160 },
                frameRate: { ideal: 60, max: 120 }
            },
            audio: true
        });

        // Check actual stream settings
        const videoTrack = stream.getVideoTracks()[0];
        const settings = videoTrack.getSettings();
        console.log('Actual video settings:', settings);
        
        const capabilities = videoTrack.getCapabilities();
        console.log('Video track capabilities:', capabilities);

        // Continue with your existing code...
        const videoElement = $('#rtc_media_player')[0];
        videoElement.srcObject = stream;
        
        // Rest of your code...
    } catch (error) {
        console.error("Error:", error);
    }
};

Instead of jumping directly to 4K, try requesting progressively higher resolutions:

const resolutions = [
    { width: 1920, height: 1080 }, // 1080p
    { width: 2560, height: 1440 }, // 1440p  
    { width: 3840, height: 2160 }  // 4K
];

for (const res of resolutions) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: {
                width: { exact: res.width },
                height: { exact: res.height },
                frameRate: { ideal: 30 } // Start with lower framerate
            },
            audio: true
        });
        console.log(`Successfully got ${res.width}x${res.height}`);
        // Use this stream
        break;
    } catch (error) {
        console.log(`Failed to get ${res.width}x${res.height}:`, error);
        continue;
    }
}

[winlinvip]

The issue hasn't been reproducible for a long time.