Movie upside-down and left-right direction switching

Question

I am making application on vLine.

I wonder is it possible to change the direction of movie.

Currently,the pitcure on my camera(small frame) is left-right side reversed like a mirror.

It is sometimes a bit confusing.

If we can also switch upside-down , it is very useful especially using outside camera.

Answer 1

NOTE: This answer assumes that you are not using the uiVideoPanel widget.

You can style the HTML element that is created as a result of calling MediaStream.createMediaElement() or MediaStream.createVideoElement() with CSS. By default, the local video will be mirrored and the remote video will not. You can see an example of this by making a call with the shell example.

You can apply a CSS transform to the HTML element to mirror the image or flip it upside down.

To mirror, you'd use transform: scaleX(-1) and to flip upside down you'd use transform: scaleY(-1). Also, you may need to add a vendor-specific prefix to transform, such as -webkit-transform.

For example, in the shell example you can add the following in the mediaSession:addRemoteStream handler:

  // flip remote video upside-down
  // 'stream' is the MediaStream
  // 'elem' is the result from stream.CreateMediaElement()
  if (stream.isRemote()) {
    elem.css('transform', 'scaleY(-1)');         // Firefox
    elem.css('-webkit-transform', 'scaleY(-1)'); // Chrome
  }