manjeshbhargav Github contribution chart
manjeshbhargav Github Stats
manjeshbhargav Most Used Languages

Activity

29 Sep 2022

Issue Comment

Manjeshbhargav

Noise cancellation requires allowing `blob:` in CSP

After upgrading to 2.24.1, noise cancellation stopped working for us.

When trying to load the noise cancellation code, there is a CSP-related error and the noise cancellation code fails to load:

dynamicimport.js:40 Refused to load the script 'blob:http://localhost:4200/f39c03f4-9122-4e7f-b7ed-fb08f96dc102' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. 

Looks like this is caused by the workaround introduced in https://github.com/twilio/twilio-video.js/pull/1872, and to make the feature work with this workaround, we'll have to loosen up the CSP to allow blob: which could potentially increase the attack surface.

Note that 2.24.0 worked fine in our environment without the import workaround.

I suggest the team to consider if it is worth keeping the workaround considering this CSP downside.

Forked On 29 Sep 2022 at 11:45:21

Manjeshbhargav

Hi @Dosant ,

I have released 2.24.2, which removes the blob requirement. Thanks for bringing this to my notice.

Commented On 29 Sep 2022 at 11:45:21
Issue Comment

Manjeshbhargav

client is unable to apply or create a local media description, windows chrome to windows chrome

Consistently hitting this error on Windows 10 Chrome version Version 104.0.5112.81 when doing end to end testing between windows machines.

Expected behavior: Connecting at DeviceSelectionScreen should connect cleaning

Software versions:

  • [ ] Browser(s): windows chrome. (Works on edge)
  • [ ] Operating System:
  • [ ] twilio-video.js: 2.21.2
  • [ ]react

Forked On 29 Sep 2022 at 11:44:38

Manjeshbhargav

Hi @cindyloo ,

I have released 2.24.2, which fixes the error you are seeing. I will close the issue now. Thank you for bringing this to my notice.

Commented On 29 Sep 2022 at 11:44:38
Issue Comment

Manjeshbhargav

TwilioError: Client is unable to apply a remote media description.

Problem

We receive an error while trying to publish a local video track. Code responsible for creation and publication of a local video track:

...
Twilio.Video.connect.createLocalVideoTrack({
    name : 'Camera'
 });

twilioRoom.localParticipant.publishTrack(track, {priority : 'low'})
... 

Error: image

Steps to reproduce

  1. Publish a screen sharing track;
  2. Publish a local video track.

Investigation

Before turning on camera (see code snippet above) we publish a screen sharing track but after passing screen sharing video track to new Twilio.Video.LocalVideoTrack() it loses its dimensions. It seems to us that it is a reason for the error mentioned above.

...
const MediaStream = _canvas.captureStream();
const videoTrack = MediaStream.getTracks()[0];
const screenTrack = new Twilio.Video.LocalVideoTrack(videoTrack, {name: 'Sharing'});
... 

