Can not upgrade video quality to 720p on Web SDK

dev_strikersoft · January 31, 2023, 7:31am

Description
I use zoom (Web SDK version 2.9.7) in browser between to 2 laptops and I am trying to achieve quality 720p , but got only 640p.
I accepted all requirements that is described in documentation:

enabled Group HD video in zoom account
solid internet connection
full screen in speaker view
in browser console crossOriginIsolated = true

Which Web Meeting SDK version?
Web SDK version 2.9.7

ZoomMtg.init({
leaveUrl,
debug: false,
disableCORP: !window.crossOriginIsolated,
isSupportAV: true,
enableHD: true,
success: (resp: any) => {
ZoomMtg.join({
meetingNumber,
userName,
signature,
sdkKey,
customerKey,
passWord,
userEmail
}
});

Device (please complete the following information):

OS: Windows 10
Browser: [e.g. Chrome]
Browser Version 109

chunsiong.zoom · January 31, 2023, 3:53pm

@dev_strikersoft ,

Have went thru the article here https://marketplace.zoom.us/docs/sdk/overview/720p/ ?

dev_strikersoft · January 31, 2023, 5:18pm

yes, I accepted all requirements that is described in documentation

dev_strikersoft · February 2, 2023, 8:29am

But it still does not work!

j.schoenemeyer · February 3, 2023, 11:03pm

what happens if you use the non SDK web version of zoom

Invite Link → Cancel → Join from Your Browser

dev_strikersoft · February 9, 2023, 6:05pm

The same situation when I tried other zoom apps (got only 640p max), it seems to me that is a problem with my zoom account. I have switched on a Group HD video. Maybe are there any settings?

chunsiong.zoom · March 9, 2023, 2:50am

@dev_strikersoft , did you enable Cross Origin Isolation as well?https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/

dev_strikersoft · April 6, 2023, 2:40pm

Yes, I gor in browser console crossOriginIsolated = true

dev_strikersoft · April 12, 2023, 6:12pm

I replaced lib from 2.9.7 => 2.11.0 and got the same result and a few new issues.

see my console log Uncaught (in promise) Object":
instrument.js:110 EventQueue config ./q-a/evt-conf.js is loaded
instrument.js:110 when websdk >= 1.8.5, you need load lang resource first
instrument.js:110 ZoomMtg.i18n.load(‘you lang json path’, ‘en-GB’)
instrument.js:110 change websdk lang fail
instrument.js:110 Wake Lock is active
instrument.js:110 Wake Lock active.
instrument.js:110 pre load wasm success: https://source.zoom.us/2.11.0/lib/av/1502_audio.encode.wasm
instrument.js:110 pre load wasm success: https://source.zoom.us/2.11.0/lib/av/1502_video.simd.wasm
instrument.js:110 previewVal zm_previewVal 0
zoom-meeting-2.11.0.min.js:2 Uncaught (in promise) Object
c @ zoom-meeting-2.11.0.min.js:2
(anonymous) @ zoom-meeting-2.11.0.min.js:2
(anonymous) @ react-dom.min.js:128
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
Ch @ react-dom.min.js:128
Dh @ react-dom.min.js:133
Aj @ react-dom.min.js:158
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
ab @ react-dom.min.js:154
Te @ react-dom.min.js:146
(anonymous) @ react-dom.min.js:61
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
Pg @ react-dom.min.js:61
ha @ react-dom.min.js:60
mk.Events.current @ react-dom.min.js:236
Ei @ react-dom.min.js:41
r @ helpers.js:71
zoom-meeting-2.11.0.min.js:2 Uncaught (in promise) Object
a @ zoom-meeting-2.11.0.min.js:2
(anonymous) @ zoom-meeting-2.11.0.min.js:2
(anonymous) @ react-dom.min.js:128
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
Ch @ react-dom.min.js:128
Dh @ react-dom.min.js:133
Aj @ react-dom.min.js:158
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
ab @ react-dom.min.js:154
Te @ react-dom.min.js:146
(anonymous) @ react-dom.min.js:61
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
Pg @ react-dom.min.js:61
ha @ react-dom.min.js:60
mk.Events.current @ react-dom.min.js:236
Ei @ react-dom.min.js:41
r @ helpers.js:71
instrument.js:110 Laplace init codec worker failed. Fallback to no-worker mode.
(anonymous) @ instrument.js:110
Promise.finally (async)
(anonymous) @ zoom-meeting-2.11.0.min.js:2
O @ zoom-meeting-2.11.0.min.js:2
_ @ zoom-meeting-2.11.0.min.js:2
D @ zoom-meeting-2.11.0.min.js:2
(anonymous) @ zoom-meeting-2.11.0.min.js:2
Promise.then (async)
A @ zoom-meeting-2.11.0.min.js:2
W @ zoom-meeting-2.11.0.min.js:2
M @ zoom-meeting-2.11.0.min.js:2
value @ zoom-meeting-2.11.0.min.js:2
r @ helpers.js:71
C @ zoom-meeting-2.11.0.min.js:2
onClick @ zoom-meeting-2.11.0.min.js:2
M @ zoom-meeting-2.11.0.min.js:2
ki @ react-dom.min.js:176
ji @ react-dom.min.js:13
mi @ react-dom.min.js:13
lf @ react-dom.min.js:13
wi @ react-dom.min.js:187
Kd @ react-dom.min.js:32
pc @ react-dom.min.js:32
Wf @ react-dom.min.js:34
(anonymous) @ react-dom.min.js:236
Af @ react-dom.min.js:18
Qd @ react-dom.min.js:42
sc @ react-dom.min.js:41
unstable_runWithPriority @ react.min.js:25
Da @ react-dom.min.js:60
mk.Events.current @ react-dom.min.js:236
Ei @ react-dom.min.js:41
r @ helpers.js:71
instrument.js:110 codec worker init success
instrument.js:110 creatAVSocket
instrument.js:110 >>>>>>>> CREATE JSMEDIASKD INSTANCE <<<<<<<<
instrument.js:110 See the requirements for sending 720p video from the Web Meeting SDK. https://developers.zoom.us/docs/meeting-sdk/web/720p/
instrument.js:110 White list encoder: true
instrument.js:110 sendSocket 113
instrument.js:110 >>>>>>>>INIT JSMEDIASDK<<<<<<<<
instrument.js:110 Support video encode hardware acceleration: false
instrument.js:110 https://source.zoom.us/2.11.0/lib/av/1502_video_share_mtsimd.min.js
instrument.js:110 VP9?: false AMD?: true AMDdecodecheck: false enable720p?: true capacityfor720: false
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for ***/runtime~main-552a76b3439331e5f6b5.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://source.zoom.us/2.11.0/lib/webim.min.js.map: System error: net::ERR_BLOCKED_BY_RESPONSE
5b52076c-178a-4048-bd81-5a4543e64d3e:1 ready to start!
bd819933-c3a4-400b-9ff2-441f7fbc7736:1 ready to start!
ecea0f17-0fed-4e0d-9be4-12fd464d02de:1 ready to dec video!
3465be76-c33f-4ba2-ac37-ba080364a652:1 ready to dec video!
bd819933-c3a4-400b-9ff2-441f7fbc7736:1 JsAudioDec.js receive startMedia
5b52076c-178a-4048-bd81-5a4543e64d3e:1 JsAudioDec.js receive startMedia
5b52076c-178a-4048-bd81-5a4543e64d3e:1 Open_Audio_WebSocket_Connect
bd819933-c3a4-400b-9ff2-441f7fbc7736:1 Open_Audio_WebSocket_Connect
ecea0f17-0fed-4e0d-9be4-12fd464d02de:1 Open_Video_WebSocket_Connect
ecea0f17-0fed-4e0d-9be4-12fd464d02de:1 Open_Sharing_WebSocket_Connect
3465be76-c33f-4ba2-ac37-ba080364a652:1 Open_Video_WebSocket_Connect
3465be76-c33f-4ba2-ac37-ba080364a652:1 Open_Sharing_WebSocket_Connect
ecea0f17-0fed-4e0d-9be4-12fd464d02de:1 consume interval 5
ecea0f17-0fed-4e0d-9be4-12fd464d02de:1 sharing_decode_websocket_on_open
instrument.js:110 — succesCallBack —
instrument.js:110 {method: ‘mute’, status: true, errorCode: 0, errorMessage: null, result: null}
instrument.js:110 Wake Lock released.
instrument.js:110 Wake Lock was released
instrument.js:110 Wake Lock is active
instrument.js:110 Wake Lock was released
instrument.js:110 Wake Lock is active
crossOriginIsolated
true
typeof SharedArrayBuffer === ‘function’
true

dev_strikersoft · April 13, 2023, 9:56am

Do you have Any ideas?

chunsiong.zoom · April 24, 2023, 1:07pm

Hi Alexandra,

This is how I got 720p on my web, this is pure JS. I’ve attached the HTML and Javascript below.
I’m using chrome / microsoft edge

The 2 main additions I have are

<script src="./coi-serviceworker.js"></script>
<meta http-equiv="origin-trial" content="trialorigincodehere===================================">

meeting.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Zoom Meeting SDK Sample JavaScript</title>

    <script src="./coi-serviceworker.js"></script>

    <!-- For Client View -->
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.11.0/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.11.0/css/react-select.css" />

    <link rel="stylesheet" href="styles.css">

    <!-- Origin Trials to enable Gallery View in Chrome/Edge -->
    <!-- More Info: https://marketplace.zoom.us/docs/sdk/overview/improve-performance -->
    <!-- SharedArrayBuffers in non-isolated pages on Desktop platforms -->
    <meta http-equiv="origin-trial" content="trialorigincodehere===================================">
  </head>
  <body>

    <main>
      <h1>Zoom Meeting SDK Sample JavaScript</h1>


      <script>
        const el = document.createElement("div")
        el.innerHTML = `Cross origin isolated: ${window.crossOriginIsolated ? "✅" : "❌"}`
        document.body.append(el);
    </script>
      <!-- For Component View -->
      <div id="meetingSDKElement">
        <!-- Zoom Meeting SDK Rendered Here -->
      </div>

      <button onClick="getSignature()">Join Meeting</button>
    </main>

    <!-- For Component and Client View -->
    <script src="https://source.zoom.us/2.11.0/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/2.11.0/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/2.11.0/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/2.11.0/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/2.11.0/lib/vendor/lodash.min.js"></script>

    <!-- For Client View -->
    <script src="https://source.zoom.us/zoom-meeting-2.11.0.min.js"></script>
    <script type="text/javascript" src="./client-view.js"></script>

    <!-- For Component View -->
    <!-- <script src="https://source.zoom.us/2.11.0/zoom-meeting-embedded-2.11.0.min.js"></script> -->
    <!-- <script type="text/javascript" src="component-view.js"></script> -->

  </body>
</html>

client-view-js

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.11.0/lib', '/av')

ZoomMtg.preLoadWasm()
ZoomMtg.prepareWebSDK()
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US')
ZoomMtg.i18n.reload('en-US')

// setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
var signatureEndpoint = 'https://yoursignatureendpoint'
var sdkKey = 'yoursdkkey'
var meetingNumber = '123456789'
var role = 0
var leaveUrl = 'https://www.zoom.us'
var userName = 'Client View PureJS'
var userEmail = ''
var passWord = ''
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-meeting-with-registration-required
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-webinar-with-registration-required
var registrantToken = ''

function getSignature() {

  getParamsFromQueryString();

  fetch(signatureEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
  	console.log(error)
  })
}


function getParamsFromQueryString(){

  const url = new URL(window.location.href);

  // Get the value of the "name" query parameter
  meetingNumber= url.searchParams.get("meetingNumber");
  
  // Get the value of the "age" query parameter
  passWord= url.searchParams.get("passWord");
  
    // Get the value of the "age" query parameter
    role= parseInt(url.searchParams.get("role"));

}

function startMeeting(signature) {

  document.getElementById('zmmtg-root').style.display = 'block'

  ZoomMtg.init({
    
    leaveUrl: leaveUrl,
    success: (success) => {
      console.log(success)
      ZoomMtg.join({
        signature: signature,
        sdkKey: sdkKey,
        meetingNumber: meetingNumber,
        userName: userName,
        userEmail: userEmail,
        passWord: passWord,
        tk: registrantToken,
        success: (success) => {
          console.log(success)
        },
        error: (error) => {
          console.log(error)
        },
      })
    },
    error: (error) => {
      console.log(error)
    }
  })
}

sara.bern · April 27, 2023, 1:11pm

We are trying this out. Thank you !

sara.bern · May 3, 2023, 7:34pm

My developers have upgraded the web meeting SDK to 2.11.15. and applied your suggestions.

It has still not been possible to get over 640*360,
even for meetings between 2 users on Chrome webbrowser (Version 112.0.5615.138 (Official Build) (64-bit))
on business laptops,
on same WIFI,
with excellent bandwidth.

Latency is ok: 28-30 ms
Jitter: 1-2 ms

Hard to use for Healthcare assessments (e.g. for wounds, where better resolution, color, depth is needed ).
Works decently for talk meetings.

j.schoenemeyer · May 3, 2023, 9:20pm

do you get a 720p connection if you use the original zoom app - not the browser

if yes, next step - what happens if you use on both computer the normal web version (non SDK version of zoom)

sara.bern · May 4, 2023, 6:24am

Hi Jurgen,
answer to first question is yes:
In regular Zoom app on Chrome Desktop towards my iPhone I have excellent resolution as you see here in this test: Resolution 1280720 (send) and 580640 (receive from iPhone).

When my colleagues get here, I will do the second test you recommend.

Best regards, Sara

sara.bern · May 4, 2023, 8:13am

Jurgen, using your webversion of Zoom, I get Resolution 640×360.
While the Zoom client (as reported above) gives Resolution 1280 x 720 (send) and 580 x 640 (receive from iPhone).

j.schoenemeyer · May 4, 2023, 12:20pm

only when the “Zoom web client*” on zoom.us really supports sending/receiving 1280x720 pixel, it is time to continue with the meeting SDK web version - if you need the best image quality possible

'* this version is several months ahead the SDK version

sara.bern · May 4, 2023, 4:02pm

Hmmm, interesting how [Chun Siong] here above is able to achieve 720p with those additions he has introduced, considering Jurgens latest answer that the “Zoom web client” is several months ahead of the SDK . Seems like a contradiction in itself. What is it that we are missing here?

j.schoenemeyer · May 5, 2023, 8:09am

I was also surprised that 720p was promised in the browser - it doesn’t even work in the official zoom app - tested with our company account (hosted in germany).

via the browser it is much more difficult - in the browser every tab has only half of the (real) processor core plus the grafic card (if possible) - the app has access to all of them

chunsiong.zoom · May 12, 2023, 7:55am

@sara.bern @j.schoenemeyer @dev_strikersoft ,

I’ve missed out replies on this thread. I’ve some updates regarding this. You can request support to turn on 720p on meeting sdk web.

I’m in the midst of updating the 720p documentations to reflect this. Nonetheless it is similar to the writeup here

I hope that helps.

Topic		Replies	Views
Web SDK Quality - Webinar Web	2	716	December 18, 2020
Enable 720p on my account in Meeting web sdk Web	3	178	January 12, 2024
Video quality for web sdk Web	2	510	April 16, 2021
Need help to clarify the SDK comparison Web	6	545	September 12, 2021
Zoom webClient vs Meeting SDK Client View Meeting SDK	2	399	March 14, 2023

Can not upgrade video quality to 720p on Web SDK

Related Topics