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,

                sessionKey: '',
                selfName: '',
                selfToken: '',
            },
            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');

                    // Draw a random colour in the Canvas every 1 second
                    setInterval(() => {
                        const x = randomColour();
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.fillStyle = `rgb(${x}, ${x}, ${x})`;
                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                    }, 500);

                    var self = this;

                    var apiKey = '46678902';
                    var sessionId = this.sessionKey;
                    var token = this.selfToken;
{{--                    @if($guest)--}}
{{--                    token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9NmE0YWU1NzIzN2I1ODUxNzY2YzMzN2VkNGNjMTI4ODdlYTBkNDYwOTpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UVTVNakl4TVRZMU16UTFOSDVhVW5CNGFsVnNNelpTVFdGblVFSXZVRmxxWWxGaldEUi1VSDQmY3JlYXRlX3RpbWU9MTU5MjIxMTY1NSZub25jZT0wLjgyMDAzMDEwNjk1NDk3MiZyb2xlPXB1Ymxpc2hlciZleHBpcmVfdGltZT0xNTkyMjk4MDU1';--}}
{{--                    @else--}}
{{--                    token = 'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9NGFjNzQ2NjgyNThjZjE4MTdiMTFmMDMwZTg5ZjFjMzhjZDJlMDFiMDpzZXNzaW9uX2lkPTFfTVg0ME5UZ3lPREEyTW41LU1UVTVNakl4TWpreE1qSTRObjUzZUhCU1dYWjRlbVF6V2pJMGN6UkRRbEp2T0RsbFduTi1VSDQmY3JlYXRlX3RpbWU9MTU5MjIxMjk0NCZub25jZT0wLjkwMjA3MTc4OTk3ODY4OTkmcm9sZT1wdWJsaXNoZXImZXhwaXJlX3RpbWU9MTU5MjI5OTM0NA==';--}}
{{--                    @endif--}}
                    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) {

                }
            },
            mounted: function() {

                var self = this;

                this.sessionKey = localStorage.clientSessionKey;

                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: localStorage.clientSessionKey,
                    name: name.join(' ')
                }, function (_data) {
                    self.selfToken = _data.data;
                    self.initOpenTok();
                });

            }
        });
    </script>

@endsection