googlearchive / sample-media-pwa Goto Github PK

I currently get "It is recommended that a robustness level be specified. Not specifying the robustness level could result in unexpected behavior." warning message in my JS console.

Here's the code (missing robustness):

  static get CONTENT_FORMAT () {
    return 'cenc';
  }

  static get CONTENT_TYPE () {
    return 'video/mp4; codecs="avc1.4d401f"';
  }

  static get CONFIG () {
    return [{
      initDataTypes: [LicensePersister.CONTENT_FORMAT],
      videoCapabilities: [{
        contentType: LicensePersister.CONTENT_TYPE
      }],
      persistentState: 'required',
      sessionTypes: ['persistent-license']
    }];
  }

Which robustness value shall we use for this sample app?

• SW_SECURE_CRYPTO
• SW_SECURE_DECODE (L3)
• HW_SECURE_CRYPTO
• HW_SECURE_DECODE
• HW_SECURE_ALL (L1)

See https://storage.googleapis.com/wvdocs/Chrome_EME_Changes_and_Best_Practices.pdf

Is there any demo available to give it a try?

Thanks!

Minor thing I noticed, in the hash-removal.js the constant hasHashInName gets initialized with the regex and then if (!hasHashInName) gets tested. This doesn't make sense since the actual url never gets checked against the regex and the hash always gets removed. It only works because if there's no hash nothing gets removed. Not a big issue but a bit confusing ;)

It's actually tricky to implement because when the orientation is locked, you will have to use the device orientation API to detect that the device is back to portrait orientation and then unlock. However, that would be a better experience.

Might be better to intercept the beforeinstallprompt event and display the prompt at some point when the user shows engagement.

Getting the error from package.json.

"copy-client": "copy \"src/client/**/*.*\" \"!src/client/scripts/**/*.*\" \"!src/client/styles/**/*.*\" \"!src/client/videos/**/*.*\" dist/client",

I am using windows 8.1

• Event for watching a video
• Event for finishing a video
• Event for downloading a video for offline
• Page visit

@johnpallett Any more?

please guide me how to change the media list from app.

Hi, I wanted to try running this project on my local computer, I did the npm install and added the config files,
But when I run the npm run dev, these error occured.

> [email protected] build-resource-list /Users/01138260/Documents/GitHub/sample-media-pwa
> node build/build-resource-list.js

(node:9780) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.
child_process.js:400
    throw new TypeError('"cwd" must be a string');
    ^

TypeError: "cwd" must be a string
    at normalizeSpawnArguments (child_process.js:400:11)
    at exports.spawn (child_process.js:493:38)
    at /Users/01138260/Documents/GitHub/sample-media-pwa/node_modules/parallelshell/index.js:104:17
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (/Users/01138260/Documents/GitHub/sample-media-pwa/node_modules/parallelshell/index.js:100:6)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `npm run build && parallelshell "npm run watch" "npm run serve"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/01138260/.npm/_logs/2018-01-24T04_43_37_764Z-debug.log

Do you know why is it and how to fix this?

Would be great if you could please document how I can create my own bucket with my own transcoded videos, assuming say I'm starting from the FCPX output of some huge4k.mov file.

https://github.com/GoogleChrome/sample-media-pwa/blob/master/src/client/videos.json

If you can resize the poster to 80% (or so) of current size, then move the description to the left, that will use the desktop real estate more effectively. This is similar to the layout used by Netflix:

Left: Description
Center/Right: Image
Bottom: Other possible videos

on Chrome for Android, if you go to the EME video and attempt to play the content, you will be prompted (if the first time).
0. on chrome for Android try the following

1. try to play protected content
2. get prompted - "biograf-155113.appspot.com wants to unique identify your device to play protected content. learn more
   [BLOCK][ALLOW]
3. click [BLOCK]
4. content never plays

the problem is this setting is persisted, so next time into the site, you don't get a prompt anymore, the content just never plays.

RECOMMENDED :
-update biograf PWA to handle this and provide guidance to user. if set to BLOCKed for the site, RMKSA promise will be rejected when requesting com.widevine.alpha.

I've cloned the project and I've tried to run it.
I've configured the project following the readme, but videos are not loaded in the page.
As far as I can see the app does not perform any network request.
I've no idea on how to proceed.
I've also created a project using google-cloud-cli, but I cannot find anywhere and I could not find any reference.

We should be degrading gracefully on browsers that don't support service workers. Right now, in Safari on desktop (and Chrome/Safari on iOS), the thumbnails for the images do not show up, and the videos do not play.

My PWA works offline fine when launched from chrome in android(version 66). But when added to homescreen, then launching from homescreen with net enabled launches the pages. After disabling net it shows page not available in the homescreen app.
Hosted in following url- https://projectclean.herokuapp.com/

1. Manifest file
   {
   "name": "Project clean as pwa",
   "short_name": "Pro Clean",
   "icons":[
   {
   "src": "/icons/icons8-washing-machine-96.png",
   "type": "image/png",
   "sizes": "96x96"
   },
   {
   "src": "/icons/icons8-washing-machine-480.png",
   "type": "image/png",
   "sizes": "480x480"
   },
   {
   "src": "/icons/icons8-washing-machine-512.png",
   "type": "image/png",
   "sizes": "512x512"
   }
   ],
   "start_url":"/initial",
   "scope": "../",
   "display":"standalone",
   "orientation":"any",
   "background_color":"#fff",
   "theme_color":"#3f51b5",
   "description":"Simple dry clean description",
   "dir":"ltr",
   "lang":"en-US"
   }

2. Service worker.js
   var CACHE_STATIC_NAME='static-v3'+new Date().getUTCHours()+'.'+new Date().getUTCMinutes();
   var CACHE_DYNAMIC_NAME='dynamic-v2';
   var PRO_STORE='pro-store';

self.addEventListener('install',function(event){

event.waitUntil(
	caches.open(CACHE_STATIC_NAME)
	.then(function(cache){
		console.log('[Service worker install] Precaching app shell');
		cache.addAll([
			'/',
			'/offline',
			'/initial',
			'/orderreceive',
			'/orderdeliver',
			'/js/idb.js',
			'/js/collect.js',
			'/js/application.js',
			'/js/collection.js',
			'/js/fetch.js',
			'/js/promise.js',
			'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'
		]);
	})
);

});

self.addEventListener('activate',function(event){
// console.log("[service worker] activating service worker..", event);
event.waitUntil(
caches.keys().then(function(keyList){
return Promise.all(keyList.map(function(key){
if(key!==CACHE_STATIC_NAME && key!==CACHE_DYNAMIC_NAME){
console.log('[Service worker] Remvoving old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});

//cache first then network fallbak strategy
self.addEventListener('fetch',function(event){
// console.log("[service worker] fetching asset service worker..", event);
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
return;
}

event.respondWith(
	caches.match(event.request)
	.then(function(response){
		if(response){
			return response;
		}else{
			console.log('[Service worker fetch] fetching dynamic content');
			console.log(event.request);
			return fetch(event.request)
			.then(function(res){
				console.log(res.clone());
				return caches.open(CACHE_DYNAMIC_NAME)
					.then(function(cache){
						// trimCache(CACHE_DYNAMIC_NAME, 3);
						cache.put(event.request.url, res.clone());
						return res;
					})
			}).catch(function(err){
				console.log(err);
				return caches.open(CACHE_STATIC_NAME)
					.then(function(cache){
						return cache.match('/offline');
					})
			});
		} 
	})
);	

});

Here's the error I get in DevTools:

ranged-response.js:50 Uncaught (in promise) TypeError: Failed to construct 'Blob': Iterator getter is not callable.
    at ranged-response.js:50
    at <anonymous>

Gee, where are the tests?

On desktop the main image for the primary video is too big, please reduce to 80% of current

In Safari iOS, clicking custom pause button makes the video native controls show up. I guess the fix would be as simple as video.controls = 'false' in onPause().

@paullewis

In https://github.com/GoogleChrome/sample-media-pwa/blob/2efbd1e25d1919c78eecb997318bfaaaf5e8ae7e/src/client/scripts/video-player/video-player.js#L175, did you mean SUPPORTS_REMOTE_PLAYBACK instead of SUPPORTS_MEDIA_SESSION?

@paullewis

You may want to use <video playsinline> as featured in https://webkit.org/blog/6784/new-video-policies-for-ios/:

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.

This means though that the fullscreen button will need to call video.webkitEnterFullScreen(); not videoContainer. I believe this will make the experience more consistent between Safari iOS and Chrome Android.

@paullewis WDYT?

It would be great if the feature implemented by Chrome for the native controls could be implemented in the sample: when a video goes fullscreen, the orientation is locked to match the video's aspect ratio (maybe only landscape in your case?). If you like to read C++, you can check the Blink's implementation. Most of it should translate to Javascript fairly well.

Biograf canvas is always slightly larger than the window on desktop resulting in a horizontal scroll bar that can't be removed. Please fix canvas width to match window width on desktop.

Hi there!

I'm testing this widevine offline license feature using this sample source. And I was successful in issuing an offline license and confirmed that it was well saved. Is there a way to trigger a session-restore event after this license needs to be restored?

Cloning the repo fresh and building from Dockerfile threw:

error pulling image configuration: Get https://storage.googleapis.com/artifacts.google-appengine.appspot.com/containers/images/sha256:6b9502deb56602a5daacd0bfb524d10fffc86e2aa4dc57e7f137d16640b9f4e9: dial tcp 172.217.12.144:443: i/o timeout

Has the file been removed from google cloud storage?

I got this error when starting the application

Errors logged to console don't always indicate where the error occurred:
DougReeder@331e083

Is that intended to have two "#4" and "#5" set/store license sequences when I'm taking a protected video offline?

1. Creating Media Keys com.widevine.alpha
2. Setting Media Keys MediaKeys {}
3. Using PSSH data: AAAAmXBzc2gAAAAA7e+...
4. Setting new license:  ArrayBuffer(714) {}
5. Storing license for next play: a131ab310c7a8040a60b9a80420b46ffecc1
4. Setting new license:  ArrayBuffer(920) {}
5. Storing license for next play: a131ab310c7a8040a60b9a80420b46ffecc1

Hey guys,

I've got this error after I run "npm run dev"
I copied config files but I didn't generate new values , but I think it's not the case here, right?

fs.js:133
  throw new ERR_INVALID_CALLBACK();
  ^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
    at maybeCallback (fs.js:133:9)
    at Object.writeFile (fs.js:1139:14)
    at err (/Users/lazarieo/git-private/sample-media-pwa/build/transpile-sass.js:54:10)
    at /Users/lazarieo/git-private/sample-media-pwa/node_modules/mkdirp/index.js:48:26
    at FSReqWrap.oncomplete (fs.js:159:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-sass: `node build/transpile-sass.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build-sass script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lazarieo/.npm/_logs/2018-07-20T11_15_37_581Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run clean-dist && npm run make-dist && npm run make-client && npm run copy-all && npm run build-js && npm run build-sass && npm run build-resource-list`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lazarieo/.npm/_logs/2018-07-20T11_15_37_613Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `npm run build && parallelshell "npm run watch" "npm run serve"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lazarieo/.npm/_logs/2018-07-20T11_15_37_642Z-debug.log

