SkyWayを利用したビデオ通話で、カメラが解放できない

Question

SkyWayとFirebaseを利用したビデオ通話システム(SFU)を開発中です。

####やりたいこと
ページ遷移をしたときに、webカメラを解放したい

####起きていること/エラー
ページ遷移をしても、webカメラが使用中のまま
(skype等でビデオ通話ができない)

####コード

/* 省略 */
let localStream = null;

peer.on('open', function(id) {
	// set peerId
	peerId = id;

	// DB: handle disconnections
	disconnectionHandler(peerId, user);

	navigator.mediaDevices
	.getUserMedia({
		audio: false,
		video: {width: 1, height: 1}
	}).then(function(stream) {
		localStream = stream;
		// SW: join room
		room = peer.joinRoom(roomId, {mode: 'sfu', stream: localStream});
		// start roomHandler
		roomHandler(room, user);
	}).then(() => {
		// automatically add users from BR
		return breakUsersHandler(user, peerId, room);
	}).catch((error) => {
		if (error.name) {
			initMediaErrorHandler(error.name, peerId, user);
		}
		console.log(error);
	});
})

/* 省略 */

$(window).on('beforeunload', function() {
	// free camera
	console.log(localStream);
	var tracks = localStream.getTracks();
	tracks.forEach(function(track) {
		track.stop();
	});
	console.log(localStream);
}

####確認したこと

• beforeunloadの処理内で、最後にlocalStream.activeはfalseになっている
• ページ遷移後、webカメラの明かりは消えている

よろしくお願いします。

Answer 1

tracks.forEach(function(track) {
    track.stop();
});
localStream=null;

このように、localStream=null;を追加するとどうでしょうか?

[追記]
localStream=null;の後で、

document.getElementById('video').pause();
document.getElementById('video').srcObject=null;

このように、video要素とstreamの紐付けを解除してあげるとどうでしょうか?
getElementById のID名は実際のものと置き換えてください。

Comments

[olee46]

いただいた回答でも解放されていないようで、相変わらずSkypeを開いても「カメラがWebアプリケーションで使用中です」と表示されます。
コンソールではたしかにlocalStreamはnullになっているのですが…

[sublimer]

お使いのブラウザはChromeでしょうか?
回答を修正しましたので、ご確認ください。

[olee46]

Chromeです。
解決しました、ありがとうございます！

[sublimer]

解決してよかったです!