getUserMedia 获取 摄像头 拍照 代码 1920-1080 video canvas

20210422

摄像头代码 是基于 https 协议的,需要开启协议后才能测试

http-server -S 开启 https 服务

https://www.cnblogs.com/pengchenggang/p/14685560.html

<!DOCTYPE html>
<html lang="en"> <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>
</head> <body>
<video id="video" width="480" height="320"></video>
<div> <button id="capture">拍照</button> </div> <video id="videoBig" width="1920" height="1080" style="display: none;"></video>
<canvas id="canvas" width="1920" height="1080" style="display: none;"></canvas>
<script>
//访问用户媒体设备的兼容方法
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);
}
} var video = document.getElementById('video');
var videoBig = document.getElementById('videoBig');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); function success(stream) {
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream); //video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play(); videoBig.srcObject = stream;
videoBig.play()
} function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
} // jsp 调用拍照后的函数
function snapGetBase64(base64) {
console.info('snapGetBase64 - image Base64: ', base64)
} function main() {
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({
video: {
width: 1920,
height: 1080
}
}, success, error);
} else {
alert('不支持访问用户媒体');
} document.getElementById('capture').addEventListener('click', function () {
context.drawImage(videoBig, 0, 0, 1920, 1080);
var image = canvas.toDataURL('image/jpeg', 0.8)
snapGetBase64(image)
})
} main();
</script>
</body> </html>

getUserMedia 获取 摄像头 拍照 代码 1920-1080 video canvas的更多相关文章

  1. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  2. [转] HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. h5获取摄像头拍照功能

    完整代码展示 <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <met ...

  4. OpenCv调用摄像头拍照代码

    近期在研究OpenCv对摄像头的调用.现将代码贴出,供大家批评指正. 1.申明 #include"./opencv2/opencv.hpp" #ifdef _DEBUG #prag ...

  5. js实现浏览器调用电脑的摄像头拍照

    <!DOCTYPE html> <html lang="en"> <head> <style> * { margin: ; padd ...

  6. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  7. 如何用猿大师播放器在网页上同时播放20路以上海康威视高分辨率(1920*1080)摄像头RTSP视频流?

    问: 同时播放分辨率为1920*1080的高清分辨率的摄像头视频流,找了很长时间试过无数方法均不能满足,服务器转码方案卡顿非常严重,几乎不能播放.了解到猿大师可以用到本机的硬件解码和加速,播放高清视频 ...

  8. vue 调用摄像头拍照以及获取相片本地路径(实测有效)

    在学习这个的时候有一点前提:这是针对手机功能的,所以最重要的是要用手机进行实时调试 包含图片的增加和删除功能 <template> <div> <!--照片区域--> ...

  9. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  10. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

随机推荐

  1. Gin 响应方式

    响应 1. 字符串方式 r.GET("/user/save", func(ctx *gin.Context) { ctx.String(http.StatusOK, "t ...

  2. PHP中的正则表达式相关函数

    PHP中的正则表达式相关函数 常用的正则函数 1.执行一个正则表达式匹配 int preg_match ( string pattern , string subject [, array & ...

  3. Delphi 字符串截取函数【LeftStr,RightStr,MidStr】

    如果要使用LeftStr,RightStr,MidStr必需引用系统单元StrUtils; 声明变量Str:string; Str:=HelloWorld; 1,LeftStr(Str,2)=He;/ ...

  4. Linux-计算毫秒数

    date +%s返回自划时代以来的秒数. date +%s%N返回秒数+当前纳秒数. 因此,echo $(($(date +%s%N)/1000000))是你需要的毫秒数 date +"%T ...

  5. 开源.NetCore通用工具库Xmtool使用连载 - 随机值篇

    [Github源码] <上一篇> 详细介绍了Xmtool工具库中的散列算法类库,今天我们继续为大家介绍其中的随机值类库. 基于系统提供的Random获取随机值方法已经足够简单和易用,本类库 ...

  6. 你应该知道的提升Visual Studio开发能力的5个技巧

    如果你像我一样,或许你也沉迷于开发者工具.这就是我喜欢 Visual Studio 的原因之一--它有无数的生产力技巧. 这篇文章将展示五个这样的技巧,这些技巧对我每天的工作都有帮助.请注意,这些仅适 ...

  7. CF739A Alyona and mex 题解

    题目传送门 前置知识 贪心 | 构造 解法 从贪心的角度分析,最小的 \(\operatorname{mex}\) 仅会与长度最小的区间有关:另外为使得 \(\operatorname{mex}\) ...

  8. Laravel入坑指南(2)——路由、控制器

    接上一节,我们已经把Laravel有Hello World项目跑起来了. 现在各位小友最着急的,应该是想了解,我们怎么在"页面"echo一个自己的Hello World字符串. & ...

  9. flask+xlswriter+axios导出Excel

    flask后端 starttime = request.json.get('starttime') endtime = request.json.get('endtime') # 根据时间查询数据库数 ...

  10. 我的小程序之旅六:微信公众号授权登录(适用于H5小程序)

    实现步骤 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果需要) 4 第四步:拉取用户信息(需sco ...