Блог

Главная - Вопросы по программированию - Есть ли способ показать, как canvas запускает div, чтобы получить объект в сценарии?

Есть ли способ показать, как canvas запускает div, чтобы получить объект в сценарии?

#javascript #html #webrtc

Вопрос:

Я создаю доску для своей системы видеоконференцсвязи usign WebRTC, то, что я хочу добавить прямо сейчас, — это доска. У меня есть следующие коды, которые включают тег div, который является частью триггера для отображения окна или доски.

  <div class="video-mute-icon" id="wb-window" title="Whiteboard" style="cursor: pointer;">
      <i class="fa fa-video" id="self_wBoard"></i>
 </div>

Далее у меня есть html-файл canvas

  <div id="demo">
    <div class="col-md-9">
        <div id="main-container" class="enx-layout-container">
            <canvas id="wb"></canvas>
        </div>

    </div>
    <div class="col-md-3" >
        <div id="localStreamPlayer"></div>
        <div id="remoteStreamPlayer"></div>
        <div id="canvasStreamPlayer"></div>
    </div>
</div>

Наконец-то у меня есть этот сценарий

 <script>
    var wbObject  =  new EnxWb(
        {   canvasId: 'wb', // id of the canvas 
            initialWidth: 1000,
            initialHeight: 500,
            scheme : 'custom',
            custom: {
                bgColor : 'red',        /* WB Backbround */
                toolbarBGColor : 'black',   /* Toolbar Background */
                brushColor:'black',     /* Default Brush Color */
                icon : {            /* Toolbar Icon definition */
                    size: 'medium', /* Enum: small,large,medium */
                    type: 'rounded-square', /* Enum:  square,rounded-square */
                    BGColor: '#f3f3f3', /* Tool Background */
                    FGColor: '#000000', /* Tool Foreground */
                    border: '1px solid grey'/* Tool Border */
                }
            }
        }
    );

    document.getElementById("demo").innerHTML = wbObject.canvasId;

</script>

Я также импортировал файлы JS, такие как:

 <script type="text/javascript" src="js/EnxRtc.js"></script>
<script type="text/javascript" src="js/EnxWb.js"></script>
<script type="text/javascript" src="js/confo.js"></script>

Изображение:
Это изображение относится к выходным данным

Комментарии:

1. document.getElementById("demo").innerHTML принимает строку HTML и в рамках задания преобразует эту HTML-разметку в содержимое live DOM. Я почти уверен wbObject.canvasId , что это не строка HTML, поэтому не могли бы вы объяснить, что вы ожидаете от этой строки? Холст уже есть, он уже в демо-версии div#, так зачем вам вообще что-то делать в этом отношении? (Также обратите внимание, что в HTML5 вы не указываете тип скрипта, если это не javascript. Но вы определенно должны использовать атрибуты async и defer )

2. @Mike’Pomax’Camermans — здравствуйте, сэр, я ожидаю показать этот холст с помощью класса div, пожалуйста, посмотрите изображение, которое я обновил выше. Спасибо

Метки: , ,