cordova 捕获流从相机,并把它放在画布上与离子在Android上

fd3cxomn  于 2023-03-19  发布在  Android
关注(0)|答案(2)|浏览(218)

是否可以从摄像机捕获流,并且:

  • 使用此流作为HTML页上video标记的源
  • 使用这个流(帧)作为画布的源

我已经写了一个应用程序,当在浏览器中的桌面上使用时,捕获相机并在视频标签中播放它,但显然这个解决方案现在默认情况下工作,当我将我的应用程序部署到Android手机.
谢谢

lx0bsm1f

lx0bsm1f1#

两种功能(选项)都是可能的:使用此流作为HTML页面上视频标记的源使用此流(帧)作为画布的源
使用离子与FileTransfer,相机插件,你可以很容易地流你的数据的细节(字节,帧,图像,文本)在画布内,这是100%的可能性,因为 cordova 是HTML5的移动的扩展.

oyxsuwqo

oyxsuwqo2#

假设你正在使用cordova.plugins.permission下面是一个例子

navigator.mediaDevices.getUserMedia({audio: false,video: { facingMode: { exact: "user" },frameRate: { ideal: 30, max: 30 }}}).then(function(stream) {
      // Create video element to display the captured frames
      var videoElement = document.createElement('video');
      videoElement.srcObject = stream;
      videoElement.play()
        .catch(function(error) {
          console.error('Error playing video:', error);
        });

      // Create canvas element to draw the video frames onto
      var canvasElement = document.createElement('canvas');
      var canvasContext = canvasElement.getContext('2d');
      var captureButton = document.getElementById('capture');

      // Set the canvas size to match the video element
      videoElement.addEventListener('loadedmetadata', function() {
        canvasElement.width = videoElement.videoWidth;
        canvasElement.height = videoElement.videoHeight;
      });

      // Draw each video frame onto the canvas element
      function draw() {
        canvasContext.drawImage(videoElement, 0, 0);
        requestAnimationFrame(draw);
      }

      // Start drawing the video frames onto the canvas
      videoElement.addEventListener('play', function() {
        requestAnimationFrame(draw);
      });

      // Add the video and canvas elements to the page
      var containerElement = document.createElement('div');
      containerElement.style.position = 'fixed';
      containerElement.style.top = '0';
      containerElement.style.left = '0';
      containerElement.style.right = '0';
      containerElement.style.bottom = '0';

      canvasElement.style.position = 'absolute';
      canvasElement.style.top = '0';
      canvasElement.style.left = '0';
      canvasElement.style.right = '0';
      canvasElement.style.bottom = '0';

      containerElement.appendChild(videoElement);
      containerElement.appendChild(canvasElement);
      document.body.appendChild(containerElement);

相关问题