JS打开相机并上传屏幕截图示例

本文主要介绍JS打开相机并上传屏幕截图的示例. 详细地说，这是JS打开相机并将屏幕截图上传到后端的完整步骤，感兴趣的学生可以看看.

直接进入主题，这是JS打开相机并将屏幕截图上传到后端的完整步骤

1. 主要使用getUserMedia方法打开相机，然后将获取的媒体流放入视频标签

2. 图像的截取主要使用画布绘制，而drawImage方法用于将视频内容绘制到画布中

3. 将拦截的内容上传到服务器，将画布中的内容转换为base64格式以进行上传，后端（PHP）通过file_put_contents将其转换为图片

请注意，在非chrome浏览器中，使用相机或多或少会引起一些问题，这也可能是旧问题，因此以下代码主要基于chrome的使用

例如，最新版本的FireFox中报告了错误，我不知道为什么

1. 打开相机

getUserMedia可在新旧版本中使用，建议使用新版本

旧版本位于导航器对象下，具体取决于浏览器

 // 获取媒体方法（旧方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; 

if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  } 

第一个参数表示需要使用视频（视频）或音频（音频）.

第二个参数指示成功调用后的回调js调用或相册，其中包括一个参数（MediaStream）. 在旧版本中，您可以通过调用MediaStream.stop（）直接关闭相机，但是在新版本中它已被放弃. 您需要使用MediaStream.getTracks（）[index] .stop（）关闭相应的Track

第三个参数表示呼叫失败后的回调

新版本位于navigator.mediaDevices对象下

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);
      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  } 

类似于旧版本，但是此方法返回Promise对象，您可以使用then和catch来指示成功和失败的回调

请注意，由MediaStream.getTracks（）返回的Tracks数组根据第一个参数以相反的顺序排列

例如现在定义的

{
  video: true,
  audio: true
} 

要关闭相机，您需要调用MediaStream.getTracks（）[1] .stop（）;

类似地，0对应于音轨

使用createObjectURL将MediaStream写入视频标签，您可以存储实时媒体流数据（也可以轻松地实时查看屏幕）

在旧版本中，不支持webkitURL对象，您需要使用URL对象

　　
  
  

    截取图像
    关闭
    上传图像
  
   

2. 捕捉图像

只写内容

 // 截取图像
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false); 

3. 关闭相机

 // 关闭
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false); 

4. 上传捕获的图像

canvas.toDataURL（'image / png'）

// 上传截取的图像
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);
      console.log(rs);
      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false); 

此处的后端（PHP）将获得的内容转换为图像文件并将其保存

应注意js调用或相册，应删除并保存base64的标头信息字段，否则似乎图像已损坏且无法打开.

  500, 'msg' => '文件上传失败'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => '文件上传成功', 'path' => $uploadDir . $fileName));
  }
?> 

完整的JS代码

以上是本文的全部内容，希望对大家的学习有所帮助，并希望您支持脚本编写室.

链接到本文:

根据“保护传播信息网络权利的规定”第22条的规定，即“避风港原则”，该网站上的所有文章和内容均由第三方作者上载. 如果有任何侵权，请与本网站联系以删除sheyingtg @ qq.com，本网站不负责内容分发的赔偿.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-186957-1.html