Broadcasting portrait orientation via mobile devices in RTC

[Michael]

We are having issues broadcasting portrait orientation via mobile devices in RTC. It seems Flashphoner is forcing landscape orientation even forcing portrait constraints. We are passing the following constraints in the method session.createStream():

{
"video":{
"width":{
"ideal":240,"min":180,"max":240
},
"height":{
"ideal":426,"min":320,"max":426
},
"minBitrate":512,
"frameRate":30,
"deviceId":"01b7fc4ca1db683de1b9cd516fba281f61797605809e734c2dde5db5aa564d44"
},
"audio":{
"autoGainControl":false,
"bitrate":64,
"deviceId":"01b7fc4ca1db683de1b9cd516fba281f61797605809e734c2dde5db5aa564d44"
}
}

But the Flashphoner WEBSDK is overwriting and publishing the video with these constraints:

{
video: {
width: 320,
height: 240,
minBitrate: 512,
frameRate: {
ideal: 30
},
deviceId: "01b7fc4ca1db683de1b9cd516fba281f61797605809e734c2dde5db5aa564d44"
}
audio: {
autoGainControl: false,
bitrate: 64,
deviceId: "01b7fc4ca1db683de1b9cd516fba281f61797605809e734c2dde5db5aa564d44"
}
customStream: undefined
}

In your documentation we have found the param disableConstraintsNormalization at the function getMediaAccess, but it seems this param is not working at getMediaAccess(). We are looking to override the constraints at session.createStream to force the portrait mode.

1 - How can we do that?

2 - How the Flashphoner constraint normalization works? Does it tests each resolution until it finds one that is compatible?

3 - What is the best approach to broadcast a video in portrait mode and force the front camera in mobile devices?

4 - Is there a way to know which camera is being broadcasted when requesting permission and broadcasting the first/default camera available?

5 - Is there a way to disable the console.log?

Thanks,

 

[Max]

Good day.

How can we do that?
How the Flashphoner constraint normalization works? Does it tests each resolution until it finds one that is compatible?

By default, WebSDK normalizes stream publishing resolution constraints set in Safari browser. In this case, if width or height is not set, or equal to 0, then the picture resolution is forced to 320x240 or 640x480 like this:

       ...
       if (!width || !height) {
          constraints.video.width = {
            min: 320,
            max: 640
          };
          constraints.video.height = {
            min: 240,
            max: 480
          };
        }
        ...

If width and height both are set, they are normalized like this:

        ...
        } else if (_typeof(width) !== 'object' || _typeof(height) !== 'object') {
          constraints.video.width = {
            min: width,
            max: width
          };
          constraints.video.height = {
            min: height,
            max: height
          };
        }
        ...

In other browsers, constraints are set to 320x240 if width or height is not set or is not a number.
This behaviour can be disabled with option:

publishStream = session.createStream({
    ...
    disableConstraintsNormalization: true,
    constraints {
        video: {
            width: {ideal: 1024},
            height: {ideal: 768}
        },
        audio: true
    }
    ...
});
publishStream.publish();

What is the best approach to broadcast a video in portrait mode and force the front camera in mobile devices?

By default, Chrome on Android devices and Safari on iOS both streams vertical video. You can also publish WebRTC stream with orientation info:

session.createStream({
    name: streamName,
    ...
    cvoExtension: true
}).publish();

Note if you play WebRTC stream with orientation info as RTMP, it requires some server setup and player side support as describer here

Is there a way to know which camera is being broadcasted when requesting permission and broadcasting the first/default camera available?

To select the camera, use getMediaDevices() call:

Flashphoner.getMediaDevices(null, true, MEDIA_DEVICE_KIND.INPUT).then(function (list) {
    ...
    list.video.forEach(function (device) {
        ...
    });
}).catch(function (error) {
    $("#notifyFlash").text("Failed to get media devices");
});

You can start broadcasting from selected camera by setting deviceId in constraints. Also, you can switch camera while publishing a stream using switchCam() call:

    stream.switchCam().then(function(id) {
        $('#videoInput option:selected').prop('selected', false);
        $("#videoInput option[value='"+ id +"']").prop('selected', true);
    }).catch(function(e) {
        console.log("Error " + e);
    });

On Android, if Chrome is used, the default is the front camera. If Firefox is used, the default is the rear camera. On iOS in the Safari browser, by default the front camera is selected, but in devices list the rear camera is the first.
Please review the Media Devices example code to explore devices management and various broadcasting options.

Is there a way to disable the console.log?

Since WebSDK build 0.5.28.2753.131 (the source code is available on GitHub by tag 05cb5bd), logging can be fully disabled while API initializing

Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf', logger: null});

Another logging management facilities are described here.