Playing webrtc stream by embedding html containing the video tag

🧩 Custom Components
1

Hi, I am new to streamlit and html, and I found streamlit is more easy to get started. So, I am trying to embed html containing the video tag by using streamlit components. The html code is like below:

<div>
    <h3>webrtc player</h3>
    <video id="video-webrtc" controls></video>
</div>
<script src="./dist/jswebrtc.min.js"></script>
<script> 
var video = document.getElementById("video-webrtc");
var url = "webrtc://ip-address/live/livestream";
var player = new JSWebrtc.Player(url, { video: video, autoplay: false, onPlay: (obj) => { console.log("start play") } });
</script>

The external js file come from jswebrtc
I had tested above code in html page and it works well, but when I embeded it to streamlit by streamlit.components.v1.html and it just can not work.
I wonder if I’m missing something or whether this is feasible. Much thanks in advance!

2

Hi @harasuki

It seems you’re using a relative path, have you set this in the .config.toml file:

[server]
enableStaticServing = true

Please see the Docs for details Static file serving - Streamlit Docs

Alternatively, you may try embedding this inside a st.markdown and set unsafe_allow_html=True

st.markdown('''
<div>
    <h3>webrtc player</h3>
    <video id="video-webrtc" controls></video>
</div>
<script src="./dist/jswebrtc.min.js"></script>
<script> 
var video = document.getElementById("video-webrtc");
var url = "webrtc://ip-address/live/livestream";
var player = new JSWebrtc.Player(url, { video: video, autoplay: false, onPlay: (obj) => { console.log("start play") } });
</script>
''', unsafe_allow_html=True)

Hope this helps!

3

Hi @dataprofessor, thanks for your advice. I just modified the .config.toml file in server directory, and I write a simple test js file and put it under static folder, then I change my html to verify if the js file is loaded. The test js file is like below:

<script>
    console.log("hello");
</script>

And the html code is like below:

html_code="""
<video width="512" height="512" controls>
  <source src='app/static/0d8ab0f2dd299738aefd8add0caf2824.mp4' type="video/mp4">
Your browser does not support the video tag.
</video>
<script src="app/static/test.js"></script>
"""
components.html(html_code, height=600)

The mp4 file can be correctly loaded via relative path, but I noticed the js file still does not work when I open console in chrome browser.
Moreover, I also tried st.markdown but it not work for me.

4

I gave up loading js files from the src attribute, instead of I simply copied the code in js file put it between script tag in html_code, then used streamlit.components.v1.html to render the html code and it finally worked.

1 Like