{"id":1543,"date":"2018-10-23T14:43:51","date_gmt":"2018-10-23T13:43:51","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1543"},"modified":"2018-10-23T14:43:51","modified_gmt":"2018-10-23T13:43:51","slug":"html-video-microphone-capture","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/html-video-microphone-capture\/","title":{"rendered":"HTML Video \/ Microphone capture"},"content":{"rendered":"<pre class=\"lang:xhtml decode:true  \">&lt;html lang=\"en\"&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"utf-8\"&gt;\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n&lt;style&gt;div.select { margin: 0 0 1em 0; }&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"select\"&gt;\r\n    &lt;label for=\"audioSource\"&gt;Audio source: &lt;\/label&gt;&lt;select id=\"audioSource\"&gt;&lt;\/select&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"select\"&gt;\r\n    &lt;label for=\"videoSource\"&gt;Video source: &lt;\/label&gt;&lt;select id=\"videoSource\"&gt;&lt;\/select&gt;\r\n  &lt;\/div&gt;\r\n  &lt;video muted autoplay&gt;&lt;\/video&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n&lt;script&gt;\r\nconst videoElement = document.querySelector('video');\r\nconst audioSelect = document.querySelector('select#audioSource');\r\nconst videoSelect = document.querySelector('select#videoSource');\r\n\r\nnavigator.mediaDevices.enumerateDevices()\r\n  .then(gotDevices).then(getStream).catch(handleError);\r\n\r\naudioSelect.onchange = getStream;\r\nvideoSelect.onchange = getStream;\r\n\r\nfunction gotDevices(deviceInfos) {\r\n  for (var i = 0; i !== deviceInfos.length; ++i) {\r\n    var deviceInfo = deviceInfos[i];\r\n    var option = document.createElement('option');\r\n    option.value = deviceInfo.deviceId;\r\n    if (deviceInfo.kind === 'audioinput') {\r\n      option.text = deviceInfo.label ||\r\n        'microphone ' + (audioSelect.length + 1);\r\n      audioSelect.appendChild(option);\r\n    } else if (deviceInfo.kind === 'videoinput') {\r\n      option.text = deviceInfo.label || 'camera ' +\r\n        (videoSelect.length + 1);\r\n      videoSelect.appendChild(option);\r\n    } else {\r\n      console.log('Found one other kind of source\/device: ', deviceInfo);\r\n    }\r\n  }\r\n}\r\n\r\nfunction getStream() {\r\n  if (window.stream) {\r\n    window.stream.getTracks().forEach(function(track) {\r\n      track.stop();\r\n    });\r\n  }\r\n  var constraints = {\r\n    audio: {\r\n      deviceId: {exact: audioSelect.value}\r\n    },\r\n    video: {\r\n      deviceId: {exact: videoSelect.value}\r\n    }\r\n  };\r\n  navigator.mediaDevices.getUserMedia(constraints).\r\n    then(gotStream).catch(handleError);\r\n}\r\n\r\nfunction gotStream(stream) {\r\n  window.stream = stream; \/\/ make stream available to console\r\n  videoElement.srcObject = stream;\r\n}\r\n\r\nfunction handleError(error) {\r\n  console.log('Error: ', error);\r\n}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;html lang=&#8221;en&#8221;&gt; &lt;head&gt; &lt;meta charset=&#8221;utf-8&#8243;&gt; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1&#8243;&gt; &lt;style&gt;div.select { margin: 0 0 1em 0; }&lt;\/style&gt; &lt;\/head&gt; &lt;body&gt; &lt;div class=&#8221;select&#8221;&gt; &lt;label for=&#8221;audioSource&#8221;&gt;Audio source: &lt;\/label&gt;&lt;select id=&#8221;audioSource&#8221;&gt;&lt;\/select&gt; &lt;\/div&gt; &lt;div class=&#8221;select&#8221;&gt; &lt;label for=&#8221;videoSource&#8221;&gt;Video source: &lt;\/label&gt;&lt;select id=&#8221;videoSource&#8221;&gt;&lt;\/select&gt; &lt;\/div&gt; &lt;video muted autoplay&gt;&lt;\/video&gt; &lt;\/body&gt; &lt;\/html&gt; &lt;script&gt; const videoElement = document.querySelector(&#8216;video&#8217;); const audioSelect = document.querySelector(&#8216;select#audioSource&#8217;); const videoSelect = document.querySelector(&#8216;select#videoSource&#8217;); navigator.mediaDevices.enumerateDevices() .then(gotDevices).then(getStream).catch(handleError); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1543","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1543"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1543\/revisions"}],"predecessor-version":[{"id":1544,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1543\/revisions\/1544"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}