* pr fixes
* Fix import
* basic draft
* add link to react app
* fix player integration
* feat: update segments event
* fixes
* cleanups
* fix
* test
* Rename + add read me files
* Read me
* Read me file
* PR fixes
* Indent fixes
* feature*build): Multi webpack build
* Merged PR 33: feat: update segments event
feat: update segments event
* update client API enpoint
* Indent
* Revert settings
* tslint fixes
* Fix examples
* Resolve merge and fix colors
* Apply suggestions from code review
* Fix import
* PR fixes
* to vars
* open/close dialog
* fix after cr
* Dialog example
* Add read me desc
* tslint fixes
* fix after cr
* fix colors
* fix adter cr
* fix test
* fix after cr
* Merged PR 35: feature(): Update Base widget:
feature(): Update Base widget:
- Adding check for design system provider and creating id doesn't exist.
- adding Logger for debug mode
* Read me
* Html read me
* Fix read me
* read me tr 2
* Fix read me
* Indent + new line
* New line
* Table organized
* Ava-player addition
* Fix conflicts
* Example style
* Fix lint
* fix after cr
* add logger debug mode configuration
* fix after cr
* fix after cr
* Merged PR 36: fix: timeline event listeners
fix: timeline event listeners
* remove npmrc, fix color bug
* fix rvx player load
* fix:
player bug fixes:
- jump to currect time
- disable jump on non segment
actions menu bug fix
drawer bug
adding light colors
* fix rewind segments
* fix rvx name
* fix full screen
* add next prev segments buttons
* fix BB bug
* update shaka player
* clear state on second load
* PR fixes
* ts lint fixes
* temp
* fix tests
* clean
* update package
* Update test
* PR fixes
* ts lint
* Merged PR 38: Adding error handling
Adding error handling
* fix bug - timestamp on datepicker
* update buffering
* updare readme
* fix after cr
* update package name
* Merged PR 39: fix: Bounding box text blur on zoom
fix: Bounding box text blur on zoom
* Merged PR 42: fix: Bounding box on fullscreen bug
fix: Bounding box on fullscreen bug
* fix config
* discard test
* lint
* update readme
* Update package.json
* update package
* update build
* Merged PR 52: feature: adding retry button to rvx player
feature: adding retry button to rvx player
![image.png](https://dev.azure.com/MediaWidgets/17dfdb49-6642-46a2-ab5c-9714aeee9144/_apis/git/repositories/3398068c-bdc7-4b52-ba63-a1d860bbd014/pullRequests/52/attachments/image.png)
* add live mode support
* fix segment bug
* fix lint
* fix(build): remove zone drawer from build
* fix after cr
* update readme and package ver
* feature: hide video visibility on error
* fix segment jump on live mode
* add debug mode
* PBI: 9993064: [RVX] AVAPlayerConfig: undefined debug should be no-op
CR: See pull request.
While calling [AVA]Player.setDebugMode(true), I kept finding that it
would get reset to false soon afterwards. It turns out, if you call
[AVA]Player.configure and you DON'T specify the debug member, it sets
debug mode to false.
Changes
1) During [AVA]Player.configure, if the debug field is not specified
(ie. is undefined), then do nothing.
Testing Procedure
1) Call [AVA]Player.setDebugMode(true) and do not specify the debug
field when calling [AVA]Player.configure. Confirm that the RVX Widget
issues log messages to console (which corresponds to debug mode true).
Prior to this fix, you would get no debug messages.
* PBI: 9994089: [RVX] Support integrated debugging under Edge
CR: See pull request.
Check in the files and scripts needed to allow for integrated debugging
of RVX Widget inside Visual Studio Code and Microsoft Edge.
Changes
1) Added a dev dependency on http-server, and a script called "sample"
to run http-server at root level of the repo. Obviously, be sure to
take the usual precautions when you start a web-server which will serve
all your source code to anybody who asks for it. By default http-server
will try to serve on port 8080 and you will have to grant permissions (I
hope) to allow outsiders to access your web server. You should probably
DENY access from Public networks. Although it is true that we plan to
publish anyway, an attacker could, for example, see the same video
footage you are testing against (eg. the surveillance camera in your
nursery).
3) Checked in the package-lock.json reflecting the additional
http-server package and its dependencies.
Testing Procedure
1) Install
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge.
2) From repo root, run "code ." (without quotes) to launch Visual Studio
Code.
3) From a Windows prompt (either inside Visual Studio Code PowerShell
Terminal, or outside VS Code), npm run sample. This will launch
http-server which will serve from the root of your repo. Look at stdout
to see which port it is using (typically 8080, but if that is in use can
use a higher number like 8081 or 8083).
4) If necessary, edit launch.json and replace the 8080 port with
whatever port http-server is using.
5) In VS Code, set a breakpoint somewhere, such as in player.class.ts
(right-click Add breakpoint, or F9).
6) Hit F5 to launch a new Microsoft Edge window against your
sample.html.
7) Verify that you hit your breakpoint and that you can query local
variable values.
* PBI: 9992032: [RVX] Enhance sample.html
CR: See pull request.
I was having trouble getting started with RVX Widget because the
sample.html doesn't do anything. It still doesn't, after this change,
but at least it tells the user what three items he or she needs to start
streaming (with placeholders for two).
Changes
1) Added text boxes for user to enter client API endpoint, video name,
and JWT auth token for Client API. I pre-populated the first two to
play the rodrigb-toronto2 video from rodrigbanalyzer2. The third is a
secret and therefore must not be checked in (and will in any case
expire). If I had access to a public video which required no
authentication, I would have preferred to use that, but I don't know of
any.
2) Added a play button which will configure and load the RVX Widget with
the provided information. We also turn on debug mode so we can see RVX
widget traces in console.
3) Limited RVX widget to 720px width so I don't have to scroll down to
access the controls.
Testing Procedure
1) Start http-server and browse to sample.html. Obtain a client API auth
token for rodrigbanalyzer2, paste into JWT Auth Token for Client API
and press "Start Playback". Confirm that it plays rodrigb-toronto2.
2) Play a different video from a different account and confirm that
works, too.
* Bug 9991942: RVX Widget: Logger.log outputs an array
CR: See pull request.
Nofar recently added the ability to turn on RVX Widget logging
([AVA]Player.setDebugMode(boolean)). While using this, I discovered that
the log messages were outputting arrays which I would have to expand to
try to see the contents.
Changes
1) Apply the spread operator before passing the arg array to
console.log/console.error.
Testing Procedure
1) Start http-server, open examples\sample.html. In the browser's
developer console,
document.querySelector('ava-player').setDebugMode(true). Verify that you
now see logs being emitted to console. Prior to this fix, the logs would
be an array which you would have to expand, after this fix, it emits a
line (not an array).
* PBI: 9994070: [RVX] Expose shaka as global
CR: See pull request.
We need to be able to access a global shaka object in order to set the
logging level, so that we can see what's going on in Shaka.
Changes
1) Currently, there are three places in the code which
require('shaka-player.ui.debug.js') (yes - the debug version), and
then keep this for local use.
2) Earlier versions of this fix just modified these require's in place
to also export them. This earlier fix worked fine, but I decided to
consolidate and require at a central position. The benefit is, if we
ever decide to switch to non-debug Shaka UI, we would only have to
change it in one place. So instead of three require's, I now do a single
require in index.ts.
3) Where to put the single require matters. Putting the require inside
player.class.ts, for instance, but also exporting from index.ts,
compiles fine but fails at runtime because shaka is not initialized when
index.ts tries to export it. So I am hoping that index.ts gets executed
first.
4) Consolidating three require's to one require does not appear to have
any effect on the .min.js output size.
Known Issues
1) PBI #9994215: [RVX] Consider shifting from shaka-player.ui.debug.js
to shaka-player.ui.js. The possible issues of doing so (and the
benefits) are described in this bug.
Testing Procedure
1) Open sample.html. In console, run something like
shaka.log.setLevel(shaka.log.Level.V2) before and/or after you start
video playback and confirm that it has an effect on the amount of log
messages being sent to console. Prior to this change, such a statement
would fail because “shaka” == undefined.
* PBI: 9993042: [RVX] Log additional media events
CR: See pull request.
The current RVX Widget subscribes to some media events, but I needed to
subscribe to more in order to understand what was happening when
playback was failing to progress. Leaving this in place so that our logs
are more meaningful.
Changes
1) The checked-in shaka.ts is out of date. Added some new Shaka events
which I was interested in, such as onstatechange/StateChangeEvent,
but did NOT attempt to exhaustively add all missing Shaka events.
2) Added listeners to a set of interesting events (wrt media playback).
All these listeners do is to log the event.
3) While doing this, found and fixed two typos in shaka.ts:
loaded/LoadedEvent was incorrectly tied to loading/LoadingEvent,
gapSize was misspelled as gaSize.
Testing Procedure
1) Play a video from sample.html. Verify that you see events being
logged in console, such as loaded/loading status, buffering true ->
false, etc.
* Bug 9963755: [AVA] Shaka hangs on short discontinuous segment playback
CR: See pull request.
When playing on-demand or live content, Shaka can hang indefinitely
sometimes. What we have found is that we can often resume playback by
seeking Shaka.
Changes
1) Check every 3 seconds whether or not Shaka is stalled. We use a 1 ms
threshold on HTMLMediaElement.currentTime, and we also check if
HTMLVideoElement is paused.
2) If Shaka is stalled but either Shaka or HTMLVideoElement thinks that
there is sufficient media to begin playback, then we seek Shaka to
current position + 1 second to attempt to break the impasse. Oftentimes
+ 0 or + 0.1 is enough, but where this can fail is when there are
discontinuities in the media, so +1 allows us to get past these
discontinuities faster and only loses a little user media.
3) In the live case, Shaka really is buffering, so instead we verify
that we were playing in live position before attempting a seek to
live, but only after 9 seconds of failure to progress (because we want
to give time for buffering to complete). It is important not to seek to
live if user was actually playing in DVR as opposed to live position.
4) Finally, if we encounter 10 consecutive stall detections, we attempt
a seek to same (+0 seconds) as this can sometimes break an impasse
and is low-risk.
Testing Procedure
1) Hang at start: play rodrigb-vehicle-counting-cvr-007 from
rodrigbanalyzer2 in RVX widget. Confirm this no longer stalls at
start of playback.
2) Hang mid-stream and start: With the new default Shaka bufferingGoal
of 30, Test001-AxisCamera from rodrigbanalyzer2 no longer stalls at
start or midstream. To induce stall, modify player.class.ts in RVX
codebase so that bufferingGoal is 10 instead of 30. You should stall at
start, and burn-in times of 21:19:50 and 21:34:04 mid-stream.
3) Hang mid-stream: Play rodrigb-toronto from rodrigbanalyz, seek to
around mid-way, burn-in time should be 19:50 or so (I forget the
hour).
4) Live hang: play simple-audio-video from krishnduuswc, or else your
own live camera feed. While live streaming (~45 seconds behind live),
log into camera webpage and restart camera and/or change RTSP password
to lengthen the outage (did not test the latter). The playback should
stall (no way to avoid, no media being produced), but should eventually
recover. We generally see it recover and stall around three times before
permanently recovering. Prior to this fix, it would stall indefinitely.
* fix after cr
* Merged PR 60: fix: error callback on shake
fix: error callback on shake
* Merged PR 61: version update
version update
* Merged PR 63: fix object metadata overlay tooltip
fix object metadata overlay tooltip
* fix(build): remove zone drawer from build
* Adding license file:
* fix css jump on player
seek bar on live fix
movinf set debug mode to base widget
* fix decleration files
* fix segment jump during live mode
* update readme and package
* check segment ranges
* fix sample
* Jsons
* PBI: 9992032: [RVX] Enhance sample.html, part 2.
CR: See pull request.
Prakash recommended some additional enhancements to sample.html.
Changes
1) Prakash suggested that sample.html should use global.js, not index.js
(formerly ava-player.js), because the latter was intended for node
usage, and the former was meant to be used by browsers from CDN and
defines a top-level ava variable, so that you can immediately start
referring to ava.shakaPlayer, etc. Unfortunately, this ava object seems
to be different than the one which is actually performing playback.
2) I was noticing an error in console whenever loading sample.html. It
was complaining, "Uncaught ReferenceError: onAVALoad is not defined
at HTMLScriptElement.onload". Fixed by rearranging the <script> blocks
so that onAVALoad is defined when referenced in HTML.
Testing Procedure
1) Browse to sample.html. In developer console, verify that the
top-level ava variable is no longer undefined. Unfortunately, it
doesn’t seem to be the playback ava player.
* PBI: 9994089: [RVX] Support integrated debugging under Edge, part 2.
CR: See pull request.
A recent merge, 'remove-zone-drawer', renamed the webpack entry
name from webpack://ava-widgets to webpack://ava. Update launch.json to
reflect this to restore integrated debugging in VS Code.
Testing Procedure
1) Verify that with the latest changes, integrated debugging is
broken, and is fixed with this change.
* BUG: 10009964: RVX: Player seek in VOD Timeline for Live assets can
still cause mismatched seek positions
CR: (pull request).
An earlier fix to getVideoOffset() was contributed to fix a hang when
transitioning from live view to on-demand. When the fix was published,
we tested it against all our available live feeds, and we found that the
longer a camera feed has been up, the more broken seeking becomes in the
on-demand view. It starts off seeking somewhere other than where you
seeked (typically, to the left/earlier), and eventually degenerates to
the point where clicking anywhere on the timeline view only seeks to the
extreme left.
Changes
1) The new fix fixes the old hang scenario AND the new seek error. It is
conceptually simple: it is never OK to seek video.currentTime outside
of [shaka]player.seekRange() start/end. To achieve this, we map the
start time of the first available-media segment to the seekRange() start
time. Fixed getVideoOffset() to carry out this mapping. Because the
available-media segments are not currently being saved where they can be
accessed, I added a new class member to store the start time in seconds
of the first segment.
2) Bumped the package.json version from 0.4.8 to 0.4.9. This causes an
update to package-lock.json when npm install is run, so I am checking
in that file along with package.json (as should any other developer who
updates package.json, but it seems this has not been happening).
3) While updating package.json, I realized that the shaka-player
dependency specifies ^3.1.0, which allows for auto-update, and
Prakash reminded me that 3.1.1 is due out soon. I don’t want the risk of
regression so I removed the ^ to lock to 3.1.0 specifically.
4) Enhanced the existing video.currentTime seek log messages to also
print the valid seek range, which is needed to interpret whether the
seek position was as expected.
Details
1) This earlier fix made the assumption that the DASH manifest from
origin would follow DASH spec (https://dashif-documents.
azurewebsites.net/Guidelines-TimingModel/master/Guidelines-TimingModel.
html#period-timing). It does not, because it can return a
presentationTimeOffset from days ago, yet still have first period start
time of 0, resulting in a seek range starting at a value other than 0.
This is not DASH compliant and some players could fail.
Known Issues
1) Bug # 10014971: AVA: Origin live manifest is not DASH compliant.
2) The fact that RVX Widget uses availability ranges from the Rest API,
instead of data from Shaka, may lead to issues in future. For
example, early versions of this fix had an alarming regression where the
rodrigb-toronto2 clip from rodrigbanalyzer2, would loop infinitely in
the first 3 seconds. We assumed that the first segment returned by
createTimelineSegments() represented the first availability segment, but
createTimelineSegments() discards segments < 5 seconds. Thus we would
seek backwards instead of forwards to the next segment. This never would
have happened if using data from Shaka.
Testing Procedure
1) Test against a matrix of camera feeds WITH time burn-in which: a)
started at varying times (eg. 8 days ago, 1 day ago, just now), b)
have or do not have media at 00:00 GMT today, c) have and do not have
discontinuities today and in previous days, etc. Play against all feeds,
toggle between live/on-demand today/on-demand previous days. In all
cases, seek around and verify that the seek went where you expected to
go by looking at the time burn-in (the timeline markings are excellent
for this as they are on the hour). DO NOT use the playback cursor as
"proof" because we have seen cases where the playback cursor can be
painted in the wrong place (typically, extreme right), but playback is
actually still on the timeline.
* Update UI clock
* Fix segments length
* jump to closest segment
* merge segments with same start and end
* Merged PR 71: feature: enalbe timeline zoom
feature: enalbe timeline zoom
![image.png](https://dev.azure.com/MediaWidgets/17dfdb49-6642-46a2-ab5c-9714aeee9144/_apis/git/repositories/3398068c-bdc7-4b52-ba63-a1d860bbd014/pullRequests/71/attachments/image.png)
+ zone draw input zones bug fix
* Adding localization - part 1
* AVA localization
* Update player controllers configuration
* fix after cr
* Merged PR 82: feature: add disable zoom options in timeline
feature: add disable zoom options in timeline
* feature: add option to disable zoom from player configuration
* Merged PR 85: fix: zoom css
fix: zoom css
* Add localization for AVA + de lang for tests, shaka player locale
* Adding de json, adding date picker localization
* Fix resourcs, json files
* Date picker
* Revert code
* revert
* Remove unused code
* Fix canvas read me file
* Merged PR 87: feature: add design system provider read me
feature: add design system provider read me
Add tittle to zoom buttons + css fix
* fix(): Timeline Component unit tests
* (feat) - add time tooltip
* fix lint issues
* fix read me
* new line
* PR fixes
* Apply suggestions from code review
* Remove console.logs and pr fixes
* PR fixes
* fix after cr
* PR fixes
* fix after cr
* PR fixes
* fix timeline test
* fix test
* fix test
* fix json file
* more fixes and localization
* Revert code
* Add localization + tslint fixes
* Add time picker localization
* update readme files
* Remove RVX wording
* remove example web component
* fix after cr
* Read.me
* Remove extra line
Co-authored-by: Moris <moriarais@gmail.com>
Co-authored-by: Ori Ziv <orziv@DESKTOP-LKS7HLF.corp.microsoft.com>
Co-authored-by: orziv <orziv@microsoft.com>
Co-authored-by: MIDDLEEAST\domazor <domazor@microsoft.com>
Co-authored-by: Ben Bakhar <bebakhar@microsoft.com>
Co-authored-by: Moria Rais <morai@microsoft.com>
Co-authored-by: Raymond Cheng <raych@microsoft.com>