|
|
@@ -0,0 +1,153 @@
|
|
|
+@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,
|
|
|
+ },
|
|
|
+ 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 = '45828062';
|
|
|
+ var sessionId = '1_MX40NTgyODA2Mn5-MTU5MjIxMTY1MzQ1NH5aUnB4alVsMzZSTWFnUEIvUFlqYlFjWDR-UH4';
|
|
|
+ var token = '';
|
|
|
+ @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() {
|
|
|
+ this.initOpenTok();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+
|
|
|
+@endsection
|
