Question about Playing a stream in custom HTML5 video element

I followed the
to do,

and i want to display the video which will change the video aspect ratio to fit the size of the videoControls as below:
the testing page is https://server3.teleeye.link/recording/player-min.html

If you open the page and click the "PLAY" button, you will find that the video can change aspect ratio on MS Windows chrome, edge, android chrome,
correct.png (You can see the video is fit the aspect ratio (960 x 270), and nothing is cut on the video)

but not on ios's safari.
incorrect.png (You can see the video is cut top and bottom
Do you know Why? Thanks

The reason why i need to do it is i want to display the video to different aspect ratio, but keep all the content of the video)

player-min.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
<script type="text/javascript" src="player-min.js"></script>
</head>

<body onload="init_api()">
<div id="remoteVideo" class="display">
<video id="videoControls" style="object-fit:fill;width:960px;height:270px"></video>
</div>

<br/><input type="button" onclick="connect()" value="PLAY"/>
</body>
</html>

player-min.js:
//Status constants
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;

//Websocket session
var session;


//Init Flashphoner API on page load
function init_api() {
console.log("init api");
Flashphoner.init({
});
}

//Connect to WCS server over websockets
function connect() {
session = Flashphoner.createSession({urlServer: "wss://server4.teleeye.link:8443"}).on(SESSION_STATUS.ESTABLISHED, function(session){
console.log("connection established");
playStream(session);
});
}

//Playing stream with given name and mount the stream into myVideo div element
function playStream() {
var options = {
name:"test1",
display:document.getElementById("remoteVideo"),
remoteVideo: document.getElementById("videoControls"),
transport: "TCP",
receiveAudio: false
};
var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) {
console.log("playing");
});
stream.play();
}
 

Attachments

Last edited:

Max

Administrator
Staff member
Good day.
Please add Flashphoner.playFirstVideo() call before session creation for playback to work in Safari as described here
Code:
function connect() {
    Flashphoner.playFirstVideo(remoteVideo, false, PRELOADER_URL).then(function() { 
        session = Flashphoner.createSession({urlServer: "wss://server4.teleeye.link:8443"}).on(SESSION_STATUS.ESTABLISHED, function(session){       
            console.log("connection established");
            playStream(session);
        });
    });
}
Also, look at Stream Local Snapshot example which code contains downcaling example using CSS.
 

Max

Administrator
Staff member
The issue is reproducing in MacOS Safari too. We raised the ticket WCS-3200 to check if there is some tweak to get scaling in Safri work with WebRTC streams. Let you know results here.
 
The issue is reproducing in MacOS Safari too. We raised the ticket WCS-3200 to check if there is some tweak to get scaling in Safri work with WebRTC streams. Let you know results here.
OK, as it affected our deployment, so please try to give me solution as soon as possible, thanks
 

Max

Administrator
Staff member
I have updated the page, the rtsp stream is 704x576 (4 to 3 ratio) and i want to display it on 16 to 9 ratio, all broswers work except on ios.
This seems like Webkit issue playing WebRTC. Safari tries to prevent picture distortion. We will check if there is a tweak.
 

Max

Administrator
Staff member
It is not problem (Wrong aspect ratio) only on Safari on iOS, it is also have problem on Chrome on iOS.
All the browsers on iOS use Webkit (there is no other engine), so the problem should reproduce in all the iOS browsers if they support WebRTC.
 
All the browsers on iOS use Webkit (there is no other engine), so the problem should reproduce in all the iOS browsers if they support WebRTC.
Ok, thanks for your information, hope you have any solution for me, as the camera video is captured on 4:3 ratio, and need to show in 16:9 to make the aspect ratio correct on the browser. Now only have problem on ios devices.
 

Max

Administrator
Staff member
Good day.
We investigated the issue. Seems like object-fit: fill does not work properly in Safari for WebRTC video. So we recommend to use -webkit-transform with scaling by X and by Y. Please see attached example code. Note that resize event handler is needed in this case, because WebRTC stream can change resolution dynamically on the fly, and scaling values must be re-calculated.
This code works also in Chrome on PC.
 

Attachments

Top