UnrealWebRTCPlayer - Picture in Picture mode

Issues when playing with WebRTC Player

UnrealWebRTCPlayer - Picture in Picture mode

Postby kpgchd » Mon Nov 05, 2018 2:42 am

Hi

How can we add Picture in Picture mode to HTML5 Canvas/Video ..? Thanks
kpgchd
 
Posts: 0
Joined: Mon Nov 05, 2018 2:39 am

Re: UnrealWebRTCPlayer - Picture in Picture mode

Postby admin » Mon Nov 05, 2018 9:53 am

You normally add Picture in Picture on the live encoder side, not on the player side.
So your live encoder mixes two video sources, producing one output stream with picture in picture.
Unreal Live Server, OBS, vMix and other software encoders can do that.

To do HTML5 video Picture in Picture in the browser, having two streams coming, there is a new spec is under development:
https://wicg.github.io/picture-in-picture/

For now, you can simply put second video element inside of first video element using style.position and style.top, style.left javascript.

Here is a modified play2heads.html webpage from our SDK, which has one video element inside of another video element, and it works good as a Picture in Picture player:


<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="unrealwebrtcplayer.js"></script>

<script type="text/javascript">

var webrtcPlayer1 = null;
var webrtcPlayer2 = null;

function OnLoad() {
var remoteVideo1 = document.getElementById("remoteVideo1");
var remoteVideo2 = document.getElementById("remoteVideo2");

remoteVideo1.style.position = "absolute";
remoteVideo2.style.position = "absolute";
remoteVideo1.style.top = 50 + "px";
remoteVideo2.style.top = 100 + "px";
remoteVideo1.style.left = 50 + "px";
remoteVideo2.style.left = 150 + "px";

}

</script>

</head>

<body onload = "OnLoad()">

<div id="container">

<video style="background-color:black" id="remoteVideo1" width="1280" height="720" autoplay playsinline controls onloadedmetadata="OnLoad()"></video>
<video style="background-color:black" id="remoteVideo2" width="320" height="240" autoplay playsinline controls onloadedmetadata="OnLoad()"></video>

<script type="text/javascript">
webrtcPlayer1 = new UnrealWebRTCPlayer("remoteVideo1", "webcam", "", "127.0.0.1", "5119", false, true, "tcp");
webrtcPlayer2 = new UnrealWebRTCPlayer("remoteVideo2", "webcam1", "", "127.0.0.1", "5119", false, true, "udp");
webrtcPlayer1.Play();
webrtcPlayer2.Play();
</script>

</div>

</body>
</html>
admin
Site Admin
 
Posts: 1039
Joined: Fri Aug 21, 2009 10:13 am

Re: UnrealWebRTCPlayer - Picture in Picture mode

Postby kpgchd » Tue Nov 27, 2018 1:20 am

Hi admin

Thanks for the reply.

But I'm not looking for picture over picture. I Picture-in-Picture like button available on youtube or by default in Chrome 70 on playing video-on-demand. I want same on streaming.

Regards
kpgchd
 
Posts: 0
Joined: Mon Nov 05, 2018 2:39 am

Re: UnrealWebRTCPlayer - Picture in Picture mode

Postby admin » Tue Nov 27, 2018 1:11 pm

Ah OK.

So Picture-in-Picture mode applies to <video> element, and it doesn't matter what you are playing in that <video> element - a file on demand or a live video, like WebRTC or anything else.
Follow this article to add Picture-in-Picture functionality to your <video> element:
https://blog.arnellebalane.com/the-pict ... 415372009f
admin
Site Admin
 
Posts: 1039
Joined: Fri Aug 21, 2009 10:13 am


Return to Playing with WebRTC Player

Who is online

Users browsing this forum: No registered users and 1 guest

cron