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>

通过按钮启用此命令

1 个答案: