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. Spring一套全通3—AOP编程

    百知教育 - Spring系列课程 - AOP编程 第一章.静态代理设计模式 1. 为什么需要代理设计模式 1.1 问题 在JavaEE分层开发开发中,那个层次对于我们来讲最重要 DAO ---> ...

  2. 神经网络优化篇：详解Batch Norm 为什么奏效？（Why does Batch Norm work?）

    Batch Norm 为什么奏效? 为什么Batch归一化会起作用呢? 一个原因是,已经看到如何归一化输入特征值\(x\),使其均值为0,方差1,它又是怎样加速学习的,有一些从0到1而不是从1到100 ...

  3. Android 子线程更新UI的六种方式

    1.注意: (1)子线程需要切换到UI线程或者主线程去更新线程. (2)但是子线程单独也是可以更新UI的,只是谷歌要求我们需要到UI线程去更新. eg: @Override protected voi ...

  4. Hadoop组件兼容性

    (1)HBase和Hadoop.zookeeper.JDK兼容版本 参考网址: https://hbase.apache.org/book.html 1)JDK和Hbase的兼容版本  对于JDK,最 ...

  5. 【Unity3D】UGUI之Dropdown

    1 Dropdown属性面板 ​ 在 Hierarchy 窗口右键,选择 UI 列表里的 Dwondown (下拉列表)控件,即可创建 Dwondown 控件,选中创建的 Dwondown 控件,按键 ...

  6. SpringCloud服务注册与发现Eureka实战

    介绍 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现服务治理在传统的rpc远程调用框架中,管理每个服务与服务之间依赖关系比较复杂,管理比较复杂,所以需要使用服务 ...

  7. Rtmp 开发学习

    参考文章:视频传输协议详解(RTMP.RTSP.HLS) RTMP--Real Time Messaging Protocol(实时消息传输协议) RTMP 是由 Adobe 公司提出的,在互联网 T ...

  8. Telegraph多线程下载器v0.5--tkinter

    介绍 最近在拿python写一点小工具,结合之前的多线程.线程池技术做了个GUI版的Telegraph图册批量下载工具. 因为开发平台是在Mac,虽然对Windows平台的也进行了打包,但最垃圾的Wi ...

  9. Redis缓存应用场景

    记录一下自己的听课笔记,看的网课. 参考资料:https://zhuanlan.zhihu.com/p/157717158 常见应用场景 1 数据缓存 缓存一些常用的.经常访问的.不经常变化的数据,也 ...

  10. 【LeetCode数组#2双指针法】移除元素、删除有序数组中的重复项、移动0

    移除元素 力扣27题目链接(opens new window) 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用额外的数组 ...