摄像头自建html直播,H5代码实现调用本地摄像头实现实时视频以及拍照功能
效果
这是柚子皮…
getUserMedia API
HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.
旧版API : navigator.getUserMedia
新版API : navigator.mediaDevices.getUserMedia
旧版语法:
getUserMedia(constraints, successCallback, errorCallback);
新版语法:
getUserMedia(constraints).then(successCallback).catch(errorCallback)
参数 constraints, 请求的媒体类型, 主要包含video和audio, 例如请求不带任何参数的视频和音频: {video: true, audio: true}
也可指定视频分辨率, 代码如下: {video: {width: 640, height: 360}}
移动设备上, 可指定使用前置摄像头, 代码如下: {video: {facingMode: 'user'}}
或者使用后置摄像头, 代码如下: {video: {facingMode: {exact : 'environment'}}} 成功回调函数successCallback的参数stream, 为MediaStream对象, 表示媒体流, 可以通过URL.createObjectURL(马上废弃)转换后设置为Video或Audio元素的src属性来使用, 也可以直接使用srcObject属性来使用. 失败回调函数为errorCallback
例子代码
摄像头拍照
拍照
//访问用户媒体设备的兼容方法
function getUserMedia(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) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
alert('不支持访问用户媒体');
}
document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 480, 320);
})
摄像头自建html直播,H5代码实现调用本地摄像头实现实时视频以及拍照功能相关推荐
- 摄像头 虚拟服务器页面,虚拟云服务器能调用本地摄像头
虚拟云服务器能调用本地摄像头 内容精选 换一换 虚拟IP(Virtual IP Address,简称VIP)是一个未分配给真实弹性云服务器网卡的IP地址.弹性云服务器除了拥有私有IP地址外,还可以拥有 ...
- webrtc 关于H5 和 画布 调用本地摄像头拍照功能的实现
1.代码的实现(html部分)<input type="button" title="开启摄像头" value="开启摄像头" onc ...
- H5调用本地摄像头拍摄照片
前言 最近项目中需要H5调用本地摄像头拍照的需求. 代码 <canvas id="canvasCemara" width="500" height=&qu ...
- ROS调用本地摄像头数据并在rviz里显示
ROS调用本地摄像头数据并在rviz里显示: 1 通过usb_cam驱动包启动摄像头 1.1 创建并编译usb_cam驱动程序 1.2 启动usb_cam_node节点 1.3 在rviz中显示本地摄 ...
- vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
- JS调用本地摄像头拍照(兼容各大浏览器及IE8+)
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
- Vue调用本地摄像头权限
使用电脑本地摄像头的权限 关于如何调用本地摄像头的问题 准备工具 (VS Code,Vue脚手架工具,Element UI) vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行 ...
- 利用python调用本地摄像头拍照,对图片命名并保存到指定位置,带界面
1.需求: 因项目需要做一个以图搜图的小程序,需要储备零件图库,约1000种 2.原计划&痛点 原本想通过手机挨个拍照,再拷贝出来,重命名,这样会耽误大量时间,且容易出错 3.解决方案 于是做 ...
- 摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
最新文章
- 工作小记(三)----说说北京生活的乐趣
- 关于java继承中父类方法可见性探讨
- tomcat升级_「shell脚本」懒人运维之自动升级tomcat应用(war包)
- H5活动刮刮卡功能的实现与注意事项
- 当我们在浏览器中输入一个URL后,发生了什么?
- mfc用数组怎么存储句柄_指南手机存储不足怎么办?用好这份清理指南你的手机还能再战三年...
- 自动化设置chrome禁止显示图片及恢复
- Redis 入门文档
- SQL中的Northwind数据库
- chrome调试微信网页_2022.2.9可行
- 查看连接过的WIFI密码方法汇总
- formality的一点经验总结
- 第二个版图项目:CD4511
- Halcon识别金属上的雕刻字符
- linux系统下的程序开发报告册,linux系统及其应用(应用开发)实验报告册.doc
- 0x80073712_处理win10更新提示错误代码“0x80073712”的方法
- 【牛客网】邮票;python set()集合函数,去重;“”、“|”、“-”求并集、交集、差集
- 对未来的一些规划和想法
- 计算机基础知识教案 技能高考,高考实用类文本阅读知识复习教案
- 解决WIN2003无法安装无线网卡驱动的问题
热门文章
- 【打卡-Coggle竞赛学习2023年1月】文本相似度匹配
- 假如让我来设计“腾讯视频”的推荐系统
- UNI-APP 桌面LOGO角标设置(ios)
- 王家林人工智能AI第14课:通过K-Nearest Neighbors改进在Social Network上销售汽车推荐系统的精准性 老师微信13928463918
- 试用 Emacs muse
- U盘图标不显示(转)
- SDM人脸对齐算法研究
- SIGIR2022 | 基于Prompt的用户自选公平性推荐算法
- XSS靶场prompt.ml过关详解
- 《安富莱嵌入式周报》第246期:2021.12.27--2022.01.02