直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> const getMedia = async (arg = {}) => { return new Promise((resolve, reject) => { navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 1280, height: 720, } }).then(stream => { console.log('摄像头获取成功', stream); video = document.createElement('video'); video.style.cssText = 'position:fixed;top:20px;left:20px;width:640px' video.srcObject = stream; // 添加 play() 调用 video.play().then(() => { console.log('视频开始播放'); }).catch(err => { console.error('视频播放失败:', err); }); document.body.appendChild(video) }).catch(err => { console.log('摄像头获取失败', err); video = null; reject(err) }) }) } getMedia() </script> </body> </html>图像映射)
