How to add live streaming into playcanvas?

Hi!, I want to add a video call live streaming to my playcanvas application. I already added some videos (recorded in mp4) in some objects inside the project. I’ve saw some examples in which it explains how to add a live streaming from an url to playcanvas but I still can not understand how it works.

To make things clear, I’ve to display the live streaming from an external url (dacast is an example, it could be other). In this case, I’ve added the js file of dacast inside playcanvas and I’m not able to resize the video and change the position.

Dacast js url file:
//player.dacast.com/js/player.js

Public project:
https://playcanvas.com/editor/scene/976175

Link examples of live video streaming:
https://developer.playcanvas.com/en/tutorials/video-textures/

In this example:
https://playcanvas.com/editor/code/698371?tabs=32466520,32466516,32466511

I do not understand well this part:


if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {

Hi @Axel_Saucedo,

The following part is responsible for opening a stream to a media device, this case a video camera:

if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {

From there you use the stream that is received as the source object of the video element. I haven’t worked with dacast in the past, but I imagine if you can similarly get access to their stream you can do the same.

The rest of the code should work with no issue.

1 Like