Framereader read null frame! (Videos are no longer appearing in Chrome)

ritu.munday · October 7, 2021, 11:15am

Description
I have Chrome v94 and I have updated the zoom web meeting SDK to 1.9.9.
But I’m not able to see my or anyone else’s video. Why?

Which Web Meeting SDK version?
I’m using 1.9.9.

Device (please complete the following information):

Device: System
OS: Windows
Browser: Chrome
Browser Version: 94.0.4606.71

Additional context
Please help me. This is very very important.

donte.zoom · October 7, 2021, 10:01pm

Greetings, @ritu.munday,

Welcome to the Developer Forum-- I am happy to help ! As a start, can you share a screenshot of the browser console when you are seeing this behavior ?

It sounds like you may be encountering a Web page Cross-Origin Isolation issue, have you tried using SharedArrayBuffers origin trial in your application? Here is our help documentation which provides step-by-step implementation guidance:

Let me know if you have any questions about this – I will keep an eye out for your reply!

Best,
Donte

ritu.munday · October 11, 2021, 12:39pm

Hi @donte.zoom

Please find below the screenshot.
The error in the screenshot below keeps on increasing.

When I added SharedArrayBuffers origin trial, the outcome is that the host can see my preview but I do not see my own preview.
Please help with either way.
We want to see others videos and show my own video too.

tommy · October 11, 2021, 6:24pm

Hey @ritu.munday ,

Few things to check.

Make sure your CDN or Local Assets are also on the same 1.9.9 version, example.
Make sure you have implemented Cross Origin Isolation or the SharedArrayBuffer Chrome Origin Trial.

Thanks,
Tommy

ritu.munday · October 12, 2021, 2:06am

Hi @tommy

I have made sure that I have

All the versioning to be 1.9.9. (Somewhere it was different, thanks for that.)
I have added SharedArrayBuffer Chrome Origin Trial. (This was already there.)

Now, the host can see my preview but I can’t see my own preview.
What should I do about that?

tommy · October 12, 2021, 4:01pm

Hey @ritu.munday ,

That is great, we are making progress.

Can you share a screenshot of this?

Thanks,
Tommy

lucian.tanase · October 14, 2021, 8:57am

The same thing happens to me, as a host I can’t see my preview but only the participant.

lucian.tanase · October 15, 2021, 11:00am

Solved for me on browser laptop. The problem persist when try to make zoom meeting on phone device.

MaxM · October 19, 2021, 8:37pm

Hey @lucian.tanase,

Unfortunately, mobile browsers are not supported at this time. We are always working to expand our platform support though.

Please see our changelog in order to stay up-to-date with the latest features and fixes. You can also subscribe to the latest news at developers.zoom.us.

Thanks,
Max

jameschan0524 · November 9, 2021, 7:09pm

Hello @tommy
I have the same issue.
I am using zoom web sdk 2.0.1, Windows and MacOS Chrome 95
Would you please help me?
Best regards

donte.zoom · November 11, 2021, 1:17am

Greetings, @jameschan0524,

Happy to help ! Can you verify if you have implemented Cross Origin Isolation or the SharedArrayBuffer Chrome Origin Trial ? You can verify that the changes were applied to your site by entering the following in your browser console:

Also, I should note by default if you navigate to http://localhost:9998 it is enabled :

Vs.

Let me know if this helps.

Best,
Donte

jameschan0524 · November 11, 2021, 1:22pm

Thanks for your reply. @donte.zoom
Yes, already I have configured origin-trial and it says TRUE. but no work
Thanks

jameschan0524 · November 15, 2021, 7:19pm

Hi, @donte.zoom

I am not sure this caused my issue.
Would you please check this code?

github.com

zoom/websdk/blob/master/dist/lib/av/1504_video_mtsimd.min.js

