index.html
<!DOCTYPE html> <!-- * Copyright (c) 2015 The WebRTC project authors. All Rights Reserved. * * Use of this source code is governed by a BSD-style license * that can be found in the LICENSE file in the root of the source * tree. --> <html> <head> <meta charset="utf-8"> <meta name="description" content="WebRTC code samples"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta itemprop="description" content="Client-side WebRTC code samples"> <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png"> <meta itemprop="name" content="WebRTC code samples"> <meta name="mobile-web-app-capable" content="yes"> <meta id="theme-color" name="theme-color" content="#ffffff"> <base target="_blank"> <title>Select audio and video sources</title> <link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png"> <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"> <!-- <link rel="stylesheet" href="../../../css/main.css"> --> <style> div.select { display: inline-block; margin: 0 0 1em 0; } p.small { font-size: 0.7em; } label { width: 12em; display: inline-block; } </style> </head> <body> <div id="container"> <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a><span>Select sources & outputs</span> </h1> <p>Get available audio, video sources and audio output devices from <code>mediaDevices.enumerateDevices()</code> then set the source for <code>getUserMedia()</code> using a <code>deviceId</code> constraint.</p> <div class="select"> <label for="audioSource">Audio input source: </label><select id="audioSource"></select> </div> <div class="select"> <label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select> </div> <div class="select"> <label for="videoSource">Video source: </label><select id="videoSource"></select> </div> <video id="video" playsinline autoplay></video> <p class="small"><b>Note:</b> If you hear a reverb sound your microphone is picking up the output of your speakers/headset, lower the volume and/or move the microphone further away from your speakers/headset.</p> <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/devices/input-output" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a> </div> <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="js/main.js" async></script> <script src="./js/lib/ga.js"></script> </body> </html>main.js
/* * Copyright (c) 2015 The WebRTC project authors. All Rights Reserved. * * Use of this source code is governed by a BSD-style license * that can be found in the LICENSE file in the root of the source * tree. */ 'use strict'; const videoElement = document.querySelector('video'); const audioInputSelect = document.querySelector('select#audioSource'); const audioOutputSelect = document.querySelector('select#audioOutput'); const videoSelect = document.querySelector('select#videoSource'); const selectors = [audioInputSelect, audioOutputSelect, videoSelect]; audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype); function gotDevices(deviceInfos) { // Handles being called several times to update labels. Preserve values. const values = selectors.map(select => select.value); selectors.forEach(select => { while (select.firstChild) { select.removeChild(select.firstChild); } }); 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 ${audioInputSelect.length + 1}`; audioInputSelect.appendChild(option); } else if (deviceInfo.kind === 'audiooutput') { option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`; audioOutputSelect.appendChild(option); } else if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`; videoSelect.appendChild(option); } else { console.log('Some other kind of source/device: ', deviceInfo); } } selectors.forEach((select, selectorIndex) => { if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) { select.value = values[selectorIndex]; } }); } navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError); // Attach audio output device to video element using device/sink ID. function attachSinkId(element, sinkId) { if (typeof element.sinkId !== 'undefined') { element.setSinkId(sinkId) .then(() => { console.log(`Success, audio output device attached: ${sinkId}`); }) .catch(error => { let errorMessage = error; if (error.name === 'SecurityError') { errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`; } console.error(errorMessage); // Jump back to first output device in the list as it's the default. audioOutputSelect.selectedIndex = 0; }); } else { console.warn('Browser does not support output device selection.'); } } function changeAudioDestination() { const audioDestination = audioOutputSelect.value; attachSinkId(videoElement, audioDestination); } function gotStream(stream) { window.stream = stream; // make stream available to console videoElement.srcObject = stream; // Refresh button list in case labels have become available return navigator.mediaDevices.enumerateDevices(); } function handleError(error) { console.log('navigator.getUserMedia error: ', error); } function start() { if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } const audioSource = audioInputSelect.value; const videoSource = videoSelect.value; const constraints = { audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, video: {deviceId: videoSource ? {exact: videoSource} : undefined} }; navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError); } audioInputSelect.onchange = start; audioOutputSelect.onchange = changeAudioDestination; videoSelect.onchange = start; start();ga.js
(function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject']=r; i[r]=i[r]||function() { (i[r].q=i[r].q||[]).push(arguments); }, i[r].l=1*new Date(); a=s.createElement(o), m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a, m); })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-48530561-1', 'auto'); ga('send', 'pageview');server.js
'use strict' var http = require('http'); var https = require('https'); var fs = require('fs'); var serveIndex = require('serve-index'); var express = require('express'); var app = express(); //顺序不能换 app.use(serveIndex('./public')); app.use(express.static('./public')); var options = { key : fs.readFileSync('./cert/1557605_www.learningrtc.cn.key'), cert : fs.readFileSync('./cert/1557605_www.learningrtc.cn.pem') } var https_server = https.createServer(options, app); https_server.listen(443, '0.0.0.0'); var http_server = http.createServer(app); http_server.listen(80, '0.0.0.0');url前面必须https://
