H5新特性_调用用户设备

调用摄像头:在移动端给用户做选择是打开相册还是摄像头;在 PC 端直接打开摄像头。
调用麦克风:无论在移动端还是 PC 端都直接打开麦克风。

首先页面布局一个videocanvas分别用来显示视频拍照

再添加两个按钮用来唤醒视频和拍照功能。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>调用用户设备</title>
	<script src="调用用户设备.js"></script>
</head>
<body>
	<input type="button" value="视频" id="btn1">
	<video width="500px" height="500px" id="video">不支持</video>
	<canvas id="canvas" width="500" height="500"></canvas>
	<button id="btn2">拍照</button>
</body>
</html>

接下来为按钮添加事件。

window.onload = function() {
    const btn1 = document.getElementById('btn1');
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const btn2 = document.getElementById('btn2');
    
    btn1.onclick = function() {
        const constraints = {
            video: {width: 500, height: 500},
            audio: true
        }
        
        const promise = navigator.mediaDevices.getUserMedia(constraints);
        
        promise.then(function(MediaStream) {
            console.log(MediaStream);
            video.srcObject = MediaStream;
            video.play();
        })
    }
    
    btn2.onclick = function() {
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);
    }
}

这里注意:

谷歌浏览器只支持https,localhost,127.0.0.1这三种地址获取摄像头,http是不能调用摄像头的t

发布了32 篇原创文章 · 获赞 1 · 访问量 2049
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览