Question

我正在使用getUserMedia在div中显示网络摄像头流。我正在尝试将一些CSS效果应用于视频流，例如filter : blur(15px);和其他一些CSS效果。

问题是，当我正在应用这个类时，效果不起作用，但是如果它在页面加载时加载就好像它在.effect0上那样有效。

有人知道我如何只刷新相机流才能看到效果，并且可以向我解释如何将它包含在我的代码中？

非常感谢，如果你能帮助我，请再次感谢！

我的代码：

      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
    }

    $('.bouton0').click(function () {
        $('#videoElement').removeClass('.effet1');
        $('#videoElement').addClass('.effet0');
    });
    $('.bouton1').click(function () {
        $('#videoElement').removeClass('.effet0');
        $('#videoElement').addClass('.effet1');
    });

#container {
    margin: 0px auto;
    margin-top: 10%;
}
#videoElement {
    width: 100%;
    height: 100%;
    background-color: #666;
}

.effet0 {
    filter: none;
}
.effet1 {
    filter: blur(15px);
}

ul li {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <ul>
        <li><a href="#" class="bouton0">effet 0</a></li>
        <li><a href="#" class="bouton1">effet 1</a></li>
    </ul>
    <div id="container">
        <video autoplay="true" id="videoElement" class=""> </video>
    </div>
</body>

Answer 1

可能是 $().removeClass('.effet1'); -> $().removeClass('effet1');

其他也。：）

刷新相机流jquery

1 个答案: