Skip to content

Black Bars around video stream and video stream is stuck when scrolling  #574

@aspdev91

Description

@aspdev91
  • I have used Google with the error message or bug in association with the library and Cordova words to make sure the issue I'm reporting is only related to iOSRTC.
  • I have provided steps to reproduce (e.g. sample code or updated extra/renderer-and-libwebrtc-tests.js file).
  • I have provided third party library name and version, ios, Xcode and plugin version and adapter.js version if used.

Versions affected

  • Cordova version (e.g 7.1.0): 10.0.0
  • Cordova iOS version (e.g 5.1.0): 6.1.1
  • Plugin version (e.g 6.0.12): 6.0.13
  • iOS version (e.g 10.2): 13.7
  • Xcode version (e.g 11.1 - 11A1027): 12.2 Beta
  • WebRTC-adapter version (e.g. 7.4.0):
  • WebRTC Framework version (e.g. JSSip 3.1.2):

Description

I'm not able to get a 4/3 video atm. It's also stuck to the screen as seen in the video below. I tested the same javascript code with on a hosted environment and accessed it with Safari. It worked perfectly fine. Below is a short video of what I encountered.

https://youtu.be/KiO-VVzpV-w

Steps to reproduce

If you run this code, you should be able to reproduce. I've tried numerous combinations of the constraints in getUserMedia using back and front cameras alongside different resolutions to no avail.

 cordova.plugins.iosrtc.registerGlobals();
 var appContainer = document.body;
  var localVideoEl;
  navigator.mediaDevices
    .getUserMedia({
      audio: false,
      video: {
        width: 640, 
        height: 480,
        aspectRatio: 4 / 3,
      },
    })
    .then(function (stream) {
      localVideoEl = document.createElement("video");
      localVideoEl.style.width = "640";
      localVideoEl.style.height = "480";
      localVideoEl.setAttribute("autoplay", "autoplay");
      localVideoEl.setAttribute("playsinline", "playsinline");
      localVideoEl.srcObject = stream;
      appContainer.appendChild(localVideoEl);

})

Expected results

A 4/3 video that is not stuck to the screen. I also fed the video in a image recognition model and the confidence score was super low. I think it's because it's feeding in those black bars as well since I assume its part of the video. I tested the same javascript code on a hosted environment and accessed it with Safari. It worked perfectly fine.

Actual results

See video below:
https://youtu.be/KiO-VVzpV-w

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions