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. C/C++ 实现获取Linux系统参数

    今天忙活了半天,在Linux平台下,总算可以获取到一些性能指标了,结果,Linux上面的数据发送到Windows上面会出现发送为空的现象,可能是Socket套接字存在问题,不搞了. #include ...

  2. 从嘉手札<2023-10-30 >

    杂诗 壬戌辛酉日夜,闲看日月,秋风萧瑟,感怀予身期年孑然,岁月难留,故有所感,藉以此诗. 闲来无事,细数春秋. 初月难盈,残烛易收. 未若知人意,夜夜息绝游. 红叶醉天水,星河绕满楼. 竹影戚戚乱,岁 ...

  3. 移动端跨平台动效工具Lottie, PAG的使用

    动效工具Lottie   Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提 ...

  4. Git企业开发控制理论和实操-从入门到深入（二）｜Git的基本操作

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总https://blog.cs ...

  5. HarmonyOS 实战小项目开发（一）

    HarmonyOS 实战小项目开发(一) 日常逼逼叨 在经过一周多的Harmonyos 开发基础知识的学习后,自己通过对于Harmonyos基础知识的学习之后,结合自己的一些想法,独自完成了利用Ark ...

  6. yapi tag的问题，暂时只保留一个tag

    yapi 的tag是需要先在网页上建立好,如:

  7. Build 和 Compile 区别

  8. 开源.NetCore通用工具库Xmtool使用连载 - 发送短信篇

    [Github源码] <上一篇> 介绍了Xmtool工具库中的发送邮件类库,今天我们继续为大家介绍其中的发送短信类库. 发送短信就像发送邮件一样,在软件系统中使用非常普遍,甚至比发送邮件还 ...

  9. 从零开始的react入门教程（二），从react组件说到props/state的联系与区别

    壹 ❀ 引 在从零开始的react入门教程(一)一文中,我们搭建了第一个属于自己的react应用,并简单学习了jsx语法.jsx写法上与dom标签高度一致,当然我们也知道,本质上这些react元素都是 ...

  10. NC14291 Cut

    题目链接 题目 题目描述 给你一个长度为 \(n\) 的序列,你每次可以将一个序列分割成两个连续的的子序列, 分割的代价为原序列的总和. 现在允许你在初始时将序列重新排列一次. 问分割成 \(n\) ...