npm version 6.1.0
node version 10.5.0

<p>All our content is available on the web, which means you can getaccess to it whenever you want it. What’s more, if your browsersupports the latest technologies, you can save videos to viewwhenever you’re offline!</p>

• The video player currently uses vw to set width and aspect ratio. This approach renders a horizontal scrollbar and extends video player outside the viewport in Windows and Linux based browsers, which is annoying. Consider using % to also make the video player embed into other divs.

  

• The max-height css property of player forces it to be smaller in full screen, leaving black bars on top and bottom of the screen.

  

Got this error when starting the application.

[SOLVED] by updating the parallelshell package to v3.

What do you think about calling _setMediaSessionData only after video plays successfully so that we don't waste bandwidth if video fails to load?

  _onPlay () {
    this._video.play().then(_ => {
      console.log('playing...');
      this._updateVideoControlsWithPlayerState();
+     this._setMediaSessionData();
    }, err => {
      console.warn(err);
    });
  }

@paullewis

I followed all your steps, everything goes fine, until i run npm run dev..

when i run that command, am seeing this error.. i have no idea how to fix this.. kindly help me

npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: npm run build && parallelshell "npm run watch" "npm run serve"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'npm run build && parallelshell "npm run watch" "npm run serve"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the googlechrome-biograf package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && parallelshell "npm run watch" "npm run serve"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs googlechrome-biograf
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls googlechrome-biograf
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/sample-media-pwa/npm-debug.log
ubuntu@ip-172-31-25-244:/sample-media-pwa$ clear
ubuntu@ip-172-31-25-244:/sample-media-pwa$ sudo npm run dev

[email protected] dev /home/ubuntu/sample-media-pwa
npm run build && parallelshell "npm run watch" "npm run serve"

[email protected] build /home/ubuntu/sample-media-pwa
npm run clean-dist && npm run make-dist && npm run make-client && npm run copy-all && npm run build-js && npm run build-sass && npm run build-resource-list

[email protected] clean-dist /home/ubuntu/sample-media-pwa
rm -rf dist

[email protected] make-dist /home/ubuntu/sample-media-pwa
mkdirp dist

[email protected] make-client /home/ubuntu/sample-media-pwa
mkdirp dist/client

