Change display html element on the fly

[angel]

Hi,

We are creating a html page that display multiple RTSP to WEBRTC streams. We need to change the html display element option when the stream is running but we cannot figure it out how to do it.

Is there any way to change the display html element option once the stream is running?

Thanks a lot!

 

[Max]

Good day.
You can define custom video element and pass it using remoteVideo option while creating a stream to play. For example, to weak Two Way Streaming example:
1. Add video element to player div in two_way_streaming.html file

...
<div class="col-sm-6">
<div class="text-center text-muted">Player</div>
<div class="fp-Video">
<div id="remoteVideo" class="display"><video id="videoControls" controls="controls"></video></div>
</div>
...

2. Pass this element to createStream() function:

var videoControls = document.getElementById("videoControls");
...
function playStream() {
     var session = Flashphoner.getSessions()[0];
     var streamName = $('#playStream').val();

     session.createStream({
          name: streamName,
          display: remoteVideo,
          remoteVideo: videoControls
     }).on(STREAM_STATUS.PENDING, function (stream) {
          var video = videoControls;
          if (!video.hasListeners) {
               video.hasListeners = true;
               video.addEventListener('resize', function (event) {
                     resizeVideo(event.target);
               });
         }
     ...
     }).play();
}
...

You can change custom video element attributes as you wish.

 

[angel]

Hi Max,

thanks for your quick reply. I think i didn't explain well my case so i will try again.

We have two ip cameras with RTSP protocol. We are streaming without any problem. In the html page where we are displaying the streaming we have one div for each video element. Let's say:

<div id="div-1"><video id="video-1"></video></div>
<div id="div-2"><video id="video-2"></video></div>

Once the video streaming is playing i would like to change video-1 to div-2 and video-2 to div-1 depending on different user actions. I tried just getting the inner html of each div and assign to the other div but the video is not displayed anymore when i do this.

Do you have any suggestion on how i can do this?

Thanks a lot in advance.

 

[Max]

Good day.

Do you have any suggestion on how i can do this?

Would you try just stop stream and start to play it in another div?

     ...
     stream1.stop();
     stream2.stop();
     ...
     stream1 = session.createStream({
          name: streamName1,
          display: div2
     }).on(STREAM_STATUS.PENDING, function (stream) {
         ...
     });
     stream1.play();
     stream2 = session.createStream({
          name: streamName2,
          display: div1
     }).on(STREAM_STATUS.PENDING, function (stream) {
         ...
     });
     stream2.play();