この質問は何度もされていると思います。それらのいくつかは、Chrome または Firefox で動作します。
私は解決策を試しました：
.rc{
width: 250px;
height: 250px;
border-radius: 100%;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-webkit-transform: rotate(0.000001deg);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
これをdivクラスに追加し、ビデオタグの高さを
<div class="rc"><video id="localVideoStream" height="250" autoplay muted></video></div>
ビデオ ソースは、getusermedia を使用して webrtc から取得されます。ビデオ ストリームは、rc クラスを使用して、円を描くように成形し、Web ページに表示することができます。
問題は毎回、ビデオ ソースが円形の中心になく、少し左側にとどまることです。たとえば、顔がカメラの前にあるとき、顔の一部だけが円の右側にありました。円の中心にはありません。誰でもこれを解決する方法を知っていますか?
ありがとう。