!function(e){var t={};function r(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=t,r.d=function(e,t,i){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(i,n,function(t){return e[t]}.bind(null,n));return i},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=155)}([function(e,t){var r=e.exports={version:"2.5.7"};"number"==typeof __e&&(__e=r)},function(e,t){var r=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(e,t,r){var i=r(46)("wks"),n=r(32),a=r(1).Symbol,o="function"==typeof a;(e.exports=function(e){return i[e]||(i[e]=o&&a[e]||(o?a:n)("Symbol."+e))}).store=i},function(e,t,r){var i=r(1),n=r(0),a=r(8),o=r(9),s=r(10),u=function(e,t,r){var c,d,_,h=e&u.F,f=e&u.G,l=e&u.S,E=e&u.P,p=e&u.B,A=e&u.W,T=f?n:n[t]||(n[t]={}),R=T.prototype,v=f?i:l?i[t]:(i[t]||{}).prototype;for(c in f&&(r=t),r)(d=!h&&v&&void 0!==v[c])&&s(T,c)||(_=d?v[c]:r[c],T[c]=f&&"function"!=typeof v[c]?r[c]:p&&d?a(_,i):A&&v[c]==_?function(e){var t=function(t,r,i){if(this instanceof e){switch(arguments.length){case 0:return new e;case 1:return new e(t);case 2:return new e(t,r)}return new e(t,r,i)}return e.apply(this,arguments)};return t.prototype=e.prototype,t}(_):E&&"function"==typeof _?a(Function.call,_):_,E&&((T.virtual||(T.virtual={}))[c]=_,e&u.R&&R&&!R[c]&&o(R,c,_)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,e.exports=u},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,r){e.exports=!r(12)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,r){var i=r(7),n=r(42),a=r(41),o=Object.defineProperty;t.f=r(5)?Object.defineProperty:function(e,t,r){if(i(e),t=a(t,!0),i(r),n)try{return o(e,t,r)}catch(e){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(e[t]=r.value),e}},function(e,t,r){var i=r(4);e.exports=function(e){if(!i(e))throw TypeError(e+" is not an object!");return e}},function(e,t,r){var i=r(16);e.exports=function(e,t,r){if(i(e),void 0===t)return e;switch(r){case 1:return function(r){return e.call(t,r)};case 2:return function(r,i){return e.call(t,r,i)};case 3:return function(r,i,n){return e.call(t,r,i,n)}}return function(){return e.apply(t,arguments)}}},function(e,t,r){var i=r(6),n=r(23);e.exports=r(5)?function(e,t,r){return i.f(e,t,n(1,r))}:function(e,t,r){return e[t]=r,e}},function(e,t){var r={}.hasOwnProperty;e.exports=function(e,t){return r.call(e,t)}},function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){e.exports={}},function(e,t,r){var i=r(37),n=r(27);e.exports=function(e){return i(n(e))}},function(e,t){var r={}.toString;e.exports=function(e){return r.call(e).slice(8,-1)}},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,r){var i=r(8),n=r(66),a=r(67),o=r(7),s=r(24),u=r(39),c={},d={};(t=e.exports=function(e,t,r,_,h){var f,l,E,p,A=h?function(){return e}:u(e),T=i(r,_,t?2:1),R=0;if("function"!=typeof A)throw TypeError(e+" is not iterable!");if(a(A)){for(f=s(e.length);f>R;R++)if((p=t?T(o(l=e[R])[0],l[1]):T(e[R]))===c||p===d)return p}else for(E=A.call(e);!(l=E.next()).done;)if((p=n(E,T,l.value,t))===c||p===d)return p}).BREAK=c,t.RETURN=d},function(e,t,r){var i=r(27);e.exports=function(e){return Object(i(e))}},function(e,t,r){var i=r(6).f,n=r(10),a=r(2)("toStringTag");e.exports=function(e,t,r){e&&!n(e=r?e:e.prototype,a)&&i(e,a,{configurable:!0,value:t})}},function(e,t,r){var i=r(69),n=r(44);e.exports=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){var a=n&&i?i(e,r):{};a.get||a.set?n(t,r,a):t[r]=e[r]}return t.default=e,t}},function(e,t,r){"use strict";var i=r(86)(!0);r(33)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,r=this._i;return r>=t.length?{value:void 0,done:!0}:(e=i(t,r),this._i+=e.length,{value:e,done:!1})})},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.VIDEO_NV12=t.VIDEO_I420=t.VIDEO_RGBA=t.VIDEO_INVALID=t.SET_INTERVAL_MODE=t.RQUEST_ANIMATION_MODE=t.serverHeartbeatMaxTimeoutSeconds=t.INTERPRETATION_SET_INTERP

