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

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

codepen styling css html javascript

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个代码段,屏幕上的键盘、鼠标位置和鼠标单击都会被跟踪和显示。

然而,通过取消注释Js的第一部分(“FROM HERE”-“TO 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 年前

Trobol 6 年前

尚未为创建元素 audioSelect 和 videoSelect .

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