@extends('layouts.front.shell')

@section('cssdefine')

<!-- fa fa icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<script src="{{ asset('js/vue.min.js') }}"></script>

@endsection

@section('content')


<!-- 內容 start -->
<section class="main d-flex align-items-center">
    <div class="content">
        <div id="app" class="row justify-content-around align-items-center">


            <div class="d-none d-lg-block d-flex justify-content-center" style="width: 750px; position:relative;">
                <img src="{{ asset('assets/img/check.png') }}" alt="" class="w-100" style="width: 726px; height: auto; z-index: 3;">
                <video id="main_video" style="z-index: 5;position:absolute; top: 97px;left: 43px;width: 434px;height: auto;" autoplay muted></video>
                <canvas id="meter" width="350px" height="30px" style="z-index: 5;position:absolute; top: 360px; left: 128px;"></canvas>
                <!-- <video id="main_video" style="z-index: 5;position:absolute; top: 243px;left: 127px;width: 433px;height: auto;" autoplay muted></video> -->
                <!-- <video :src-object.prop.camel="mainVideo" style="z-index: 5;position:absolute; top: 240px;left: 127px;width: 433px;height: auto;" autoplay muted></video> -->
                <div class="row align-items-center state-box">
                    <div class="col-auto p-3">{{ __('member_enterRoom.enter_meet_status') }}</div>
                    <!-- <div class="col p-3 state-btn-box state-box-inner-border" v-if="hasMicrophone === true">
                        <button class="btn-icon btn-switch-on" id="micBtn">
                            <span class="material-icons me-1 fw-bold" id="micIcon">mic</span>
                            麥克風
                        </button><span id="micStatus">：開啟</span>
                    </div> 
                    <div class="col p-3 state-btn-box" v-if="hasCamera === true">
                        <button class="btn-icon btn-switch-on" id="videocamBtn">
                            <span class="material-icons me-1 fw-bold" id="videocamIcon">videocam</span>
                            攝影機
                        </button><span id="videocamStatus">：開啟</span>
                    </div>-->


                    <div class="col p-3 state-btn-box state-box-inner-border" v-if="hasMicrophone === true && micstatus === true">
                        <button class="btn-icon btn-switch-on" @click="changemicstatus">
                            <span class="material-icons me-1 fw-bold">mic</span>
                            {{ __('member_enterRoom.microphone') }}
                        </button><span>{{ __('member_enterRoom.open') }}</span>
                    </div>
                    <div class="col p-3 state-btn-box state-box-inner-border" v-else-if="hasMicrophone === true && micstatus === false">
                        <button class="btn-icon btn-switch-on" @click="changemicstatus">
                            <span class="material-icons me-1 fw-bold">mic</span>
                            {{ __('member_enterRoom.microphone') }}
                        </button><span>{{ __('member_enterRoom.close') }}</span>
                    </div>
                    <div class="col p-3 state-btn-box state-box-inner-border" v-else="hasMicrophone === false">
                        <button class="btn-icon btn-switch-on" disabled>
                            <span class="material-icons me-1 fw-bold">mic</span>
                            {{ __('member_enterRoom.microphone') }}
                        </button><span>{{ __('member_enterRoom.disconnect') }}</span>
                    </div>


                    <div class="col p-3 state-btn-box" v-if="hasCamera === true && camstatus === true">
                        <button class="btn-icon btn-switch-on" @click="changecamstatus">
                            <span class="material-icons me-1 fw-bold">videocam</span>
                            {{ __('member_enterRoom.camera') }}
                        </button><span>{{ __('member_enterRoom.open') }}</span>
                    </div>
                    <div class="col p-3 state-btn-box" v-if="hasCamera === true && camstatus === false">
                        <button class="btn-icon btn-switch-on" @click="changecamstatus">
                            <span class="material-icons me-1 fw-bold">videocam</span>
                            {{ __('member_enterRoom.camera') }}
                        </button><span>{{ __('member_enterRoom.close') }}</span>
                    </div>
                    <div class="col p-3 state-btn-box" v-if="hasCamera === false">
                        <button class="btn-icon btn-switch-on" disabled>
                            <span class="material-icons me-1 fw-bold">videocam</span>
                            {{ __('member_enterRoom.camera') }}
                        </button><span>{{ __('member_enterRoom.disconnect') }}</span>
                    </div>
                </div>
            </div>

            <!-- login-box start -->

            <div class="d-flex justify-content-center mb-3 col-lg-3">
                <div class="p-2 w-100" style="max-width: 400px;">
                    <div class="login-info" align="center">
                        <form action="/room/meeting/{{ $room_name }}" method="post">
                            @csrf
                            <input type="hidden" name="user_name" value="{{ $nickname }}">
                            <input type="hidden" name="microphone_start_status" id="microphone_start_status" value="1">
                            <input type="hidden" name="camera_start_status" id="camera_start_status" value="1">
                            <div class="mb-3">
                                <div style="padding-top: 35px;"></div>

                                <!-- <img src="{{ asset('new_front/img/Live_EZ_LOGO.png') }}"  style="width: 100px; height: auto;"  class="w-25 mb-3"> -->
                                <img src="{{ asset('new_front/img/logo_shadow.png') }}" style="width: 200px; height: auto;">
                            </div>
                            <div>
                                <h5 class="text-center mb-1">{{__('member_enterRoom.enter_meeting')}}</h5>
                                <div class="mt-2">
                                    <p>{{__('member_enterRoom.start_with_owner')}}</p>
                                </div>
                                <div class="mt-2">
                                    <span class="fc-green fw-bold">{{ $nickname; }}</span>
                                </div>
                                <hr>
                                <div class="row p-2">
                                    <div class="col">
                                        <!-- <span id="browser_check" class="material-icons fc-green me-1 fs-20 fw-bold">check_circle</span> -->
                                        <span v-if="browsercheck" class="material-icons fc-green me-1 fs-20 fw-bold">check_circle</span>
                                        <span v-else="browsercheck" class="material-icons fc-red me-1 fs-20 fw-bold">cancel</span>
                                        {{ __('member_enterRoom.browser') }}
                                    </div>
                                    <div class="col"> <a role="button" style="color:#35C2BA" data-bs-toggle="modal" data-bs-target="#descriptionModal" href="#">{{ __('member_enterRoom.browser') }}</a> </div>
                                </div>
                                <div class="row p-2">
                                    <div class="col">
                                        <!-- <span id="microphone_check" class="material-icons fc-green me-1 fs-20 fw-bold">check_circle</span> -->
                                        <span v-if="hasMicrophone == true" class="material-icons fc-green me-1 fs-20 fw-bold">check_circle</span>
                                        <span v-else="hasMicrophone == false" class="material-icons fc-red me-1 fs-20 fw-bold">cancel</span>
                                        {{ __('member_enterRoom.microphone') }}
                                    </div>
                                    <div class="col"> <a role="button" style="color:#35C2BA" data-bs-toggle="modal" data-bs-target="#micModal" href="#">{{ __('member_enterRoom.check_microphone') }}</a> </div>
                                </div>
                                <div class="row p-2">
                                    <div class="col">
                                        <!-- <span id="camera_check" class="material-icons fc-green me-1 fs-20 fw-bold">check_circle</span> -->
                                        <span v-if="hasCamera === true" class="material-icons fc-green me-1 fs-20 fw-bold">check_circle</span>
                                        <span v-else-if="hasCamera === false" class="material-icons fc-red me-1 fs-20 fw-bold">cancel</span>
                                        {{ __('member_enterRoom.camera') }}
                                    </div>
                                    <!-- <div class="col"> <a data-toggle="modal" data-target="#cameraModal" href="#">設備確認</a> </div> -->
                                    <div class="col"> <a role="button" style="color:#35C2BA" data-bs-toggle="modal" data-bs-target="#cameraModal" href="#">{{ __('member_enterRoom.check_camera') }}</a> </div>
                                </div>
                                <div class="row align-items-center p-2 g-0">
                                    <div class="col-4">
                                        <span class="material-icons fs-20 me-2">record_voice_over</span>{{ __('member_enterRoom.language') }}
                                    </div>
                                    <div class="col-8">
                                        <select class="form-select" name="source_language">
                                            <option value="cmn-Hant-TW,zh-Hant">中文</option>
                                            <option value="en-US,en">English</option>
                                            <option value="th-TH,th">ภาษาไทย</option>
                                            <option value="ja-JP,ja">日本語</option>
                                            <option value="ko-KR,ko">한국어</option>
                                            <option value="vi-VN,vi">Tiếng Việt</option>
                                            <option value="id-ID,id">Basa Sunda</option>
                                            <option value="ms-MY,my">Basa Jawa</option>
                                        </select>
                                    </div>
                                </div>


                                <div class="row align-items-center p-2 g-0">
                                    <div class="col-4">
                                        <span class="material-icons fs-20 me-2">aspect_ratio</span>畫質
                                    </div>
                                    <div class="col-8">
                                        <select class="form-select" name="resoultion" @change="setResoultion($event)">

                                            @if($plan == 'Free')
                                            <option value="480" selected>480p</option>

                                            @elseif($plan == 'Pro')
                                            <option value="480" selected>480p</option>
                                            <option value="720">720p</option>

                                            @else
                                            <option value="480" selected>480p</option>
                                            <option value="720">720p</option>
                                            <option value="1080">1080p</option>

                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-center mt-4">
                                    <button type="submit" class="btn btn-w100 btn-green" style="background-color: rgb(0,122,192);  border: 1px solid rgb(0, 122, 192);">{{ __('member_enterRoom.enter_meeting') }}</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

        <!-- login-box end -->
    </div>
