首页前端怎么实现点击按钮实现摄像头视频播放

前端怎么实现点击按钮实现摄像头视频播放

时间: 2024-01-30 21:08:29 浏览: 146

前端可以使用WebRTC技术来实现点击按钮实现摄像头视频播放。具体实现步骤如下： 1. 在HTML页面中添加一个video标签，用于显示摄像头视频。 ``` <video id="video" autoplay></video> ``` 2. 使用JavaScript获取摄像头视频流。 ``` navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { var video = document.getElementById('video'); video.srcObject = stream; }) .catch(function(error) { console.log('getUserMedia error: ', error); }); ``` 3. 在按钮点击事件中触发播放视频。 ``` var button = document.getElementById('button'); button.addEventListener('click', function() { var video = document.getElementById('video'); video.play(); }); ``` 完整代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Click to Play Camera</title> </head> <body> <video id="video" autoplay></video> <button id="button">Play Camera</button> <script> var button = document.getElementById('button'); button.addEventListener('click', function() { var video = document.getElementById('video'); video.play(); }); navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { var video = document.getElementById('video'); video.srcObject = stream; }) .catch(function(error) { console.log('getUserMedia error: ', error); }); </script> </body> </html> ```

阅读全文