原始JS打开摄像头获取RGB进行二值化处理

最新推荐文章于 2023-03-17 15:41:16 发布

远方的李子

最新推荐文章于 2023-03-17 15:41:16 发布

阅读量789

点赞数

分类专栏： javascripter 文章标签： JS原生摄像头二值化 JS打开摄像头 js摄像头 canvas

本文链接：https://blog.csdn.net/freedom_fd/article/details/88648219

版权

javascripter 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

原始JS打开摄像头获取RGB进行二值化处理

先看一下效果

过程中使用到的标签
canvas 绘制图像
navigator 连接媒体输入的设备
video

创建HTML 标签

 <video id="video" src=""></video>
 <canvas id="canvas"></canvas>

获取绘制图形和 video

var video = document.getElementById('video')
var canvas = document.getElementById('canvas')`

创建媒体对象

// 媒体对象
    navigator.getMedia = navigator.getUserMedia || //获取媒体对象
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    vendorUrl = window.URL || window.webkitURL; //创建地址OBJ
    navigator.getMedia({ //获取摄像头参数
        video: true, //使用摄像头对象
        audio: false, //不适用音频
         video: {
                width: 400,
                height: 300
            }
    }, function(strem){//打开
    video.src = vendorUrl.createObjectURL(strem)//创建并实力化
    video.play();
    }, function(error) {//失败
        //error.code
        console.log(error);
    });  
     
         setInterval(function(){
          var co =   context.drawImage(video,0,0);//剪切图像
           img = context.getImageData(0, 0, 400, 300)//获取图片信息
           data = img.data//获取图片信息
           for (var i = 0, len = data.length; i < len; i += 4) {
         var  vas  =   data[i] 
           if (vas<data[i+1] ) {
           vas = data[i+1] 
           };
            if (vas<data[i+2] ) {
           vas = data[i+2] 
           };
            
            if (vas<=127) {
              data[i]=0
              data[i+1]=0
              data[i+2]=0
            }else{
              data[i]=255
              data[i+1]=255
              data[i+2]=255
            } 
      
        }
        context.putImageData(img,0,0)
         }, 100)

在运行时候发现这个方法兼容性不是很好,摄像头打开但图像没有拿到
然后找了一下问题优化了一下,完美

<script>
      //媒体对象
      var video = document.getElementById('video')
      var canvas = document.getElementById('canvas')
         canvas.width = 400;
         canvas.height = 300;
    // navigator.getMedia = navigator.getUserMedia || //获取媒体对象
    //                      navagator.webkitGetUserMedia ||
    //                      navigator.mozGetUserMedia ||
    //                      navigator.msGetUserMedia;
    // vendorUrl = window.URL || window.webkitURL; //创建地址OBJ
    // navigator.getMedia({ //获取摄像头参数
    //     video: true, //使用摄像头对象
    //     audio: false, //不适用音频
    //      video: {
    //             width: 400,
    //             height: 300
    //         }
    // }, function(strem){//打开
    // video.src = vendorUrl.createObjectURL(strem)//创建并实力化
    // video.play();
    // }, function(error) {//失败
    //     //error.code
    //     console.log(error);
    // });  
    //在此codelab上，您将只播放视频（视频：true）。
const mediaStreamConstraints = {
  video: true, 
   video: {
              width: 400,
            height: 300
       }
};
function gotLocalMediaStream(mediaStream) {
  video.srcObject =  mediaStream//创建并实力化
    video.play();
}

navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch();
       var context = canvas.getContext("2d"); //c创建对象
        
         setInterval(function(){
          var co =   context.drawImage(video,0,0);//剪切图像
           img = context.getImageData(0, 0, 400, 300)//获取图片信息
           data = img.data//获取图片信息
           for (var i = 0, len = data.length; i < len; i += 4) {
         var  vas  =   data[i] 
           if (vas<data[i+1] ) {
           vas = data[i+1] 
           };
            if (vas<data[i+2] ) {
           vas = data[i+2] 
           };
            
            if (vas<=127) {
              data[i]=0
              data[i+1]=0
              data[i+2]=0
            }else{
              data[i]=255
              data[i+1]=255
              data[i+2]=255
            } 
      
        }
        context.putImageData(img,0,0)
         }, 100)


</script>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自由网 -FD</title>
</head>
<body>
 
 

  <video id="video" src=""></video>
  <canvas id="canvas"></canvas>
</body>
</html>
<script>
      //媒体对象
      var video = document.getElementById('video')
      var canvas = document.getElementById('canvas')
         canvas.width = 400;
         canvas.height = 300;
    // navigator.getMedia = navigator.getUserMedia || //获取媒体对象
    //                      navagator.webkitGetUserMedia ||
    //                      navigator.mozGetUserMedia ||
    //                      navigator.msGetUserMedia;
    // vendorUrl = window.URL || window.webkitURL; //创建地址OBJ
    // navigator.getMedia({ //获取摄像头参数
    //     video: true, //使用摄像头对象
    //     audio: false, //不适用音频
    //      video: {
    //             width: 400,
    //             height: 300
    //         }
    // }, function(strem){//打开
    // video.src = vendorUrl.createObjectURL(strem)//创建并实力化
    // video.play();
    // }, function(error) {//失败
    //     //error.code
    //     console.log(error);
    // });  
    //在此codelab上，您将只播放视频（视频：true）。
const mediaStreamConstraints = {
  video: true, 
   video: {
              width: 400,
            height: 300
       }
};
function gotLocalMediaStream(mediaStream) {
  video.srcObject =  mediaStream//创建并实力化
    video.play();
}

navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch();
       var context = canvas.getContext("2d"); //c创建对象
        
         setInterval(function(){
          var co =   context.drawImage(video,0,0);//剪切图像
           img = context.getImageData(0, 0, 400, 300)//获取图片信息
           data = img.data//获取图片信息
           for (var i = 0, len = data.length; i < len; i += 4) {
         var  vas  =   data[i] 
           if (vas<data[i+1] ) {
           vas = data[i+1] 
           };
            if (vas<data[i+2] ) {
           vas = data[i+2] 
           };
            
            if (vas<=127) {
              data[i]=0
              data[i+1]=0
              data[i+2]=0
            }else{
              data[i]=255
              data[i+1]=255
              data[i+2]=255
            } 
      
        }
        context.putImageData(img,0,0)
         }, 100)


</script>