This file has been truncated. show original

if n.format is not “I420” or “NV12” then I am getting invalid i.format.
I guess, i variable should have a default value.

The format can be “I420A” or “I420P”.

Regards

saravana · November 16, 2021, 1:39am

I have similar issue as well. Please let me know if you found any solution/workaround for this issue

donte.zoom · November 17, 2021, 12:11am

@jameschan0524 ,

Thank you for providing those details. Can you share screenshot of your join function and also verify the following:

Make sure your CDN or Local Assets are also on the same 2.0.1 version and you are calling the following methods at the top of the page like this example :

Best,
Donte

donte.zoom · November 17, 2021, 12:19am

Hi,

Thank you for writing us, @saravana! It sounds like your camera requires a certain format. To ensure the best support, we will need more information pertaining to your camera setup along with details about the framework you are using ?

This information will help us provide more personalized support as well as debug the behavior you’ve encountered.

Best,
Donte

saravana · November 17, 2021, 10:19am

@donte.zoom My application uses React 17.0.2 and Zoom Web Meeting SDK 2.0.1. The video stream comes from Canvas HTML element as the application needs to send the custom rendered video from the browser to the Zoom meeting. It is similar to a camera video feed.

Stream (Camera or Canvas) continuously sends video frames(think of them as series of images) to the video or meeting. Images are in different formats like png, jpg, gif, etc, similarly VideoFrames might be in different formats. Zoom supports only two formats “I420” and “NV12”. The video frame format sent by Canvas stream is of format “I420A”. It is similar to I420 format, but with additional alpha channel.

The zoom meeting video issue that I have and @jameschan0524 mentioned in the earlier post are same.

This is not the issue with Zoom version, but the video frame formats that is supported by Zoom. His screenshot clearly explains the issue. I hope this explains the issue. Does Zoom has any plan to support formats other than I420 and NV12 in Web SDK ?

jameschan0524 · November 17, 2021, 4:53pm

@donte.zoom
Same here, I used canvas for the video stream, I need to customize the video stream on the canvas and send it to zoom.
Please help us with this issue.
Thanks

jameschan0524 · November 19, 2021, 1:48pm

@donte.zoom how are you?
Any luck?
Teams, Google Meet, Skype, Whereby does support I420A
Only I have an issue with Zoom and this was work perfectly on 1.9.7
Would you please help me? or please let me know what is the workaround.
Best regards

donte.zoom · November 19, 2021, 8:00pm

Greetings, @saravana and @jameschan0524,

It looks like you are trying to modify the function in the Web SDK library to send the custom rendered video from the browser to the Zoom meeting. Is this accurate? If so, that workaround is not supported for the Web SDK which is why you are seeing that behavior.

Alternatively, to achieve the user experience you are envisioning, our new Video SDK allows you to build highly customized user interfaces along with access to raw video and audio data. You will need a separate email account to get started, as no other Zoom services can reside on it. You can sign up for a new Video SDK account here. Please note, 10,000 mins/month are free and the plans are pay as they go.

Please let me know if this helps.

Best,
Donte

Topic		Replies	Views
Chrome browser 94 self video is not showing-Error - "framereader read null frame!" Web	4	934	October 31, 2021
Videos no longer rendering in Chrome (framereader read null frame!) Web	9	1175	October 31, 2021
Web sdk 1.9.9 + origins trials doesn't show video of participant on chrome v94 Web	8	1142	October 4, 2021
Web SDK with WebCodecs on 1.9.8 not showing user/participant video Web	81	5136	November 19, 2021
[Chrome] Not able to see my own video in the call, already activate the chrome's Origin Trial but still Web	2	459	November 25, 2021

Framereader read null frame! (Videos are no longer appearing in Chrome)

Related Topics