图示：
代码：
| <!DOCTYPE html> |
| <html lang="zh"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>打开摄像头测试</title> |
| <link rel="stylesheet" href="./css/layui.css"> |
| </head> |
| <body class="layui-container"> |
| <div class="layui-panel"> |
| <div style="padding: 32px;margin: auto;text-align:center;"> |
| <h1>摄像头测试<h1> |
| <br> |
| <div id="app"><video autoplay controls id="video"></video></div> |
| <button id="cameraBtn" type="button" class="layui-btn">打开摄像头测试</button> |
| </div> |
| </div> |
| <script type="text/javascript"> |
| document.querySelector('#cameraBtn').onclick = function() { |
| let constraints = { |
| audio: true, |
| video: true |
| }; |
| navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { |
| document.querySelector('#video').srcObject = stream |
| }).catch(function(err) { |
| console.log(err.name + ":" + err.message); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
