欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)視頻鏡面反轉的示例代碼

 更新時間：2023年11月06日 10:18:06   作者：Postkarte不想說話  
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)視頻鏡面反轉的效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下

添加下一個樣式即可

        #left {
            transform: rotateY(180deg);
        }

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js通過瀏覽器調用攝像頭</title>
    <style>
        #left {
            transform: rotateY(180deg);
        }
    </style>

</head>
<body>

<div class="banner">
    <video id="left" width="500px" height="500px" autoPlay="autoplay" controls="controls"></video>
    <video id="right" width="500px" height="500px" autoPlay="autoplay" controls="controls"></video>
</div>

</body>

<script>
    let leftVideo = document.getElementById('left');
    let rightVideo = document.getElementById('right');
    function getMedia() {
        let constraints = {
            video: { width: 400, height: 500 },
            audio: false
        };
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        navigator.mediaDevices.getUserMedia(
            constraints,
            function(stream) {
                leftVideo.src = stream;
                leftVideo.play();
            },
            function(error) {
                console.log(error);
            }
        ).then(function(MediaStream) {
            leftVideo.srcObject = MediaStream;
            leftVideo.play();
        });
    }

    getMedia();

    // 當開始播放的時候哦從一個video標簽中獲取流并將流傳給其他的video標簽
    leftVideo.onplay = function () {
        rightVideo.srcObject = leftVideo.captureStream()
    }
</script>
</html>

效果圖

到此這篇關于js實現(xiàn)視頻鏡面反轉的示例代碼的文章就介紹到這了,更多相關js視頻鏡面反轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論