</section>

<!--
<div class="content login-content row">
    <div class="d-none d-md-block col-md-7">

        <img id="load_image" src="{{ asset('assets/img/main-image-05.svg') }}" alt="" style="width: 700px;height: auto; z-index: 5;position:relative;">

        <video id="main_video" style="z-index: 3;position:absolute; top: 277px;left: 250px;width: 400px;height: 174px;" autoplay muted></video>

        <canvas id="meter" width="350px" height="30px" style="z-index: 5;position:absolute; top: 495px; left: 330px;"></canvas>
    </div>

    <div class="col-md-5">

        <div class="d-flex justify-content-center mb-3">
            <div class="p-2">
                <div class="login-box" align="center">
                    <div class="mb-3">
                        <img src="{{ asset('assets/img/logo-login.png') }}" alt="" style="width: 25%; margin-bottom: 15px;">
                    </div>
                    <p class="m-4">{{ __('member_enterRoom.start_with_owner') }}<br><span style="color: #4831d0; font-weight: bold;">{{ $nickname; }}</span><br>{{ __('member_enterRoom.meeting_space') }}</p>
                    <div class="container">
      
                        <div id="enter_room" class="container tab-pane active">
                            <form action="/room/meeting/{{ $room_name }}" method="post">
                                <input type="hidden" name="user_name" value="{{ $nickname }}">
                                {{ csrf_field() }}
                                <table class="table" style="font-size: 20px;">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span id="browser_check"></span>&nbsp;&nbsp;
                                                <label for="defaultCheck">{{ __('member_enterRoom.browser') }}</label>
                                            </td>
                                            <td><a data-toggle="modal" data-target="#descriptionModal" href="/">{{ __('member_enterRoom.browser_explain') }}</but ton></a>
                                        </tr>
                                        <tr>
                                            <td>
                                                <span id="microphone_check"></span>&nbsp;&nbsp;
                                                <label for="defaultCheck">{{ __('member_enterRoom.microphone') }}</label>
                                            </td>
                                            <td><a data-toggle="modal" data-target="#micModal" href="/">{{ __('member_enterRoom.check_microphone') }}</a></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <span id="camera_check"></span>&nbsp;&nbsp;
                                                <label for="defaultCheck">{{ __('member_enterRoom.camera') }}</label>
                                            </td>
                                            <td><a data-toggle="modal" data-target="#cameraModal" href="/">{{ __('member_enterRoom.check_camera') }}</a></td>
                                        </tr>
                                        <tr>
                                            <td><i class="fas fa-head-side-cough"></i>
                                                <label for="defaultCheck">{{ __('member_enterRoom.language') }}</label>
                                            </td>
                                            <td><select class="form-control" name="source_language">

                                                    <option value="cmn-Hant-TW,zh-Hant">中文</option>
                                                    <option value="en-US,en">English</option>
                                                    <option value="th-TH,th">ภาษาไทย</option>
                                                    <option value="ja-JP,ja">日本語</option>
                                                    <option value="ko-KR,ko">한국어</option>
                                                    <option value="vi-VN,vi">Tiếng Việt</option>
                                                    <option value="id-ID,id">Basa Sunda</option>
                                                    <option value="ms-MY,my">Basa Jawa</option>

                                               
                                                </select></td>
                                        </tr>
                                    </tbody>
                                </table>

                                <button type="submit" class="login-btn" style="margin: 2rem 0rem; padding: .5rem 2rem;">{{ __('member_enterRoom.enter_meeting') }}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
