媒体捕获与屏幕键盘之间存在冲突 Javascript
Conflicting Javascript between Media Capture and OnScreen Keyboard
免责声明：我是 Javascript、CSS 和 HTML 的新手，但我一直在浏览互联网，获取代码片段并将它们放在一起用于一个项目工作。
现在我卡住了，因为我不知道为什么，当我为媒体捕获启用 javascript 时，屏幕键盘消失了。据我所知，似乎没有任何冲突。
这是代码笔的 link：
https://codepen.io/sterlingbutters/pen/LJryzr
这是HTML:
<!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")，媒体 capture/stream 变得可见但屏幕键盘消失了。
有些奇怪的样式是从外部来源提取的，我不确定这是否与它有关？
请帮忙，提前致谢！
编辑：我相信这些是 index.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
您还没有为 audioSelect 和 videoSelect 创建元素。
要么制作元素（如果您从示例中获取它，请看那里），要么只删除第 18 行和第 19 行。
//audioSelect.onchange = getStream;
//videoSelect.onchange = getStream;
免责声明：我是 Javascript、CSS 和 HTML 的新手，但我一直在浏览互联网，获取代码片段并将它们放在一起用于一个项目工作。
现在我卡住了，因为我不知道为什么，当我为媒体捕获启用 javascript 时，屏幕键盘消失了。据我所知，似乎没有任何冲突。
这是代码笔的 link： https://codepen.io/sterlingbutters/pen/LJryzr
这是HTML:
<!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")，媒体 capture/stream 变得可见但屏幕键盘消失了。
有些奇怪的样式是从外部来源提取的，我不确定这是否与它有关？
请帮忙，提前致谢！
编辑：我相信这些是 index.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
您还没有为 audioSelect 和 videoSelect 创建元素。
要么制作元素（如果您从示例中获取它，请看那里），要么只删除第 18 行和第 19 行。
//audioSelect.onchange = getStream;
//videoSelect.onchange = getStream;