代码之家  ›  专栏  ›  技术社区  ›  Sterling Butters

媒体捕获和屏幕键盘之间的Javascript冲突

  •  2
  • Sterling Butters  · 技术社区  · 6 年前

    免责声明:我对Javascript、CSS和HTML是全新的,但是我一直在浏览互联网,把代码片段放在一起,为我正在进行的一个项目做准备。

    现在我被卡住了,因为我不明白为什么当我为媒体捕获启用javascript时,屏幕上的键盘会消失。据我所知,似乎没有任何冲突。

    以下是代码笔的链接: https://codepen.io/sterlingbutters/pen/LJryzr

    <!DOCTYPE html>
    <html>
    
    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
    </head>
    
    <body>
    
    <div onmousedown="WhichButton(event)"
         id = "information"> 
      Click the video with one of your mouse buttons to<br> return a number.
    
      <video autoplay
             class = "box"
             id = "screen"></video>
    
      <p>
      0 = The left mouse button<br>
      1 = The middle mouse button<br>
      2 = The right mouse button
      </p>
    
      <p><strong>Note:</strong> Internet Explorer 8, and earlier,<br> returns another result:</p>
    
      <p>
      1 = The left mouse button<br>
      4 = The middle mouse button<br>
      2 = The right mouse button
      </p>
    
    <!-- Position -->
      <div id="position"></div>
    <!-- Position -->
    
    <!-- Click -->
      <p id="demo"></p>
    <!-- Click -->
    
    </div>
    
    <!-- Keyboard -->
      <div id="keyboard">
      <input class="input" 
             size="125"
             placeholder="Tap on the virtual keyboard or type to enter text"/>
    
      <div class="simple-keyboard"></div>
    
      <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
      <script src="src/index.js"></script>
      </div>
    <!-- Keyboard -->
    
    </body>
    </html>
    

    以下是CSS:

    #screen{ 
      position: absolute;
      height: 120%;
      width: 100%;
      left: -119%;
      top: -15%;
    }
    
    #information{ 
      position: absolute;
      height: 50%;
      width: 50%;
      left: 60%;
      top: 5%;
    }
    
    #keyboard{ 
      position: absolute;
      height: 50%;
      width: 90%;
      left: 5%;
      top: 55%;
    }
    

    以下是Js:

    // Media Capture
    // // FROM HERE
    // const constraints = {
    //   video: true
    // };
    
    // const video = document.querySelector('video');
    
    // navigator.mediaDevices.getUserMedia(constraints).
    //   then((stream) => {video.srcObject = stream});
    
    // const videoElement = document.querySelector('video');
    // const audioSelect = document.querySelector('select#audioSource');
    // const videoSelect = document.querySelector('select#videoSource');
    
    // navigator.mediaDevices.enumerateDevices()
    //   .then(gotDevices).then(getStream).catch(handleError);
    
    // audioSelect.onchange = getStream;
    // videoSelect.onchange = getStream;
    
    // function gotDevices(deviceInfos) {
    //   for (let i = 0; i !== deviceInfos.length; ++i) {
    //     const deviceInfo = deviceInfos[i];
    //     const option = document.createElement('option');
    //     option.value = deviceInfo.deviceId;
    //     if (deviceInfo.kind === 'audioinput') {
    //       option.text = deviceInfo.label ||
    //         'microphone ' + (audioSelect.length + 1);
    //       audioSelect.appendChild(option);
    //     } else if (deviceInfo.kind === 'videoinput') {
    //       option.text = deviceInfo.label || 'camera ' +
    //         (videoSelect.length + 1);
    //       videoSelect.appendChild(option);
    //     } else {
    //       console.log('Found another kind of device: ', deviceInfo);
    //     }
    //   }
    // }
    
    // function getStream() {
    //   if (window.stream) {
    //     window.stream.getTracks().forEach(function(track) {
    //       track.stop();
    //     });
    //   }
    
    //   const constraints = {
    //     audio: {
    //       deviceId: {exact: audioSelect.value}
    //     },
    //     video: {
    //       deviceId: {exact: videoSelect.value}
    //     }
    //   };
    
    //   navigator.mediaDevices.getUserMedia(constraints).
    //     then(gotStream).catch(handleError);
    // }
    
    // function gotStream(stream) {
    //   window.stream = stream; // make stream available to console
    //   videoElement.srcObject = stream;
    // }
    
    // function handleError(error) {
    //   console.error('Error: ', error);
    // }
    // // TO HERE
    
    // Click
    function WhichButton(event) {
        document.getElementById("demo").innerHTML = "You pressed button: " + event.button;
    }
    
    // Position
    var position = document.getElementById("position");
    
    // Creating function that will tell the position of cursor
    // PageX and PageY will getting position values and show them in P
    function tellPos(p){
      position.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
    }
    addEventListener('mousemove', tellPos, false);
    
    // OnScreen Keyboard
    // https://github.com/hodgef/simple-keyboard
    
    let Keyboard = window.SimpleKeyboard.default;
    
    let myKeyboard = new Keyboard({
      onChange: input => onChange(input),
      onKeyPress: button => onKeyPress(button)
    });
    
    function onChange(input) {
      document.querySelector(".input").value = input;
      console.log("Input changed", input);
    }
    
    function onKeyPress(button) {
      console.log("Button pressed", button);
    }
    
    // Normal Keyboard
    document.addEventListener('keydown', function(event){
    
      // Gives Key Code: event.keyCode;
      // Gives Actual Key: event.key
      document.querySelector(".input").value += event.key;
      console.log("Input changed", input);
    } );
    

    对于以上3个代码段,屏幕上的键盘、鼠标位置和鼠标单击都会被跟踪和显示。

    enter image description here

    然而,通过取消注释Js的第一部分(“FROM HERE”-“TO HERE”),媒体捕获/流变得可见,但屏幕上的键盘消失了。

    enter image description here

    编辑:我相信这些都是索引.js:

    /*!
     * 
     *   simple-keyboard v2.3.26
     *   https://github.com/hodgef/simple-keyboard
     * 
     *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
     * 
     *   This source code is licensed under the MIT license found in the
     *   LICENSE file in the root directory of this source tree.
     *   
     */
    !function(t,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports.SimpleKeyboard=n():t.SimpleKeyboard=n()}(this,function(){return function(t){function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){t.exports=e(1)},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(2);n.default=o.a},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=e(3),a=(e.n(i),e(4)),s=e(5),r="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},u=function t(){o(this,t),c.call(this);var n="string"===typeof(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:".simple-keyboard",e="object"===r(arguments.length<=0?void 0:arguments[0])?arguments.length<=0?void 0:arguments[0]:arguments.length<=1?void 0:arguments[1];e||(e={}),this.keyboardDOM=document.querySelector(n),this.options=e,this.options.layoutName=this.options.layoutName||"default",this.options.theme=this.options.theme||"hg-theme-default",this.options.inputName=this.options.inputName||"default",this.input={},this.input[this.options.inputName]="",this.keyboardDOMClass=n.split(".").join(""),this.keyboardDOM?this.render():console.error('"'+n+'" was not found in the DOM.')},c=function(){var t=this;this.handleButtonClicked=function(n){var e=t.options.debug;if("{//}"===n)return!1;"function"===typeof t.options.onKeyPress&&t.options.onKeyPress(n);var o={newLineOnEnter:!0===t.options.newLineOnEnter};t.input[t.options.inputName]||(t.input[t.options.inputName]="");var i=s.a.getUpdatedInput(n,t.input[t.options.inputName],o);t.input[t.options.inputName]!==i&&(t.input[t.options.inputName]=i,e&&console.log("Input changed:",t.input),"function"===typeof t.options.onChange&&t.options.onChange(t.input[t.options.inputName])),e&&console.log("Key pressed:",n)},this.clearInput=function(n){n=n||t.options.inputName,t.input[t.options.inputName]=""},this.getInput=function(n){return n=n||t.options.inputName,t.input[t.options.inputName]},this.setInput=function(n,e){e=e||t.options.inputName,t.input[e]=n},this.setOptions=function(n){n=n||{},t.options=Object.assign(t.options,n),t.render()},this.clear=function(){t.keyboardDOM.innerHTML="",t.keyboardDOM.className=t.keyboardDOMClass},this.render=function(){t.clear();var n=t.options.layout?"hg-layout-custom":"hg-layout-"+t.options.layoutName,e=t.options.layout||a.a.getLayout(t.options.layoutName),o={};Array.isArray(t.options.buttonTheme)&&t.options.buttonTheme.forEach(function(t){if(t.buttons&&t.class){var n=t.buttons.split(" ");Array.isArray(n)&&n.forEach(function(n){var e=o[n];o[n]=e?e+" "+t.class:t.class})}else console.warn('buttonTheme row is missing the "buttons" or the "class". Please check the documentation.')}),t.keyboardDOM.className+=" "+t.options.theme+" "+n,e[t.options.layoutName].forEach(function(n){var e=n.split(" "),i=document.createElement("div");i.className+="hg-row",e.forEach(function(n){var e=s.a.getButtonClass(n),a=o[n],r=s.a.getButtonDisplayName(n,t.options.display),u=document.createElement("div");u.className+="hg-button "+e+(a?" "+a:""),u.onclick=function(){return t.handleButtonClicked(n)};var c=document.createElement("span");c.innerHTML=r,u.appendChild(c),i.appendChild(u),"function"===typeof t.options.onInit&&t.options.onInit()}),t.keyboardDOM.appendChild(i)})}};n.a=u},function(t,n){},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=function t(){o(this,t)};i.getLayout=function(t){return"qwerty"===t?{default:["` 1 2 3 4 5 6 7 8 9 0 - = {bksp}","{tab} q w e r t y u i o p [ ] \\","{lock} a s d f g h j k l ; ' {enter}","{shift} z x c v b n m , . / {shift}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {bksp}","{tab} Q W E R T Y U I O P { } |",'{lock} A S D F G H J K L : " {enter}',"{shift} Z X C V B N M < > ? {shift}",".com @ {space}"]}:"numeric"===t?{default:["1 2 3","4 5 6","7 8 9","{//} 0 {bksp}"]}:i.getLayout("qwerty")},n.a=i},function(t,n,e){"use strict";function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var i=function(){function t(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(n,e,o){return e&&t(n.prototype,e),o&&t(n,o),n}}(),a=function(){function t(){o(this,t)}return i(t,null,[{key:"normalizeString",value:function(t){var n=void 0;return n="@"===t?"at":","===t?"comma":"."===t?"dot":"\\"===t?"backslash":"/"===t?"fordardslash":"*"===t?"asterisk":"&"===t?"ampersand":"$"===t?"dollarsign":"="===t?"equals":"+"===t?"plus":"-"===t?"minus":"'"===t?"apostrophe":";"===t?"colon":"["===t?"openbracket":"]"===t?"closebracket":"//"===t?"emptybutton":"",n?" hg-button-"+n:""}},{key:"getDefaultDiplay",value:function(){return{"{bksp}":"backspace","{enter}":"< enter","{shift}":"shift","{s}":"shift","{tab}":"tab","{lock}":"caps","{accept}":"Submit","{space}":" ","{//}":" "}}}]),t}();a.getButtonClass=function(t){var n=t.includes("{")&&"{//}"!==t?"functionBtn":"standardBtn",e=t.replace("{","").replace("}","");return"hg-"+n+("standardBtn"===n?a.normalizeString(e):" hg-button-"+e)},a.getButtonDisplayName=function(t,n){return n=n||a.getDefaultDiplay(),n[t]||t},a.getUpdatedInput=function(t,n,e){var o=n,i=e.newLineOnEnter;if("{bksp}"===t&&o.length>0){o=o.slice(-2).match(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g)?o.slice(0,-2):o.slice(0,-1)}else"{space}"===t?o+=" ":"{tab}"===t?o+="\t":"{enter}"===t&&i?o+="\n":t.includes("{")||t.includes("}")||(o+=t);return o},n.a=a}])});
    //# sourceMappingURL=index.js.map
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Trobol    6 年前

    尚未为创建元素 audioSelect videoSelect .

    //audioSelect.onchange = getStream;
    //videoSelect.onchange = getStream;