通过按钮启用此命令

Question

现在，以下命令会自动运行。我想知道如何创建一个按钮来启用getUserMedia命令，然后显示下面的文本。

navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({
video:true,  audio: true
},
function(stream) {
// returns true if any tracks have active state of true
var result = stream.getVideoTracks().some(function(track) {
return track.enabled && track.readyState === 'live';
});
if (!result) {
$('.abada').append('<h4>2000(works)</h4>');
} else {
$('.abada').append('<h4>2000(works)</h4>');
}
},
function(e) {
$('.abada').append('<h4>2001(does not work)</h4>');
});
}

Answer 1

这里的关键是使用onclick函数。所以我们可以使用：

onclick="function"作为 HTML 标记的属性，

var element = document.querySelector("#button");

element.addEventListener("click", function);，

element.onclick = function;在 JavaScript 中都是可以接受的，

var element = $("#button");

element.on("click", function);，

element.click(function);在jQuery中。 所 示：

使用 jQuery：

$('#button').on("click", function () {
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true, audio: true
}, function(stream) {
// returns true if any tracks have active state of true
var result = stream.getVideoTracks().some(function(track) {
return track.enabled && track.readyState === 'live'; 
});
if (!result) {
$('.abada').append('<h4>2000(works)</h4>'); 
} else {
$('.abada').append('<h4>2000(works)</h4>');
}
}, function(e) { $('.abada').append('<h4>2001(does not work)</h4>'); 
});
);

.HTML：

<button id="button">Click Me For Streaming</button>