@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>
<style>
    /* .table {
        margin-bottom: 0px;
        font-size: small;
    }

    .table td,
    .table th {
        border-top: 0px;
        padding: 0rem;
    }

    td a {
        color: #4831d0;
    }

    td a:hover {
        color: #fb0300;
    }

    .btn {
        font-size: small;
        color: #4831d0;
    }

    .ok {

        color: green;
        font-weight: bold;


    }

    .noPass {

        color: red;
        font-weight: bold;

    } */
</style>

@endsection

@section('content')

{{--<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: 382px;left: 320px;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">
    <!-- forget password box -->
    <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_checkRoom.start_with') }}<br><span style="color:blue;">

                        @if (session()->has('uuid'))

                        {{ $guest_nickname }}

                        @else

                        {{ __('member_checkRoom.guest') }}

                        @endif

                    </span>
                    <br>身份進入<br><span style="color: #4831d0; font-weight: bold;">{{ $host_nickname; }}</span><br>{{ __('member_checkRoom.meeting_space') }}
                </p>
                <div class="container">
                    <!-- forget password -->
                    <div id="enter_room" class="container tab-pane active">
                        <form action="/room/meeting_guest/{{ $room_name }}" method="post">

                            {{ csrf_field() }}
                            <table class="table" style="font-size: 20px;">
                                <tbody>
                                    <tr>
                                        <td>
                                            <span id="browser_check"></span>
                                            <label for="defaultCheck">{{ __('member_checkRoom.browser') }}</label>
                                        </td>
                                        <td><a data-toggle="modal" data-target="#descriptionModal" href="/">{{ __('member_checkRoom.browser_explain') }}</but ton></a>

                                    </tr>
                                    <tr>
                                        <td>
                                            <span id="microphone_check"></span>
                                            <label for="defaultCheck">{{ __('member_checkRoom.microphone') }}</label>
                                        </td>
                                        <td><a data-toggle="modal" data-target="#micModal" href="/">{{ __('member_checkRoom.check_microphone') }}</a></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span id="camera_check"></span>
                                            <label for="defaultCheck">{{ __('member_checkRoom.camera') }}</label>
                                        </td>
                                        <td><a data-toggle="modal" data-target="#cameraModal" href="/">{{ __('member_checkRoom.check_camera') }}</a></td>

                                    </tr>
                                    @if (session()->has('uuid'))
                                    <input type="hidden" name="user_name" value="{{ $guest_nickname }}">

                                    @else

                                    <tr>
                                        <td><i class="fas fa-user"></i>
                                            <label for="defaultCheck">{{ __('member_checkRoom.name') }}</label>
                                        </td>
                                        <td><input type="text" class="form-control" name="user_name" required></td>

                                    </tr>

                                    @endif
                                    <tr>
                                        <td><i class="fas fa-head-side-cough"></i>
                                            <label for="defaultCheck">{{ __('member_checkRoom.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>

                                                <!-- <option value="cmn-Hant-TW,zh-TW">中文</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_checkRoom.enter_meeting') }}</button>

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

            </div>
        </div>
    </div>
</div>
</div>--}}

<!-- chenglin start -->

<section class="main d-flex align-items-center">
    <div class="content">
        <div id="vuememcheckroom" 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; position:relative;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 :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_checkRoom.enter_meet_status')}}</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_checkRoom.microphone')}}
                        </button><span>{{__('member_checkRoom.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_checkRoom.microphone')}}
                        </button><span>{{__('member_checkRoom.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_checkRoom.microphone')}}
                        </button><span>{{__('member_checkRoom.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_checkRoom.camera')}}
                        </button><span>{{__('member_checkRoom.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_checkRoom.camera')}}
                        </button><span>{{__('member_checkRoom.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_checkRoom.camera')}}
                        </button><span>{{__('member_checkRoom.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_guest/{{ $room_name }}" method="post">
                            @csrf
                            <input type="hidden" name="user_name" value="">
                            <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">
                                <!-- <img src="{{ asset('assets/img/logo-login.png') }}" class="w-25 mb-3"> -->
                                <div style="padding-top: 35px;"></div>
                                <img src="{{ asset('new_front/img/logo_shadow.png') }}" style="width: 200px; height: auto;">
                            </div>
                            <div>
                                <p class="m-4">{{ __('member_checkRoom.start_with') }}<br><span style="color:blue;">

                                        @if (session()->has('uuid'))

                                        {{ $guest_nickname }}

                                        @else

                                        {{ __('member_checkRoom.guest') }}

                                        @endif

                                    </span>
                                    <br>身份進入<br><span style="color: #4831d0; font-weight: bold;">{{ $host_nickname; }}</span><br>{{ __('member_checkRoom.meeting_space') }}
                                </p>
                                <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_checkRoom.browser') }}
                                    </div>
                                    <div class="col"> <a role="button" style="color:#35C2BA" data-bs-toggle="modal" data-bs-target="#descriptionModal" href="#">{{ __('member_checkRoom.browser_explain') }}</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_checkRoom.microphone') }}
                                    </div>
                                    <div class="col"> <a role="button" style="color:#35C2BA" data-bs-toggle="modal" data-bs-target="#micModal" href="#">{{ __('member_checkRoom.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_checkRoom.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_checkRoom.check_camera') }}</a> </div>
                                </div>
                                @if (session()->has('uuid'))
                                <input type="hidden" name="user_name" value="{{ $guest_nickname }}">
                                @else

                                <div class="row align-items-center p-2">
                                    <div class="col-4 ">
                                        <i class="fas fa-user"></i>
                                        <label for="defaultCheck">{{ __('member_checkRoom.name') }}</label>
                                    </div>
                                    <div class="col-8">
                                        <input type="text" class="form-control" name="user_name" required>
                                    </div>
                                </div>

                                @endif
                                <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_checkRoom.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">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_checkRoom.enter_meeting')}}</button>
                                </div>
                            </div>
                        </form>

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

<!-- chenglin end -->



<!-- 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 local_video = undefined;
    var head_shot = '{{ $head_shot }}';
    var local_head_shot = undefined;
    // var load_image = 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();

        main_video = document.getElementById('main_video');


        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);
            local_head_shot = sample_canvas.captureStream(1);
            main_video.srcObject = local_head_shot;


        };



        vue_data.checkbrowser()

        // browser_check = document.getElementById('browser_check');
        // microphone_check = document.getElementById('microphone_check');
        // camera_check = document.getElementById('camera_check');
        // load_image = document.getElementById('load_image');

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

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

        //         microphone_check.classList.add('ok');
        //         microphone_check.innerHTML = '<i class="fas fa-check"></i>';

        //         check_microphone_hardware();


        //     } else {

        //         microphone_check.classList.add('noPass');
        //         microphone_check.innerHTML = '<i class="fas fa-times"></i>';


        //     }

        // });

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

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

        //         camera_check.classList.add('ok');
        //         camera_check.innerHTML = '<i class="fas fa-check"></i>';

        //         check_camera_hardware();


        //     } else {

        //         camera_check.classList.add('noPass');
        //         camera_check.innerHTML = '<i class="fas fa-times"></i>';


        //     }

        // });


        // check_browser();



    });

    // const check_browser = () => {

    //     let info = browser_info();

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

    //         browser_check.className = '';
    //         browser_check.innerHTML = '';

    //         browser_check.classList.add('ok');
    //         browser_check.innerHTML = '<i class="fas fa-check"></i>';


    //     } else {

    //         browser_check.className = '';
    //         browser_check.innerHTML = '';


    //         browser_check.classList.add('noPass');
    //         browser_check.innerHTML = '<i class="fas fa-times"></i>';


    //     }


    // };

    // 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;
    //             }

    //         }

    //     }


    // };

    // const check_microphone_hardware = () => {

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

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

    //         microphone_check.className = '';
    //         microphone_check.innerHTML = '';

    //         microphone_check.classList.add('ok');
    //         microphone_check.innerHTML = '<i class="fas fa-check">';

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



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

    //         microphone_check.className = '';
    //         microphone_check.innerHTML = '';

    //         microphone_check.classList.add('noPass');
    //         microphone_check.innerHTML = '<i class="fas fa-times"></i>';

    //     });
    // };


    // const check_camera_hardware = () => {

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

    //         main_video.srcObject = stream;

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

    //         camera_check.className = '';
    //         camera_check.innerHTML = '';

    //         camera_check.classList.add('ok');
    //         camera_check.innerHTML = '<i class="fas fa-check">';

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




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

    //         camera_check.className = '';
    //         camera_check.innerHTML = '';

    //         camera_check.classList.add('noPass');
    //         camera_check.innerHTML = '<i class="fas fa-times"></i>';


    //     });
    // };

    // 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

    //     }

    // }
</script>



<!-- vue js start 20220803 -->
<script>
    let main_data = {
        hasMicrophone: false,
        hasCamera: false,
        browsercheck: false,
        local_head_shot: '',
        micstatus: true,
        camstatus: true
    };

    var vue_data = new Vue({

        el: '#vuememcheckroom',
        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();
                    });
                }

                if (typeof constraints_data === "undefined") {

                    constraints_data = constraints_480;
                }


                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 + '囉！');

            }


        },
    });
</script>
<!-- vue js end 20220803  -->

@endsection