-->

<!-- descriptionModal -->
<div class="modal fade" id="descriptionModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">{{ __('member_enterRoom.browser_confirm') }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" style="box-shadow: none;" aria-label="Close">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                {{ __('member_enterRoom.browser_detail') }}
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('member_enterRoom.browser_btn_check') }}</button>
            </div>

        </div>
    </div>
</div>


<!-- micModal -->
<div class="modal fade" id="micModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">{{ __('member_enterRoom.microphone_confirm') }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" style="box-shadow: none;" aria-label="Close">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                {!! __('member_enterRoom.microphone_detail') !!}
                <!-- 通話進行時需使用麥克風，故您的瀏覽器將會詢問您是否允許使用您的麥克風，並請確認設備是否與裝置連接。 <a href="javascript: check_microphone_hardware()">點此重新驗證</a> -->
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('member_enterRoom.microphone_btn_check') }}</button>
            </div>

        </div>
    </div>
</div>


<!-- cameraModal -->
<div class="modal fade" id="cameraModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">{{ __('member_enterRoom.camera_confirm') }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" style="box-shadow: none;" aria-label="Close">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                {!! __('member_enterRoom.camera_detail') !!}
                <!-- 視訊進行時需使用視訊攝影機，故您的瀏覽器將會詢問您是否允許使用您的視訊攝影機，並請確認設備是否與裝置連接。 <a href="javascript: check_camera_hardware()">點此重新驗證</a> -->
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('member_enterRoom.camera_btn_check') }}</button>
            </div>
        </div>
    </div>
</div>




