js调用网页摄像头进行直播/拍照
【摘要】 前置条件需要https/火狐浏览器网页需要有摄像头创建一个html文件,里面包含2个标签:video 视频播放标签,canvas 图片渲染标签: <video id="video" autoplay style="width: 480px;height: 320px"></video> <canvas id="canvas" width="480" height="320"></...
前置条件
需要https/火狐浏览器
网页需要有摄像头
创建一个html文件,里面包含2个标签:
video 视频播放标签,canvas 图片渲染标签:
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<canvas id="canvas" width="480" height="320"></canvas>核心代码
获取浏览器支持的流媒体对象
function getUserMediaToPhoto(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firefox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}通过此函数,获取当前浏览器支持的getUserMedia 对象
开启浏览器摄像头/语音权限
getUserMediaToPhoto({ video: { width: 480, height: 320 },audio: true }, success, error);具体文档可查看:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
流处理:
调用后,浏览器将请求拍照权限,设备允许后将调用回调函数:
var video = document.getElementById('video');
var success = function(stream){
video.srcObject = stream;
}stream是一个mediaSteam对象https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
新建一个video标签,id为video,将srcObject赋值为stream即可在网页预览摄像头数据:
截图或流媒体传输:
流媒体传输可以自己百度,本人懒得整,这边说一下将video截图实现拍照功能:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 将video画面描绘在canvas画布上
context.drawImage(video, 0, 0, 480, 320);
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）