Create 2 new session in one Start button click

Goji

New Member
Hi,
Can we create 2 new session in the same time (with one Start button click) for WebRTC as RTMP and Stream Recording? How should we handle the front end display as I would like to only display one stream video? Assuming I only want to record the video at the backend for storage purpose.
Thanks.
 

Max

Administrator
Staff member
Can we create 2 new session in the same time (with one Start button click) for WebRTC as RTMP and Stream Recording?
Do you mean two streams from two different web cams?
You can check the Media Devices example:
https://wcs5-eu.flashphoner.com/demo2/media-devices
You can select a web cam device in the Send Video block.
This block is filled out using this code:
https://github.com/flashphoner/flas...treaming/media_devices_manager/manager.js#L40
Code:
Flashphoner.getMediaDevices(null, true).then(function (list) {
        list.audio.forEach(function (device) {
            var audio = document.getElementById("audioInput");
            var i;
            var deviceInList = false;
            for (i = 0; i < audio.options.length; i++) {
                if (audio.options[i].value == device.id) {
                    deviceInList = true;
                    break;
                }
            }
...
}
You can set particular device using this code:
https://github.com/flashphoner/flas...reaming/media_devices_manager/manager.js#L214
Code:
constraints.video = {
            deviceId: $('#videoInput').val(),
            width: parseInt($('#sendWidth').val()),
            height: parseInt($('#sendHeight').val())
        };
Therefore you can send two different streams to the server
Code:
session.createStream({name:'stream1', constraints:{audio: true, video:{deviceId:'camera1'}}}).publish();
session.createStream({name:'stream2', constraints:{audio: true, video:{deviceId:'camera2'}}}).publish();
So you have to pass deviceId - id of camera to get this working.
You can get the list of cams from code:
Code:
var video = document.getElementById("videoInput");
for (i = 0; i < video.options.length; i++) {
...
 

Max

Administrator
Staff member
How should we handle the front end display as I would like to only display one stream video?
Let's say you have two div's:
Code:
<div id="display1"></div>
<div id="display2"></div>
And two streams
Code:
session.createStream({display: document.getElementById('display1'), name:'stream1', constraints:{audio: true, video:{deviceId:'camera1'}}}).publish();
session.createStream({display: document.getElementById('display2'), name:'stream2', constraints:{audio: true, video:{deviceId:'camera2'}}}).publish();
If you want to see one display only, you can hide second display like this
Code:
<div id="display2" style="visibility:hidden"></div>
 

Max

Administrator
Staff member
Assuming I only want to record the video at the backend for storage purpose.
If you want to record, you pass parameter record: true
Code:
session.createStream({record: true, display: document.getElementById('display1'), name:'stream1', constraints:{audio: true, video:{deviceId:'camera1'}}}).publish();
session.createStream({record: true, display: document.getElementById('display2'), name:'stream2', constraints:{audio: true, video:{deviceId:'camera2'}}}).publish();
Two files will be recorded. One file per stream.
 
Top