stagfe/resources/views/meet.blade.php

@extends('layouts.meeting')
@section('content')

    <div id="meetComponent">

        <h5 class="bg-dark font-weight-bold text-white m-0 py-3 px-4 d-flex">
            <span>Meeting</span>
            <span class="ml-auto" v-if="!started">
                Connecting...
            </span>
            <span class="ml-auto" v-if="started">
                <i class="fa fa-clock mr-1 text-light"></i>
                @{{ timeDisplay() }}
            </span>
        </h5>

        <div class="mt-4">
            @if($guest)
            <div class="py-2 text-center" v-if="!pro">
                <h6 class="text--black font-weight-bold">Please wait. Your doctor will be with you shortly...</h6>
            </div>
            @endif
            <div class="main-view mx-auto">
                <div id="self-view" class="full-view"></div>
                <div id="remote-view" class="thumb-view"></div>
            </div>
        </div>

    </div>

    <script>

        new Vue({
            el: '#meetComponent',
            delimiters: ['@{{', '}}'],
            data: {
                time: 0,
                startTime: 0,
                started: false,
                client: false,
                pro: false,

                selfName: '',
                selfToken: '',

                @if($guest)
                clientUid: '',
                checkInToken: '',
                @endif

                otSessionId: '',
            },
            methods: {
                getInitials: function(_name) {
                    var parts = _name.split(/\s+/g);
                    parts = parts.map(_part => _part[0]);
                    return parts.join('');
                },
                timeDisplay: function() {
                    var seconds = this.time / 1000,
                        minutes = parseInt(seconds / 60, 10);
                    seconds = parseInt(seconds % 60, 10);
                    return minutes + " min, " + seconds + " sec";
                },
                connectToFirstPro: function() {
                    console.log('Connecting to first pro ...');
                    this.pros = [];
                    this.addPro();
                    $.post('/api/meeting/request-dial-pro', {
                        meetingUid: this.meetingID,
                    }, function(_data) {
                        console.log('Response to /api/meeting/request-dial-pro');
                        console.log(_data);
                    }, 'json');
                },
                onProJoined: function(_data) {
                    // TODO:
                },
                onProLeft: function(_id) {
                    // TODO:
                },
                leaveCall: function() {
                    // TODO:
                },

                // OT methods
                initOpenTok: function() {

                    /* fake video feed (temp) */
                    const randomColour = () => {
                        return Math.round(Math.random() * 255);
                    };

                    const canvas = document.createElement('canvas');
                    canvas.width = 640;
                    canvas.height = 480;
                    const ctx = canvas.getContext('2d');

                    const x = randomColour();
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.font = "20px Georgia";
                    ctx.fillStyle = `rgb(220, 220, 220)`;
                    var userType = '<?= $guest? "Client" : "Pro" ?>';
                    ctx.fillText("Video feed from the " + userType, 20, 100);

                    var self = this;

                    var apiKey = '46678902';
                    var sessionId = this.otSessionId;
                    var token = this.selfToken;
                    var session = OT.initSession(apiKey, sessionId);

                    // TODO: Subscribe to remote stream (pro)
                    session.on('streamCreated', function streamCreated(event) {
                        console.log(event);
                        var subscriberOptions = {
                            insertMode: 'append',
                            width: '100%',
                            height: '100%'
                        };
                        session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
                    });

                    session.on('sessionDisconnected', function sessionDisconnected(event) {
                        console.log('You were disconnected from the session.', event.reason);
                    });

                    // initialize the publisher
                    var publisherOptions = {
                        videoSource: canvas.captureStream(1).getVideoTracks()[0],
                        insertMode: 'append',
                        width: '100%',
                        height: '100%',
                    };
                    var publisher = OT.initPublisher('self-view', publisherOptions, self.handleOpenTokError);

                    // Connect to the session
                    session.connect(token, function callback(error) {
                        if (error) {
                            self.handleOpenTokError(error);
                        } else {
                            // If the connection is successful, publish the publisher to the session
                            session.publish(publisher, self.handleOpenTokError);
                        }
                    });
                },
                handleOpenTokError: function(e) {

                },

                getClientCheckinToken: function(_done) {
                    var self = this;
                    $.get('/get-client-checkin-token/' + this.clientUid, function(_data) {
                        console.log(_data);
                        self.checkInToken = _data.data;
                        _done();
                    }, 'json');
                },
                getOpenTokSessionId: function(_done) {
                    var self = this;

                    $.ajax({
                        type: 'post',
                        url: '/api/clientVideoVisit/startVideoVisitAsStranger',
                        headers: {
                            'sessionKey': localStorage.sessionKey
                        },
                        data: {checkInToken: this.checkInToken},
                        dataType: 'json'
                    })
                        .done(function (_data) {
                            console.log(_data);
                            if(_data.success) {
                                self.otSessionId = _data.data;
                                _done();
                            }
                            else {
                                alert(_data.message);
                            }
                        })
                        .fail(function (_data) {
                            console.log(_data);
                            alert(_data.message);
                        });

                }
            },
            mounted: function() {

                var self = this;

                @if($guest)
                this.clientUid = localStorage.clientUid;
                this.getClientCheckinToken(function() { // get client check-in token

                    self.getOpenTokSessionId(function() { // get opentok session id
                        var name = [];
                        if (localStorage.clientFirstName) name.push(localStorage.clientFirstName);
                        if (localStorage.clientLastName) name.push(localStorage.clientLastName);
                        this.selfName = name.join(' ');
                        $.post('/api/openTok/getClientToken', {
                            opentokSessionId: self.otSessionId,
                            name: name.join(' ')
                        }, function (_data) {
                            self.selfToken = _data.data;
                            self.initOpenTok();
                        });
                    });
                });
                @endif

            }
        });
    </script>

@endsection