getUserMedia video视频镜面反转

最新推荐文章于 2024-03-14 15:05:31 发布

逸尘️

最新推荐文章于 2024-03-14 15:05:31 发布

阅读量7.8k

点赞数 6

分类专栏： javascript

本文链接：https://blog.csdn.net/haoaiqian/article/details/100307476

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

场景是这样的，我需要调用摄像头不间断地抽帧，发送给后端，后端通过调用人脸库模型进行人脸识别，手势识别。

在此之前，我们尝试了使用摄像头推流的方法，把视频流通过node服务层中转（因为摄像机的ffmepg流不能直接播放），前端拉流以后抽帧。

后来，因为上述方式衍生问题比较多，传输慢、视频延迟、清晰度等问题逐渐暴露，虽然后面一一解决，但是我们还是想尝试新的方案，以此达到更佳的体验效果。

于是乎，我们买了usb摄像头，前端调用外接摄像头，抽帧，。。。抽帧步骤之前的工作就不再依赖后端。问题来了，摄像头的视频流获取以后怎么反转呢？至少视频镜像体验上要好很多吧。查了很多方法，最终发现一句代码就好。

 #video {
      transform: rotateY(180deg);
    }

对，我自己也惊呆了，把问题复杂化了，只想着怎么去处理视频流，怎么去使用第三方的播放器来解决问题。fuck!

附上一个小小的demo。。。。。

<!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>js通过浏览器调用摄像头</title>

</head>
<body>

<div class="banner">
<video id="video" width="500px" height="500px" autoPlay="autoplay" controls="controls" />
</div>

</body>

<script>
function getMedia() {
  let video = document.getElementById('video');
  let constraints = {
    video: { width: 400, height: 500 },
    audio: false
  };
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  let promise = navigator.mediaDevices.getUserMedia(
    constraints,
    function(stream) {
      video.src = stream;
      video.play();
    },
    function(error) {
      console.log(error);
    }
  );
  promise.then(function(MediaStream) {
    video.srcObject = MediaStream;
    video.play();
  });
}

getMedia();
</script>
</html>

逸尘️

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
8
评论
getUserMedia video视频镜面反转

场景是这样的，我需要调用摄像头不间断地抽帧，发送给后端，后端通过调用人脸库模型进行人脸识别，手势识别。在此之前，我们尝试了使用摄像头推流的方法，把视频流通过node服务层中转（因为摄像机的ffmepg流不能直接播放），前端拉流以后抽帧。后来，因为上述方式衍生问题比较多，传输慢、视频延迟、清晰度等问题逐渐暴露，虽然后面一一解决，但是我们还是想尝试新的方案，以此达到更佳的体验效果。于是乎，我们买...
复制链接

扫一扫