Merhabalar,

Peer JS aracılığı ile iki tarafın site üzerinden canlı görüşebilmesi için bir sistem geliştirdik.



Resimde göreceğiniz üzere. Büyük olan karşı taraf, sağ yukarıdaki küçük olan ise benim kameram.

Karşı tarafı tam ekran yapınca sağ alt tarafta skype'de olduğu gibi kendimi görebilmek istiyorum.

Fakat şuanda bu şekilde çalışmıyor. Video klasik HTML5 video tag'ı ile çalışıyor.

Örnek kodlar aşağıdaki şekildedir;

<video controls="true" id="their-video" autoplay style="width:100%;height:75%;max-height:480px;background-color:#eee;"></video>

<script>

    // Compatibility shim
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // PeerJS object

    var peer = new Peer('<?=$rez->ogrenci_video_no;?>', {debug: 3, secure:true});


    peer.on('open', function(){
        $('#my-id').text(peer.id);
    });

    // Receiving a call
    peer.on('call', function(call){
        // Answer the call automatically (instead of prompting user) for demo purposes
        call.answer(window.localStream);
        step3(call);
    });
    peer.on('error', function(err){
        alert(err.message);
        // Return to step 2 if error occurs
        step2();
    });



    // Click handlers setup
    $(function(){
        $('#make-call').click(function(){

            var call = peer.call('<?=$rez->egitmen_video_no;?>', window.localStream);
            step3(call);

        });

        $('#end-call').click(function(){
            window.existingCall.close();
            step2();
        });

        $('#start-videoaudio').click(function () {
            $('#step1-error').hide();
            step1();
        });

        // Retry if getUserMedia fails
        $('#step1-retry').click(function(){
            $('#step1-error').hide();
            //location.reload();
            step1();
            $('#start-videoaudio').click();
            setTimeout(function() { $('#make-call').click();}, 3000);
        });

        // Get things started
        step1();

    });

    function step1 () {

        // Get audio/video stream
        navigator.getUserMedia({audio: true, video: true}, function(stream){
            // Set your video displays
            $('#my-video').prop('src', URL.createObjectURL(stream));

            window.localStream = stream;
            step2();
        }, function(){ $('#step1-error').show(); });
    }

    function step2 () {
        $('#step1, #step3').hide();
        $('#step2').show();

    }

    function step3 (call) {
        // Hang up on an existing call if present
        if (window.existingCall) {
            window.existingCall.close();
        }

        // Wait for stream on the call, then set peer video display
        call.on('stream', function(stream){
            $('#their-video').prop('src', URL.createObjectURL(stream));
        });

        // UI stuff
        window.existingCall = call;
        $('#their-id').text(call.peer);
        call.on('close', step2);
        $('#step1, #step2').hide();
        $('#step3').show();

    }

    $(function(){

        $('#start-videoaudio').click();
        setTimeout(function() { $('#make-call').click();}, 3000);


    });

</script>

Bu durumu nasıl çözebiliriz?