videoTrack (height : 429, width : 1919): CanvasCaptureMediaStreamTrack {canvas: canvas#sharingScreen, kind: 'video', id: '6ec5f206-2988-43db-b478-fd33c71a7d27', label: 'OoAJrAhictfVfOcup9P17wC69OXlonOwA3AIaGbClVJtQuUDRnxDsndVkYqcqKY+MoehaQPbFDHUN+fiUtdNpg==', enabled: true, …} canvas: canvas#sharingScreen accessKey: "" ariaAtomic: null ariaAutoComplete: null ariaBusy: null ariaChecked: null ariaColCount: null ariaColIndex: null ariaColSpan: null ariaCurrent: null ariaDescription: null ariaDisabled: null ariaExpanded: null ariaHasPopup: null ariaHidden: null ariaInvalid: null ariaKeyShortcuts: null ariaLabel: null ariaLevel: null ariaLive: null ariaModal: null ariaMultiLine: null ariaMultiSelectable: null ariaOrientation: null ariaPlaceholder: null ariaPosInSet: null ariaPressed: null ariaReadOnly: null ariaRelevant: null ariaRequired: null ariaRoleDescription: null ariaRowCount: null ariaRowIndex: null ariaRowSpan: null ariaSelected: null ariaSetSize: null ariaSort: null ariaValueMax: null ariaValueMin: null ariaValueNow: null ariaValueText: null assignedSlot: null attributeStyleMap: StylePropertyMap {size: 0} attributes: NamedNodeMap {0: id, 1: width, 2: height, id: id, width: width, height: height, length: 3} autocapitalize: "" autofocus: false baseURI: "https://ocedev3--pshchur--c.visualforce.com/apex/RemotePlatformLaunchConference?id=a2I1s000000CKmcEAG" childElementCount: 0 childNodes: NodeList [] children: HTMLCollection [] classList: DOMTokenList [value: ''] className: "" clientHeight: 0 clientLeft: 0 clientTop: 0 clientWidth: 0 contentEditable: "inherit" dataset: DOMStringMap {} dir: "" draggable: false elementTiming: "" enterKeyHint: "" firstChild: null firstElementChild: null height: 429 hidden: false id: "sharingScreen" inert: false innerHTML: "" innerText: "" inputMode: "" isConnected: true isContentEditable: false lang: "" lastChild: null lastElementChild: null localName: "canvas" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: video#sharingStream nextSibling: video#sharingStream nodeName: "CANVAS" nodeType: 1 nodeValue: null nonce: "" offsetHeight: 0 offsetLeft: 0 offsetParent: null offsetTop: 0 offsetWidth: 0 onabort: null onanimationend: null onanimationiteration: null onanimationstart: null onauxclick: null onbeforecopy: null onbeforecut: null onbeforematch: null onbeforepaste: null onbeforexrselect: null onblur: null oncancel: null oncanplay: null oncanplaythrough: null onchange: null onclick: null onclose: null oncontextlost: null oncontextmenu: null oncontextrestored: null oncopy: null oncuechange: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null ondurationchange: null onemptied: null onended: null onerror: null onfocus: null onformdata: null onfullscreenchange: null onfullscreenerror: null ongotpointercapture: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onloadeddata: null onloadedmetadata: null onloadstart: null onlostpointercapture: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onpause: null onplay: null onplaying: null onpointercancel: null onpointerdown: null onpointerenter: null onpointerleave: null onpointermove: null onpointerout: null onpointerover: null onpointerrawupdate: null onpointerup: null onprogress: null onratechange: null onreset: null onresize: null onscroll: null onsearch: null onsecuritypolicyviolation: null onseeked: null onseeking: null onselect: null onselectionchange: null onselectstart: null onslotchange: null onstalled: null onsubmit: null onsuspend: null ontimeupdate: null ontoggle: null ontransitioncancel: null ontransitionend: null ontransitionrun: null ontransitionstart: null onvolumechange: null onwaiting: null onwebkitanimationend: null onwebkitanimationiteration: null onwebkitanimationstart: null onwebkitfullscreenchange: null onwebkitfullscreenerror: null onwebkittransitionend: null onwheel: null outerHTML: "<canvas id=\"sharingScreen\" width=\"1919\" height=\"429\"></canvas>" outerText: "" ownerDocument: document parentElement: div#sharingContainer.slds-m-right_x-small parentNode: div#sharingContainer.slds-m-right_x-small part: DOMTokenList [value: ''] prefix: null previousElementSibling: null previousSibling: null role: null scrollHeight: 0 scrollLeft: 0 scrollTop: 0 scrollWidth: 0 shadowRoot: null slot: "" spellcheck: true style: CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …} tabIndex: -1 tagName: "CANVAS" textContent: "" title: "" translate: true virtualKeyboardPolicy: "" width: 1919 [[Prototype]]: HTMLCanvasElement contentHint: "" enabled: true id: "6ec5f206-2988-43db-b478-fd33c71a7d27" kind: "video" label: "OoAJrAhictfVfOcup9P17wC69OXlonOwA3AIaGbClVJtQuUDRnxDsndVkYqcqKY+MoehaQPbFDHUN+fiUtdNpg==" muted: true oncapturehandlechange: null onended: null onmute: null onunmute: null readyState: "live" [[Prototype]]: CanvasCaptureMediaStreamTrack

screenTrack (height : null, width : null): LocalVideoTrack {kind: 'video', name: 'Sharing', processedTrack: null, …} dimensions: height: null width: null [[Prototype]]: Object id: "6ec5f206-2988-43db-b478-fd33c71a7d27" isEnabled: (...) isStarted: (...) isStopped: (...) kind: "video" mediaStreamTrack: (...) name: "Sharing" processedTrack: null processor: null _MediaStream: ƒ MediaStream() _attachments: Set(0) {size: 0} _captureTimeoutId: null _constraints: {} _didCallEnd: false _dummyEl: video _elShims: WeakMap {} _events: {disabled: Array(2), enabled: Array(2), dimensionsChanged: ƒ, message: ƒ, started: ƒ, …} _eventsCount: 6 _gUMSilentTrackWorkaround: ƒ workaround(log,getUserMedia,constraints,n,timeout) _getUserMedia: ƒ getUserMedia(constraints) _inputFrame: null _instanceId: 14 _isCapturing: false _isCreatedByCreateLocalTracks: false _isStarted: (...) _log: Log {_component: LocalVideoTrack, _logLevels: {…}, _warnings: Set(0), …} _maxListeners: undefined _outputFrame: null _playPausedElementsIfNotBackgrounded: false _processorEventObserver: VideoProcessorEventObserver {_events: {…}, _eventsCount: 6, _maxListeners: undefined, _lastStatsSaveTime: null, _lastStatsPublishTime: null, …} _shouldShimAttachedElements: false _trackSender: MediaTrackSender {_events: {…}, _eventsCount: 0, _maxListeners: undefined, id: '6ec5f206-2988-43db-b478-fd33c71a7d27', kind: 'video', …} _unmuteHandler: null _unprocessedTrack: null _workaroundSilentLocalVideo: null _workaroundSilentLocalVideoCleanup: null _workaroundWebKitBug1208516: false _workaroundWebKitBug1208516Cleanup: null get isEnabled: ƒ () get isStarted: ƒ () get isStopped: ƒ () get mediaStreamTrack: ƒ () get _isStarted: ƒ () set _isStarted: ƒ (_isStarted) [[Prototype]]: LocalVideoTrack

Technical details

  • Room sid: RM1d36866d33409e3de1985a53ac128fc1, RMe18c254e86d5166be38257b512b99e1b;
  • Room type: group;
  • JS Version: 2.24.0;
  • Browser: Chrome, 105.0.5195.102 (Official Build) (64-bit);
  • Internet download/upload speed: 55.83/55.94Mbps.

Also, we have used Portable Apps to test on different Chrome versions. As a result, we could say that the issue starts to reproduce after Chrome, 103.0.5028.0. On Chrome, 102.0.5005.115 everything works fine. Here is a Chrome change log.

The issue could not be reproduced on Firefox, 103.0.2.

Workaround

The problem ("Client is unable to apply a remote media description.") disappears when preferredVideoCodecs is changed from auto to [{ codec : 'VP8', simulcast : false }] in connect options. The issue with losing screen sharing track's dimensions after passing it to new Twilio.Video.LocalVideoTrack() still remains.

We cannot change preferredVideoCodecs to [{ codec : 'VP8', simulcast : false }] because it decreases video quality for other participants.

Questions

Could you suggest something? Are there any known issues regarding the problem?

Forked On 29 Sep 2022 at 11:43:49

Manjeshbhargav

Hi @PavloShchur ,

I have released 2.24.2, which fixes the error you are seeing. I will close the issue, but keep track of the Chromium bug and reach out to you if any development happens.

Commented On 29 Sep 2022 at 11:43:49

Manjeshbhargav

Merge from master 2.24.2

Created On 29 Sep 2022 at 11:41:07
Create Branch
Manjeshbhargav In twilio/twilio-video.js Create Branchmerge-from-master-2.24.2

Manjeshbhargav

Twilio’s Programmable Video JavaScript SDK

On 29 Sep 2022 at 11:39:48

Manjeshbhargav

2.24.2

Pushed On 29 Sep 2022 at 11:36:19

Manjeshbhargav

2.24.3-dev

Pushed On 29 Sep 2022 at 11:36:19

Manjeshbhargav

Fix dependabot alerts

Created On 29 Sep 2022 at 10:47:08
Issue Comment

Manjeshbhargav

Fix dependabot alerts

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

  • [ ] I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

Description

Burndown

Before review

  • [x] Updated CHANGELOG.md if necessary
  • [ ] Added unit tests if necessary
  • [ ] Updated affected documentation
  • [x] Verified locally with npm test
  • [ ] Manually sanity tested running locally
  • [ ] Included screenshot as PR comment (if needed)
  • [x] Ready for review

Forked On 29 Sep 2022 at 10:47:07

Manjeshbhargav

Closing to revisit in the future. Looks like some of the updates are creating build failures.

Commented On 29 Sep 2022 at 10:47:07

Manjeshbhargav

Reverting electron version to 17.2.0.

Pushed On 29 Sep 2022 at 10:44:28

Manjeshbhargav

Reverting mocha version to 3.5.3.

Pushed On 29 Sep 2022 at 10:04:21

Manjeshbhargav

Fix dependabot alerts

Created On 29 Sep 2022 at 09:37:24

Manjeshbhargav

Fixing dependabot alerts in package.json.

Pushed On 29 Sep 2022 at 09:36:23
Create Branch
Manjeshbhargav In twilio/twilio-video.js Create Branchfix-dependabot-alerts

Manjeshbhargav

Twilio’s Programmable Video JavaScript SDK

On 29 Sep 2022 at 09:30:27