@extends('layouts/contentNavbarLayout')

@section('title', 'receiver')

@section('content')
    <div id="remote-media"></div>
    <button onclick="joinRoom()">Join Call as Receiver</button>
    <button onclick="testCamera()">Test Camera</button>
<video id="video" width="640" height="480" autoplay></video>
@endsection
@section('page-script')
<script>
    function testCamera() {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(function(stream) {
        var video = document.getElementById('video');
        video.srcObject = stream;
        })
        .catch(function(error) {
        console.error('Error accessing the camera', error);
        });
    }
    function joinRoom() {
        fetch('/CRM/token?identity=receiver')
            .then(response => response.json())
            .then(data => {
                console.log('twilio video',Twilio.Video.connect(data.token, {
                    name: 'MyRoom'
                }));
                return Twilio.Video.connect(data.token, {
                    name: 'MyRoom'
                });
            })
            .then(room => {
                console.log('Connected to Room:', room.name);
                room.participants.forEach(participant => {
                    console.log(participant.identity + ' is already in the room');
                    participant.tracks.forEach(publication => {
                        if (publication.isSubscribed) {
                            const track = publication.track;
                            document.getElementById('remote-media').appendChild(track.attach());
                        }
                    });
                });
                room.on('participantConnected', participant => {
                    console.log(participant.identity + ' joined the room');
                    participant.on('trackSubscribed', track => {
                        document.getElementById('remote-media').appendChild(track.attach());
                    });
                });
            }).catch(error => {
                console.error('Could not connect to Twilio: ' + error.message);
            });
    }
</script>
@endsection