Video plays in notebook but not in JupyterLab

[vincenzon]

When I run an example similar to what is in the ImageRecorder demo as a notebook, the video plays automatically. For example a cell containing:

video = VideoStream.from_url( "http://localhost:8000/video.mp4") video

In a Jupyter notebook runs as expected, showing the video. However in Lab it just shows the class string as output:

VideoStream(video=Video(value=b'http://localhost:8000/video.mp4"))

Is there some magic command that needs to run or some setting in Lab? I know Lab disables javascript to some degree, perhaps that has something to do with it?

[SylvainCorlay]

Did you install the jupyterlab extension?

[vincenzon]

Yes I did. Maybe it matters, I am running Hub in a container that spans the Lab servers in their own containers. I installed the extension in the Lab containers. Should it be installed in the Hub container?

I looked at the output when I installed the extension, there are a few warnings:

jupyter-webrtc-0.4.3.tgz
Node v8.15.0

> node /usr/local/lib/python3.6/dist-packages/jupyterlab/staging/yarn.js install
yarn install v1.9.4
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
warning css-loader > cssnano > autoprefixer > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > caniuse-api > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[3/5] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
warning "@jupyterlab/vdom-extension > @nteract/[email protected]" has incorrect peer dependency "react@^15.6.1".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 55.12s.

And then later:

WARNING in d3-array
  Multiple versions of d3-array found:
    1.2.4 ./~/d3-scale/~/d3-array from ./~/d3-scale/~/d3-array/src/index.js
    2.0.3 ./~/d3-array from ./~/d3-array/src/index.js

WARNING in vega-lite
  Multiple versions of vega-lite found:
    2.5.1 ./~/vega-lite/build/src from ./~/vega-lite/build/src/compile/selection/selection.js
    2.6.0 ./~/vega-lite/build from ./~/vega-lite/build/src/index.js

[isConic]

Has anyone solved this issue? I'm looking to integrate ipywebrtc in my jupyter lab workflow.

[smartinsightsfromdata]

@SylvainCorlay I have the same issue.

I have OSX 10.14.16 & python 3.7.4 jupyterlab==1.1.4 notebook==6.0.1 ipykernel==5.1.2 ipython==7.6.1 ipywebrtc==0.5.0

I installed ipywebrtc and the extension with:

pip install ipywebrtc 
jupyter labextension install jupyter-webrtc

As reported, it works with jupyter, it doesn't with jupyterlab (but VideoStream.fromfile works in jupyterlab with no issues).

Code:

from ipywebrtc import VideoStream
video2 = VideoStream.from_url('./Big.Buck.Bunny.mp4')
video2

[martinRenou]

Do not forget to install the ipywidgets labextension with:

jupyter labextension install @jupyter-widgets/jupyterlab-manager

[smartinsightsfromdata]

@martinRenou Tried but no luck.

VideoStream.from_url doesn't work on my OSX box. But now I've tried it on my Ubuntu box and it doesn't work there too.

On the other hand jupyterlab-manager mentions compatibility with jupyterlab==1.0 I have jupyterlab==1.1.4 . - Could this be the issue?

[martinRenou]

Are you using VideoStream.from_url passing a URL to a remote or local file? What does your URL look like? There are some behavior differences between Jupyter Notebook and JupyterLab unfortunately.

If you are passing a path to a local file as URL:

• In the classic Jupyter Notebook, the path is relative to the Notebook you are working on.
• In JupyterLab, the path is relative to the server (where you started JupyterLab) and you need to prefix the path with “files/”.

[smartinsightsfromdata]

@martinRenou let me clarify:

This works:

from ipywebrtc import VideoStream
video = VideoStream.from_file('./Big.Buck.Bunny.mp4')
video

As I described above, the code below doesn't work in jupyterlab (this is the code available in the docs, by-the-way):

from ipywebrtc import VideoStream
video2 = VideoStream.from_url('./Big.Buck.Bunny.mp4')
video2

With the above, I get: Loading widget... but nothing happens.

Using a "proper" url I tried:

video4 = VideoStream.from_url('https://webrtc.github.io/samples/src/video/chrome.webm')
video4

Bu I get:

Error creating view for mediastream: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data

I get the audio but not the video.

[maartenbreddels]

Error creating view for mediastream: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data

If this is the case, than we can't solve that. There are security issues with this, and actually ipywebrtc development led to security improvements in chrome that may be the cause of this.

Basically, why this is not allowed is the following. If I give you a html page, with a link to a video you can only access (your private videos somewhere in the cloud), there are 'private pixels' on the page. These private pixels should not be allowed to be read by any javascript on that page, because I could send those to my private server and steal your video. Before, chrome actually allowed too much, and Firefox was too strict. Is this maybe Firefox?

[martinRenou]

So in the case of './Big.Buck.Bunny.mp4', you need to apply the rule I described in my previous comment. Which means that in JupyterLab you would need something like:

from ipywebrtc import VideoStream
video2 = VideoStream.from_url('files/Big.Buck.Bunny.mp4')
video2

But, be careful, the path must be relative to the server (where you started JupyterLab).

Because the behavior is different between JupyterLab and Jupyter Notebook I would highly recommend using from_file instead of from_url most of the time.

[vhirtham]

For everybody who has trouble showing the widget in JupyterLab:

It is actually related to ipywidgets. What solved the problem for me was the answer from "adhg" in the following issue: https://github.com/jupyter-widgets/ipywidgets/issues/2083

I just quote it, so you don't have to follow the link and search for it:

1. Install nodeJS (https://nodejs.org/en/)
2. pip install ipywidgets
3. jupyter nbextension enable --py widgetsnbextension
4. jupyter labextension install @jupyter-widgets/jupyterlab-manager 5 (may need to restart your lab)

For step 2, you can also use conda instead of pip. I hope that helps. Greetings

@maartenbreddels Maybe it is helpful to add this to the installation section of the documentation.

[aravindpai]

Facing the same issue!

[ashesh-0]

I was facing a samilar issue. Although it is not related to ipywebrtc.Videostream, I'm posting it here since it is related. I was not able to play ipywidgets.Video. I installed jupyterlab=3, ipywidgets using conda. Now, finally, it is working fine!

I think the updated jupyterlab did the job. With this version, thy claim that one does not need to install nodejs and other things. Everything needed is now baked in conda packages. link Following code works now:

from ipywidgets import Video
Video.from_url("https://webrtc.github.io/samples/src/video/chrome.webm")