Question about Playing a stream in custom HTML5 video element

T

tonyportersec

Member
I followed the

Playing a stream in custom HTML5 video element - Web SDK 2.0 - EN - Flashphoner Documentation

docs.flashphoner.com docs.flashphoner.com
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

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

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.
 
T

tonyportersec

Member
Max said:
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.
Click to expand...
OK, as it affected our deployment, so please try to give me solution as soon as possible, thanks
 
Max

Max

Administrator
Staff member
tonyportersec said:
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.
Click to expand...
This seems like Webkit issue playing WebRTC. Safari tries to prevent picture distortion. We will check if there is a tweak.
 
Max

Max

Administrator
Staff member
tonyportersec said:
It is not problem (Wrong aspect ratio) only on Safari on iOS, it is also have problem on Chrome on iOS.
Click to expand...
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.
 
T

tonyportersec

Member
Max said:
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.
Click to expand...
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

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

You must log in or register to reply here.
Top