[email protected] copy-all /home/ubuntu/sample-media-pwa
npm run copy-server && npm run copy-config && npm run copy-views && npm run copy-client

[email protected] copy-server /home/ubuntu/sample-media-pwa
cp -R src/server dist

[email protected] copy-config /home/ubuntu/sample-media-pwa
cp -R src/config dist

[email protected] copy-views /home/ubuntu/sample-media-pwa
cp -R src/views dist

[email protected] copy-client /home/ubuntu/sample-media-pwa
copy "src/client//." "!src/client/scripts//." "!src/client/styles//." "!src/client/videos//." dist/client

✔ ../../dist/client/images/header/ic_account_circle_white_24px.svg
✔ ../../dist/client/images/header/ic_close_white_24px.svg
✔ ../../dist/client/images/header/ic_menu_white_24px.svg
✔ ../../dist/client/images/home/home-promo.png
✔ ../../dist/client/images/[email protected]
✔ ../../dist/client/images/[email protected]
✔ ../../dist/client/images/[email protected]
✔ ../../dist/client/images/[email protected]
✔ ../../dist/client/images/spinner.png
✔ ../../dist/client/images/video-placeholder.png
✔ ../../dist/client/images/video/ic_cast_connected_white_24px.svg
✔ ../../dist/client/images/video/ic_cast_white_24px.svg
✔ ../../dist/client/images/video/ic_close_white_24px.svg
✔ ../../dist/client/images/video/ic_file_download_white_24px.svg
✔ ../../dist/client/images/video/ic_forward_30_white_24px.svg
✔ ../../dist/client/images/video/ic_fullscreen_exit_white_24px.svg
✔ ../../dist/client/images/video/ic_fullscreen_white_24px.svg
✔ ../../dist/client/images/video/ic_lock_white_24px.svg
✔ ../../dist/client/images/video/ic_offline_pin_white_24px.svg
✔ ../../dist/client/images/video/ic_pause_white_24px.svg
✔ ../../dist/client/images/video/ic_play_arrow_white_24px.svg
✔ ../../dist/client/images/video/ic_replay_30_white_24px.svg
✔ ../../dist/client/images/video/ic_replay_white_24px.svg
✔ ../../dist/client/images/video/ic_timelapse_white_24px.svg
✔ ../../dist/client/images/video/ic_volume_off_white_24px.svg
✔ ../../dist/client/images/video/ic_volume_up_white_24px.svg
✔ ../../dist/client/images/video/icon-buffering.png
✔ ../../dist/client/images/video/icon-playback.png
✔ ../../dist/client/manifest.json
✔ ../../dist/client/sw.js
✔ ../../dist/client/third_party/libs/idb-keyval.js
✔ ../../dist/client/third_party/libs/shaka-player.compiled.js
✔ ../../dist/client/third_party/Roboto/Roboto-300.woff
✔ ../../dist/client/third_party/Roboto/Roboto-400.woff
✔ ../../dist/client/third_party/Roboto/Roboto-500.woff
✔ ../../dist/client/videos.json

[email protected] build-js /home/ubuntu/sample-media-pwa
node build/transpile-javascript.js

/home/ubuntu/sample-media-pwa/build/transpile-javascript.js:49
let cache;
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3

npm ERR! Linux 4.4.0-1020-aws
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build-js"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build-js: node build/transpile-javascript.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build-js script 'node build/transpile-javascript.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the googlechrome-biograf package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node build/transpile-javascript.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs googlechrome-biograf
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls googlechrome-biograf
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/sample-media-pwa/npm-debug.log

npm ERR! Linux 4.4.0-1020-aws
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: npm run clean-dist && npm run make-dist && npm run make-client && npm run copy-all && npm run build-js && npm run build-sass && npm run build-resource-list
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'npm run clean-dist && npm run make-dist && npm run make-client && npm run copy-all && npm run build-js && npm run build-sass && npm run build-resource-list'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the googlechrome-biograf package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run clean-dist && npm run make-dist && npm run make-client && npm run copy-all && npm run build-js && npm run build-sass && npm run build-resource-list
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs googlechrome-biograf
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls googlechrome-biograf
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/sample-media-pwa/npm-debug.log

npm ERR! Linux 4.4.0-1020-aws
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: npm run build && parallelshell "npm run watch" "npm run serve"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'npm run build && parallelshell "npm run watch" "npm run serve"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the googlechrome-biograf package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build && parallelshell "npm run watch" "npm run serve"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs googlechrome-biograf
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls googlechrome-biograf
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/sample-media-pwa/npm-debug.log
ubuntu@ip-172-31-25-244:~/sample-media-pwa$