# 2 stream in 1 session causing duplicate video for each stream

**URL:** <https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815>\
**Category:** Issues developing apps\
**Tags:** v2\
**Created:** [March 22, 2022, 3:37am UTC](https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815 "2022-03-22T03:37:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![asharifauzan](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/asharifauzan/32/1860_2.png) [@asharifauzan](https://openvidu.discourse.group/u/asharifauzan)\
**Post date:** [March 22, 2022, 3:37am UTC](https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815/1 "2022-03-22T03:37:17Z")

</div>

Hai, I am developing a recording app with openvidu. So it will open camera and screen to the same session and then record the session.

 ![Untitled](https://global.discourse-cdn.com/free1/uploads/openvidu/original/2X/d/dc7bc291f1de2b896676ea1a8c734b2df33cff42.png)

As you can see in the image above when desktop stream join the session it causes the event sessionCreated of webcam stream executed.

this is the result of the recording and this is what i expected (no duplicate for each stream)

below is my code

**client.js**

```auto
const start_btn = document.getElementById('start-record')
const stop_btn = document.getElementById('stop-record')
const token_webcam_btn = document.getElementById('token-webcam-btn')
const token_desktop_btn = document.getElementById('token-desktop-btn')

let OVWebcam = new OpenVidu()
let OVDesktop = new OpenVidu()
let sessionWebcam, sessionDesktop

let publisherWebcam, publisherDesktop

let forceRecordId

token_webcam_btn.onclick = ()=> {

  getToken(function() {

		console.log('get token callback webcam')

		sessionWebcam = OVWebcam.initSession();

		sessionWebcam.on('connectionCreated', event => {
			console.log('connectionCreated webcam')
		});

		sessionWebcam.on('streamCreated', event => {
			console.log('streamCreated webcam')

			const subscriberWebcam = sessionWebcam.subscribe(event.stream, 'video-container');

			subscriberWebcam.on('videoElementCreated', event => {
				console.log('videoElementCreated webcam')
			});

			subscriberWebcam.on('streamPlaying', event => {
				console.log('streamPlaying webcam')
			});
		});

		sessionWebcam.connect(token)
			.then(() => {
				console.log('connecting webcam')

				publisherWebcam = OVWebcam.initPublisher('video-container', {
					audioSource: undefined,
					videoSource: undefined,
					publishAudio: true,
					publishVideo: true,
					resolution: '640x480',
					frameRate: 30,
					insertMode: 'APPEND',
					mirror: false
				});

				publisherWebcam.on('streamCreated', event => {
					console.log('streamCreated webcam')
				});

				publisherWebcam.on('videoElementCreated', event => {
					console.log('videoElementCreated webcam')
				});

				publisherWebcam.on('streamPlaying', event => {
					console.log('streamPlaying webcam')
				});

				sessionWebcam.publish(publisherWebcam);

				// GET TOKEN DESKTOP TOO
				// token_desktop_btn.click()

			})
			.catch(error => {
				console.warn('There was an error connecting to the session:', error.code, error.message);
			});

		return false;
	}, 'test123');

}

token_desktop_btn.onclick = ()=> {

	getToken(function() {

		console.log('get token callback desktop')

		sessionDesktop = OVDesktop.initSession();

		sessionDesktop.on('connectionCreated', event => {
			console.log('connectionCreated desktop')
		});

		sessionDesktop.on('streamCreated', event => {
			console.log('streamCreated desktop')

			const subscriberDesktop = sessionDesktop.subscribe(event.stream, 'video-container');

			subscriberDesktop.on('videoElementCreated', event => {
				console.log('videoElementCreated desktop')
			});

			subscriberDesktop.on('videoElementDestroyed', event => {
				console.log('videoElementDestroyed desktop')
			});

			subscriberDesktop.on('streamPlaying', event => {
				console.log('streamPlaying desktop')
			});
		});

		sessionDesktop.connect(token)
			.then(() => {
				console.log('connecting desktop')

				publisherDesktop = OVDesktop.initPublisher('video-container2', {
					audioSource: undefined,
					videoSource: 'screen',
					publishAudio: true,
					publishVideo: true,
					resolution: '640x480',
					frameRate: 30,
					insertMode: 'APPEND',
					mirror: false
				});

				publisherDesktop.on('streamCreated', event => {
					console.log('streamCreated desktop')
				});

				publisherDesktop.on('videoElementCreated', event => {
					console.log('videoElementCreated desktop')
				});

				publisherDesktop.on('streamPlaying', event => {
					console.log('streamPlaying desktop')
				});

				sessionDesktop.publish(publisherDesktop);
			})
			.catch(error => {
				console.warn('There was an error connecting to the session:', error.code, error.message);
			});

		return false;
	}, 'test123');

}

start_btn.onclick = ()=> {
	httpReq(
		'POST',
		'/api/recording/start',
		{
			session: sessionDesktop.sessionId
		},
		'start recording gone WRONG',
		res => {
			console.log(res)
			forceRecordId = res.id
		}
	)
}

stop_btn.onclick = ()=> {
	httpReq(
		'POST',
		'/api/recording/stop',
		{
			recording: forceRecordId
		},
		'stop recording gone WRONG',
		res => {
			console.log(res)
		}
	)
}

function getToken(callback, deviceToken) {
  const sessionName = deviceToken

  httpReq(
    'POST',
    '/api/get-token',
    {
      sessionName: sessionName
    },
    'REQUEST GONE WRONG',
    res=> {
      token = res[0]
      console.log('token geted ', token)
      callback(token)
    }
  )
}

function httpReq(method, URL, body, errorMsg, callback) {
  const config = {
    method,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  }
  fetch(URL, config)
  .then(res=> res.json() )
	.then(data=> callback(data))
  .catch(err=> console.error({ error: err, errorMsg }))
}

```

thx anyway for the help

---

<div class="post-metadata">

**Author:** ![pabloFuente](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/pablofuente/32/2536_2.png) [@pabloFuente](https://openvidu.discourse.group/u/pabloFuente)\
**Post date:** [March 22, 2022, 11:32am UTC](https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815/2 "2022-03-22T11:32:45Z")

</div>

What exactly is happening that you don’t want to happen?

---

<div class="post-metadata">

**Author:** ![asharifauzan](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/asharifauzan/32/1860_2.png) [@asharifauzan](https://openvidu.discourse.group/u/asharifauzan)\
**Post date:** [March 23, 2022, 3:01am UTC](https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815/3 "2022-03-23T03:01:52Z")

</div>

what happened to me is, the client rendering 2 video for each stream. It should be 1 video for each stream.

here is the view:

 ![image](https://global.discourse-cdn.com/free1/uploads/openvidu/original/2X/6/6cc105eba75c350fdf4e4e9ea80b58f1460616ee.jpeg)

---

<div class="post-metadata">

**Author:** ![asharifauzan](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/asharifauzan/32/1860_2.png) [@asharifauzan](https://openvidu.discourse.group/u/asharifauzan)\
**Post date:** [March 23, 2022, 3:12am UTC](https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815/4 "2022-03-23T03:12:12Z")

</div>

here is the recording result:

 ![image](https://global.discourse-cdn.com/free1/uploads/openvidu/original/2X/6/680fb69446323bea4266d091dceb5ea57e4a9558.jpeg)

I think the error is occurs in client-side which is it rendering 2 video for each stream instead of only 1.

---

<div class="post-metadata">

**Author:** ![pabloFuente](https://yyz2.discourse-cdn.com/free1/user_avatar/openvidu.discourse.group/pablofuente/32/2536_2.png) [@pabloFuente](https://openvidu.discourse.group/u/pabloFuente)\
**Post date:** [March 23, 2022, 10:23am UTC](https://openvidu.discourse.group/t/2-stream-in-1-session-causing-duplicate-video-for-each-stream/3815/5 "2022-03-23T10:23:10Z")

</div>

There is really no error. You manage the client side the way you want. What I think is happening to you is that you are not discriminating the published video of each remote participant. You are publishing two different videos (webcam and screen) in the same browser tab with two different connections. You must be careful and NOT subscibe to the remote videos on `streamCreated` event, or **you will be receiving the remote video of the webcam (in the screen participant) and the remote video of the screen (in the webcam participant)**. Both participants are in reality the same final user, publishing from the same tab, so you don’t need to subscribe to the remote streams.