发表新帖
发表新帖

Is that possible to make <video> mirrored?

后端 未结
关注
4 1029
Happy的楠姐
Happy的楠姐 2020-12-08 01:59

Is that possible to make a video inside tag mirrored horizontally or vertically?

相关标签:
4条回答
  • 野的像风
    2020-12-08 02:14

    By any chance if somebody wants a working example, here is the code (with mirrored/rotated). Refer the video element #videoElement under style tag:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>

<style>
#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 10px #333 solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
    /*Mirror code starts*/
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
    /*Mirror code ends*/
}

</style>
</head>

<body>
<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>
 var video = document.querySelector("#videoElement");

 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

 if (navigator.getUserMedia) {
     navigator.getUserMedia({video: true}, handleVideo, videoError);
 }

 function handleVideo(stream) {
     video.src = window.URL.createObjectURL(stream);
 }

 function videoError(e) {
     // do something
}
</script>
</body>
</html>
    0 讨论(0)
  • 一整个雨季
    2020-12-08 02:20

    Using JavaScript, if video is the video element, to mirror (flip horizontally) you can use

    video.style.cssText = "-moz-transform: scale(-1, 1); \
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); \
transform: scale(-1, 1); filter: FlipH;";

    To flip vertically you can use

    video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";
    0 讨论(0)
  • 悲哀的现实
    2020-12-08 02:26

    You can do it using a CSS3 3D transformation.

    #videoElement
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

    This will rotate it 180 degrees around its Y axis (so you're now looking at it from behind) which gives the same appearance as being mirrored.

    Example at http://jsfiddle.net/DuT9U/1/

    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-08 02:34

    You can use CSS3 scaleX or scaleY set to -1 to respectively flip the video horizontally or vertically.

    0 讨论(0)
 看不清?
提交回复
热议问题