<script>
    // var browser_check = undefined;
    // var microphone_check = undefined;
    // var camera_check = undefined;
    var main_video = undefined;
    var load_image = undefined;
    // var micBtn = undefined;
    // var videocamBtn = undefined;

    var local_video = undefined;
    var local_head_shot = undefined;

    var microphone_start_status = undefined;
    var camera_start_status = undefined;

    // var camera_status = true;

    // var micIcon = undefined;
    // var videocamIcon = undefined;
    // var videocamStatus = undefined;
    // var micStatus = undefined;

    var audio_stream = undefined;

    var head_shot = '{{ $head_shot }}';

    var vue_data = undefined;

    const constraints_480 = {
        width: {
            exact: 640
        },
        height: {
            exact: 360
        }
    };

    const constraints_720 = {
        width: {
            exact: 1280
        },
        height: {
            exact: 720
        }
    };

    const constraints_1080 = {
        width: {
            exact: 1920
        },
        height: {
            exact: 1080
        }
    };



    window.addEventListener('load', () => {

        vue_data.checkmicrophone();
        vue_data.checkcamera();



        // micBtn = document.getElementById('micBtn');
        main_video = document.getElementById('main_video');
        load_image = document.getElementById('load_image');
        // videocamBtn = document.getElementById('videocamBtn');
        // camera_check = document.getElementById('camera_check');
        // browser_check = document.getElementById('browser_check');
        // microphone_check = document.getElementById('microphone_check');
        // micIcon = document.getElementById('micIcon');
        // videocamIcon = document.getElementById('videocamIcon');
        // videocamStatus = document.getElementById('videocamStatus');
        // micStatus = document.getElementById('micStatus');

        microphone_start_status = document.getElementById('microphone_start_status');
        camera_start_status = document.getElementById('camera_start_status');

        let sample_canvas = document.createElement('canvas');
        let sample_img = document.createElement('img');

        sample_canvas.width = 640;
        sample_canvas.height = 360;

        if (this.head_shot != '') {

            sample_img.src = this.head_shot;

        } else {

            sample_img.src = url + 'img/user.png';

        }

        sample_img.onload = () => {

            let ctx = sample_canvas.getContext("2d");
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, 640, 360);

            ctx.save()
            ctx.beginPath()
            ctx.arc(315, 160, 85, 0, Math.PI * 2, false)
            ctx.strokeStyle = '#2465D2'
            ctx.stroke()
            ctx.clip()
            //ctx.drawImage(img, 0, 0, 300, 300)
            ctx.drawImage(sample_img, 190, 40, 256, 256);
            ctx.restore()

            local_head_shot = sample_canvas.captureStream(1);

        };

        vue_data.checkbrowser()


        // micBtn.addEventListener('click', (e) => {

        //     if (micIcon.innerHTML === "mic_off") {
        //         micIcon.innerHTML = "mic";



        //         microphone_start_status.value = '1';

        //         micStatus.innerHTML = '：開啟';

        //         audio_stream.getAudioTracks().forEach(track => {
        //             track.enabled = true
        //         });


        //         if (micBtn.classList.contains('btn-switch-off')) {
        //             micBtn.classList.remove('btn-switch-off');
        //             micBtn.classList.add('btn-switch-on');
        //         }


        //     } else {
        //         micIcon.innerHTML = "mic_off";

        //         microphone_start_status.value = '0';

        //         micStatus.innerHTML = '：關閉';

        //         audio_stream.getAudioTracks().forEach(track => {
        //             track.enabled = false
        //         });

        //         if (micBtn.classList.contains('btn-switch-on')) {
        //             micBtn.classList.remove('btn-switch-on');
        //             micBtn.classList.add('btn-switch-off');
        //         }
        //     }


        // });

        // videocamBtn.addEventListener('click', (e) => {

        // if (videocamIcon.innerHTML === "videocam_off") {
        //     videocamIcon.innerHTML = "videocam";


        //     main_video.srcObject = local_video;

        //     camera_start_status.value = '1';


        //     camera_status = true;

        //     videocamStatus.innerHTML = '：開啟';

        //     if (videocamBtn.classList.contains('btn-switch-off')) {
        //         videocamBtn.classList.remove('btn-switch-off');
        //         videocamBtn.classList.add('btn-switch-on');
        //     }



        // } else {

        //     videocamIcon.innerHTML = "videocam_off";

        //     main_video.srcObject = local_head_shot;

        //     camera_start_status.value = '0';

        //     camera_status = true;

        //     videocamStatus.innerHTML = '：關閉';


        //     if (videocamBtn.classList.contains('btn-switch-on')) {
        //         videocamBtn.classList.remove('btn-switch-on');
        //         videocamBtn.classList.add('btn-switch-off');
        //     }
        // }


        // });

        // navigator.permissions.query({
        //     name: 'microphone'
        // }).then(function(result) {



        // if (result.state == 'granted') {

        //     if (microphone_check.classList.contains('fc-red')) {

        //         microphone_check.classList.remove('fc-red');
        //     }

        //     if (!microphone_check.classList.contains('fc-green')) {

        //         microphone_check.classList.add('fc-green');
        //     }

        //     // microphone_check.classList.add('ok');
        //     microphone_check.innerHTML = 'check_circle';

        //     check_microphone_hardware();


        // } else {


        //     if (microphone_check.classList.contains('fc-green')) {

        //         microphone_check.classList.remove('fc-green');
        //     }

        //     if (!microphone_check.classList.contains('fc-red')) {

        //         microphone_check.classList.add('fc-red');
        //     }

        //     //microphone_check.classList.add('noPass');
        //     microphone_check.innerHTML = 'cancel';


        // }

        // });

        // navigator.permissions.query({
        //     name: 'camera'
        // }).then(function(result) {

        //     if (result.state == 'granted') {

        //         camera_status = true;
        //         hasCamera = true;


        //         if (camera_check.classList.contains('fc-red')) {

        //             camera_check.classList.remove('fc-red');
        //         }

        //         if (!camera_check.classList.contains('fc-green')) {

        //             camera_check.classList.add('fc-green');
        //         }

        //         //camera_check.classList.add('ok');
        //         camera_check.innerHTML = 'check_circle';

        //         check_camera_hardware();


        //     } else {

        //         if (camera_check.classList.contains('fc-green')) {

        //             camera_check.classList.remove('fc-green');
        //         }

        //         if (!camera_check.classList.contains('fc-red')) {

        //             camera_check.classList.add('fc-red');
        //         }

        //         //camera_check.classList.add('noPass');
        //         camera_check.innerHTML = 'cancel';

        //         camera_status = false;



        //     }

        // });


        // check_browser();


    });

    // const check_browser = () => {

    // let info = browser_info();

    // if (info[1] == '1') {

    //     if (browser_check.classList.contains('fc-red')) {

    //         browser_check.classList.remove('fc-red');
    //     }

    //     if (!browser_check.classList.contains('fc-green')) {

    //         browser_check.classList.add('fc-green');
    //     }

    //     //browser_check.classList.add('ok');
    //     browser_check.innerHTML = 'check_circle';


    // } else {

    //     if (browser_check.classList.contains('fc-green')) {

    //         browser_check.classList.remove('fc-green');
    //     }

    //     if (!browser_check.classList.contains('fc-red')) {

    //         browser_check.classList.add('fc-red');
    //     }


    //     //browser_check.classList.add('noPass');
    //     browser_check.innerHTML = 'cancel';


    // }


    // };



    // const check_microphone_hardware = () => {

    //     navigator.mediaDevices.getUserMedia({
    //         "audio": true,
    //         "video": false
    //     }).then(function(stream) {

    //         audio_stream = stream;

    //         meter_process(audio_stream, document.getElementById('meter'));

    //         if (microphone_check.classList.contains('fc-red')) {

    //             microphone_check.classList.remove('fc-red');

    //         }

    //         if (!microphone_check.classList.contains('fc-green')) {

    //             microphone_check.classList.add('fc-green');
    //         }

    //         microphone_check.innerHTML = 'check_circle';

    //         $('.modal').modal('hide');



    //     }).catch(function(err) {



    //         if (microphone_check.classList.contains('fc-green')) {

    //             microphone_check.classList.remove('fc-green');

    //         }

    //         if (!microphone_check.classList.contains('fc-red')) {

    //             microphone_check.classList.add('fc-red');
    //         }

    //         //microphone_check.classList.add('noPass');
    //         microphone_check.innerHTML = 'cancel';

    //     });
    // };


    // const check_camera_hardware = () => {

    // navigator.mediaDevices.getUserMedia({
    //     "audio": false,
    //     "video": {
    //         width: 640,
    //         height: 360
    //     }
    // }).then(function(stream) {

    //     camera_status = true;

    //     local_video = stream;

    //     //main_video.src = "{{ asset('sample.mp4') }}";
    //     main_video.srcObject = stream;

    //     //load_image.src = '{{ asset("assets/img/main-image-04.svg") }}';

    //     if (camera_check.classList.contains('fc-red')) {

    //         camera_check.classList.remove('fc-red');
    //     }

    //     if (!camera_check.classList.contains('fc-green')) {

    //         camera_check.classList.add('fc-green');
    //     }

    //     //camera_check.classList.add('ok');
    //     camera_check.innerHTML = 'check_circle';

    //     $('.modal').modal('hide');




    // }).catch(function(err) {

    //     main_video.srcObject = local_head_shot;

    //     console.log(err);

    //     if (camera_check.classList.contains('fc-green')) {

    //         camera_check.classList.remove('fc-green');
    //     }

    //     if (!camera_check.classList.contains('fc-red')) {

    //         camera_check.classList.add('fc-red');
    //     }

    //     camera_check.innerHTML = 'cancel';

    //     camera_status = false;


    // });
    // };

    // const meter_process = (audio_stream, cnvs) => {

    //     let cnvs_cntxt = cnvs.getContext("2d");

    //     let audioContext = new AudioContext();
    //     let microphone = audioContext.createMediaStreamSource(audio_stream);
    //     let javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);

    //     let max_level_L = 0;
    //     let old_level_L = 0;

    //     microphone.connect(javascriptNode);
    //     javascriptNode.connect(audioContext.destination);
    //     javascriptNode.onaudioprocess = function(event) {

    //         let inpt_L = event.inputBuffer.getChannelData(0);
    //         let instant_L = 0.0;

    //         let sum_L = 0.0;
    //         for (let i = 0; i < inpt_L.length; ++i) {
    //             sum_L += inpt_L[i] * inpt_L[i];
    //         }
    //         instant_L = Math.sqrt(sum_L / inpt_L.length);
    //         max_level_L = Math.max(max_level_L, instant_L);
    //         instant_L = Math.max(instant_L, old_level_L - 0.008);
    //         old_level_L = instant_L;

    //         cnvs_cntxt.clearRect(0, 0, cnvs.width, cnvs.height);
    //         cnvs_cntxt.fillStyle = '#ccff99';
    //         cnvs_cntxt.fillRect(10, 10, (cnvs.width - 20) * (instant_L / max_level_L), (cnvs.height - 20)); // x,y,w,h

    //     }

    // }

    // const browser_info = () => {

    // let user_agent = navigator.userAgent;
    // let check_result = [];


    // if (user_agent.search('Mobile') > -1) { //行動裝置

    //     if (user_agent.search('Line') > -1) { //LINE瀏覽器

    //         check_result[0] = 'LINE Mobile瀏覽器';
    //         check_result[1] = '0';
    //         check_result[2] = '推薦使用Chrome或Safari瀏覽器';
    //         return check_result;


    //     } else {


    //         if (user_agent.search('Mac OS X') > -1) { //蘋果裝置

    //             if (user_agent.search("CriOS") > -1) {
    //                 check_result[0] = '蘋果行動裝置 Chrome瀏覽器';
    //                 check_result[1] = '0';
    //                 check_result[2] = '此裝置請使用Safari瀏覽器';
    //                 return check_result;
    //             } else if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") == -1) {
    //                 check_result[0] = '蘋果行動裝置 Safari瀏覽器';
    //                 check_result[1] = '1';
    //                 check_result[2] = '';
    //                 check_result[3] = '1';
    //                 return check_result;
    //             } else {
    //                 check_result[0] = '在蘋果行動裝置開啟不支援的瀏覽器';
    //                 check_result[1] = '0';
    //                 check_result[2] = '此裝置建議使用Safari瀏覽器';
    //                 return check_result;
    //             }


    //         } else { //Android裝置

    //             if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") > -1) {
    //                 check_result[0] = '行動裝置 Chrome瀏覽器';
    //                 check_result[1] = '1';
    //                 check_result[2] = '';
    //                 return check_result;
    //             } else {
    //                 check_result[0] = '在行動裝置開啟不支援的瀏覽器';
    //                 check_result[1] = '0';
    //                 check_result[2] = '此裝置建議使用Chrome瀏覽器';
    //                 return check_result;
    //             }


    //         }

    //     }


    // } else if (user_agent.search('Linux') > -1) { //Linux

    //     if (user_agent.search("Firefox") > -1) {
    //         check_result[0] = 'Linux電腦 Firefox瀏覽器';
    //         check_result[1] = '0';
    //         check_result[2] = '此裝置請使用Chrome瀏覽器';
    //         return check_result;
    //     } else if (user_agent.search("Chrome") > -1) {
    //         check_result[0] = 'Linux電腦 Chrome瀏覽器';
    //         check_result[1] = '1';
    //         check_result[2] = '';
    //         return check_result;
    //     } else {
    //         check_result[0] = '在Linux電腦開啟不支援的瀏覽器';
    //         check_result[1] = '0';
    //         check_result[2] = '此裝置建議使用Chrome瀏覽器';
    //         return check_result;
    //     }



    // } else { //桌上或攜帶電腦


    //     if (user_agent.search('Windows') > -1) { //Windows

    //         if (user_agent.search('Chrome') > -1) {
    //             check_result[0] = 'Windows電腦 Chrome瀏覽器';
    //             check_result[1] = '1';
    //             check_result[2] = '';
    //             return check_result;
    //         }
    //         if (user_agent.search('Firefox') > -1) {
    //             check_result[0] = 'Window電腦 Firefox瀏覽器';
    //             check_result[1] = '0';
    //             check_result[2] = '此裝置請使用Chrome瀏覽器';
    //             return check_result;
    //         } else {
    //             check_result[0] = '在Windows電腦開啟不明的瀏覽器';
    //             check_result[1] = '0';
    //             check_result[2] = '此裝置建議使用Chrome瀏覽器';
    //             return check_result;
    //         }


    //     }

    //     if (user_agent.search('Macintosh') > -1) { //Mac OS

    //         if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") > -1) {
    //             check_result[0] = '蘋果電腦 Chrome瀏覽器';
    //             check_result[1] = '1';
    //             check_result[2] = '';
    //             return check_result;
    //         } else if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") == -1) {
    //             check_result[0] = '蘋果電腦 Safari瀏覽器';
    //             check_result[1] = '0';
    //             check_result[2] = '此裝置建議使用Chrome瀏覽器';
    //             check_result[3] = '1';
    //             return check_result;

    //         } else {
    //             check_result[0] = '在蘋果電腦開啟不明的瀏覽器';
    //             check_result[1] = '0';
    //             check_result[2] = '此裝置建議使用Chrome瀏覽器';
    //             return check_result;
    //         }

    //     }

    // }
    // };




    //vue js start 20220802
    let main_data = {
        hasMicrophone: false,
        hasCamera: false,
        browsercheck: false,
        switchMicrophone: false,
        switchCamera: false,
        local_video_src: '', //camera
        local_head_shot: '', //頭像
        micstatus: true,
        camstatus: true,
        // mainVideo: undefined

    };

    vue_data = new Vue({

        el: '#app',
        data: main_data,
        computed: {},
        methods: {

            checkmicrophone() {
                navigator.permissions.query({
                    name: 'microphone'
                }).then(function(result) {
                    if (result.state == 'granted') {
                        switch (main_data.hasMicrophone) {
                            case false:
                                main_data.hasMicrophone = false;
                                break;
                            case true:
                                main_data.hasMicrophone = true;
                                break;
                        }
                        vue_data.checkmic_hardware()

                    } else {
                        switch (main_data.hasMicrophone) {
                            case false:
                                main_data.hasMicrophone = false;
                                break;
                            case true:
                                main_data.hasMicrophone = true;
                                break;
                        }
                    }
                });

            },
            checkmic_hardware() {
                navigator.mediaDevices.getUserMedia({
                    "audio": true,
                    "video": false
                }).then(function(stream) {
                    audio_stream = stream;
                    // meter_process(audio_stream, document.getElementById('meter'));
                    vue_data.meterprocess(audio_stream, document.getElementById('meter'))

                    if (main_data.hasMicrophone == false) {
                        main_data.hasMicrophone = false;
                    }

                    if (!main_data.hasMicrophone == true) {
                        main_data.hasMicrophone = true;
                    }

                    $('.modal').modal('hide');

                }).catch(function(err) {

                    if (main_data.hasMicrophone == false) {
                        main_data.hasMicrophone = false;
                    }

                    if (!main_data.hasMicrophone == true) {
                        main_data.hasMicrophone = true;
                    }
                });
            },

            checkcamera() {
                navigator.permissions.query({
                    name: 'camera'
                }).then(function(result) {
                    if (result.state == 'granted') {

                        switch (main_data.hasCamera) {
                            case false:
                                main_data.hasCamera = false;
                                break;
                            case true:
                                main_data.hasCamera = true;
                                break;
                        }
                        vue_data.checkcamera_hardware(constraints_480);
                    } else {
                        switch (main_data.hasCamera) {
                            case false:
                                main_data.hasCamera = false;
                                break;
                            case true:
                                main_data.hasCamera = true;
                                break;
                        }
                    }

                });

            },

            checkcamera_hardware(constraints_data) {

                if (local_video) {
                    local_video.getTracks().forEach(track => {
                        track.stop();
                    });
                }


                navigator.mediaDevices.getUserMedia({
                    audio: false,
                    video: constraints_data
                }).then(function(stream) {

                    // main_data.local_video_src = stream;
                    // main_data.mainVideo = main_data.local_video_src;


                    local_video = stream;
                    main_video.srcObject = stream;


                    if (main_data.hasCamera == false) {
                        main_data.hasCamera = false;
                    }
                    if (!main_data.hasCamera == true) {
                        main_data.hasCamera = true;
                    }

                    $('.modal').modal('hide');

                }).catch(function(err) {

                    console.log(err)

                    main_video.srcObject = local_head_shot;

                    if (main_data.hasCamera == true) {
                        main_data.hasCamera = true;
                    }
                    if (!main_data.hasCamera == false) {
                        main_data.hasCamera = false;
                    }

                    alert('攝影機無支援目前所選解析度！');

                });

            },

            checkbrowser() {
                let info = vue_data.browserinfo();

                if (info[1] == '1') {
                    if (main_data.browsercheck == false) {
                        main_data.browsercheck = false;
                    }
                    if (!main_data.browsercheck == true) {
                        main_data.browsercheck = true;
                    }
                } else {

                    if (main_data.browsercheck == true) {
                        main_data.browsercheck = true;
                    }
                    if (!main_data.browsercheck == false) {
                        main_data.browsercheck = false;
                    }
                }
            },

            browserinfo() {
                let user_agent = navigator.userAgent;
                let check_result = [];


                if (user_agent.search('Mobile') > -1) { //行動裝置

                    if (user_agent.search('Line') > -1) { //LINE瀏覽器

                        check_result[0] = 'LINE Mobile瀏覽器';
                        check_result[1] = '0';
                        check_result[2] = '推薦使用Chrome或Safari瀏覽器';
                        return check_result;

                    } else {

                        if (user_agent.search('Mac OS X') > -1) { //蘋果裝置

                            if (user_agent.search("CriOS") > -1) {
                                check_result[0] = '蘋果行動裝置 Chrome瀏覽器';
                                check_result[1] = '0';
                                check_result[2] = '此裝置請使用Safari瀏覽器';
                                return check_result;
                            } else if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") == -1) {
                                check_result[0] = '蘋果行動裝置 Safari瀏覽器';
                                check_result[1] = '1';
                                check_result[2] = '';
                                check_result[3] = '1';
                                return check_result;
                            } else {
                                check_result[0] = '在蘋果行動裝置開啟不支援的瀏覽器';
                                check_result[1] = '0';
                                check_result[2] = '此裝置建議使用Safari瀏覽器';
                                return check_result;
                            }

                        } else { //Android裝置

                            if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") > -1) {
                                check_result[0] = '行動裝置 Chrome瀏覽器';
                                check_result[1] = '1';
                                check_result[2] = '';
                                return check_result;
                            } else {
                                check_result[0] = '在行動裝置開啟不支援的瀏覽器';
                                check_result[1] = '0';
                                check_result[2] = '此裝置建議使用Chrome瀏覽器';
                                return check_result;
                            }

                        }

                    }


                } else if (user_agent.search('Linux') > -1) { //Linux

                    if (user_agent.search("Firefox") > -1) {
                        check_result[0] = 'Linux電腦 Firefox瀏覽器';
                        check_result[1] = '0';
                        check_result[2] = '此裝置請使用Chrome瀏覽器';
                        return check_result;
                    } else if (user_agent.search("Chrome") > -1) {
                        check_result[0] = 'Linux電腦 Chrome瀏覽器';
                        check_result[1] = '1';
                        check_result[2] = '';
                        return check_result;
                    } else {
                        check_result[0] = '在Linux電腦開啟不支援的瀏覽器';
                        check_result[1] = '0';
                        check_result[2] = '此裝置建議使用Chrome瀏覽器';
                        return check_result;
                    }

                } else { //桌上或攜帶電腦


                    if (user_agent.search('Windows') > -1) { //Windows

                        if (user_agent.search('Chrome') > -1) {
                            check_result[0] = 'Windows電腦 Chrome瀏覽器';
                            check_result[1] = '1';
                            check_result[2] = '';
                            return check_result;
                        }
                        if (user_agent.search('Firefox') > -1) {
                            check_result[0] = 'Window電腦 Firefox瀏覽器';
                            check_result[1] = '0';
                            check_result[2] = '此裝置請使用Chrome瀏覽器';
                            return check_result;
                        } else {
                            check_result[0] = '在Windows電腦開啟不明的瀏覽器';
                            check_result[1] = '0';
                            check_result[2] = '此裝置建議使用Chrome瀏覽器';
                            return check_result;
                        }


                    }

                    if (user_agent.search('Macintosh') > -1) { //Mac OS

                        if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") > -1) {
                            check_result[0] = '蘋果電腦 Chrome瀏覽器';
                            check_result[1] = '1';
                            check_result[2] = '';
                            return check_result;
                        } else if (user_agent.search("Safari") > -1 && user_agent.search("Chrome") == -1) {
                            check_result[0] = '蘋果電腦 Safari瀏覽器';
                            check_result[1] = '0';
                            check_result[2] = '此裝置建議使用Chrome瀏覽器';
                            check_result[3] = '1';
                            return check_result;

                        } else {
                            check_result[0] = '在蘋果電腦開啟不明的瀏覽器';
                            check_result[1] = '0';
                            check_result[2] = '此裝置建議使用Chrome瀏覽器';
                            return check_result;
                        }

                    }

                }
            },

            changemicstatus() {

                if (main_data.micstatus == false) {
                    main_data.micstatus = true;

                    audio_stream.getAudioTracks().forEach(track => {
                        track.enabled = true
                    });

                } else {
                    main_data.micstatus = false;

                    audio_stream.getAudioTracks().forEach(track => {
                        track.enabled = false
                    });
                }

            },

            changecamstatus() {

                if (main_data.camstatus == false) {
                    main_data.camstatus = true;
                    main_video.srcObject = local_video;
                } else {
                    main_data.camstatus = false;
                    main_video.srcObject = local_head_shot;
                }

            },

            meterprocess(audio_stream, cnvs) {
                let cnvs_cntxt = cnvs.getContext("2d");

                let audioContext = new AudioContext();
                let microphone = audioContext.createMediaStreamSource(audio_stream);
                let javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);

                let max_level_L = 0;
                let old_level_L = 0;

                microphone.connect(javascriptNode);
                javascriptNode.connect(audioContext.destination);
                javascriptNode.onaudioprocess = function(event) {

                    let inpt_L = event.inputBuffer.getChannelData(0);
                    let instant_L = 0.0;

                    let sum_L = 0.0;
                    for (let i = 0; i < inpt_L.length; ++i) {
                        sum_L += inpt_L[i] * inpt_L[i];
                    }
                    instant_L = Math.sqrt(sum_L / inpt_L.length);
                    max_level_L = Math.max(max_level_L, instant_L);
                    instant_L = Math.max(instant_L, old_level_L - 0.008);
                    old_level_L = instant_L;

                    cnvs_cntxt.clearRect(0, 0, cnvs.width, cnvs.height);
                    cnvs_cntxt.fillStyle = '#ccff99';
                    cnvs_cntxt.fillRect(10, 10, (cnvs.width - 20) * (instant_L / max_level_L), (cnvs.height - 20)); // x,y,w,h

                }
            },

            setResoultion(event) {

                let resoultion = event.target.value;

                eval('this.checkcamera_hardware(constraints_' + resoultion + ');');

                console.log('解析度換到' + resoultion + '囉！');

            }

        },
        filters: {},
        mounted() {

        },
        watch: {
            demo: {
                immediate: true,
                handler(newValue, oldValue) {}
            }
        }
    });
    //vue js end 20220802
</script>
@endsection