質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

js でWeb会議アプリの画面共有機能を作成したい

reiuesugi
reiuesugi

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0回答

0評価

0クリップ

544閲覧

投稿2021/01/12 03:50

jsで画面共有の機能を実装しようとしています。
Video、Audioのmute,unmuteはできたのですが、画面共有だけできていません。
mute,unmute と同様にlocalStreamに値を入れてみたのですが、remoteのStreamに反映されません。

以下、ソースコードです。

javascript

const Peer = window.Peer; (async function main() { const localVideo = document.getElementById('js-local-stream'); const joinTrigger = document.getElementById('js-join-trigger'); const leaveTrigger = document.getElementById('js-leave-trigger'); const remoteVideos = document.getElementById('js-remote-streams'); const roomId = document.getElementById('js-room-id'); const roomMode = document.getElementById('js-room-mode'); const localText = document.getElementById('js-local-text'); const sendTrigger = document.getElementById('js-send-trigger'); const messages = document.getElementById('js-messages'); const meta = document.getElementById('js-meta'); const sdkSrc = document.querySelector('script[src*=skyway]'); const Audio = document.getElementById('Audio') const Video = document.getElementById('Video') const ScreenShare = document.getElementById('ScreenShare') meta.innerText = ` UA: ${navigator.userAgent} SDK: ${sdkSrc ? sdkSrc.src : 'unknown'} `.trim(); const getRoomModeByHash = () => (location.hash === '#sfu' ? 'sfu' : 'mesh'); roomMode.textContent = getRoomModeByHash(); window.addEventListener( 'hashchange', () => (roomMode.textContent = getRoomModeByHash()) ); const localStream = await navigator.mediaDevices .getUserMedia({ audio: true, video: true, }) .catch(console.error); // Render local stream localVideo.muted = true; localVideo.srcObject = localStream; localVideo.playsInline = true; await localVideo.play().catch(console.error); // eslint-disable-next-line require-atomic-updates const peer = (window.peer = new Peer({ key: window.__SKYWAY_KEY__, debug: 3, })); // Register join handler joinTrigger.addEventListener('click', () => { // Note that you need to ensure the peer has connected to signaling server // before using methods of peer instance. if (!peer.open) { return; } const room = peer.joinRoom(roomId.value, { mode: getRoomModeByHash(), stream: localStream, }); room.once('open', () => { messages.textContent += '=== You joined ===\n'; }); room.on('peerJoin', peerId => { messages.textContent += `=== ${peerId} joined ===\n`; }); // Render remote stream for new peer join in the room room.on('stream', async stream => { const newVideo = document.createElement('video'); newVideo.srcObject = stream; newVideo.playsInline = true; // mark peerId to find it later at peerLeave event newVideo.setAttribute('data-peer-id', stream.peerId); remoteVideos.append(newVideo); await newVideo.play().catch(console.error); }); room.on('data', ({ data, src }) => { // Show a message sent to the room and who sent messages.textContent += `${src}: ${data}\n`; }); // for closing room members room.on('peerLeave', peerId => { const remoteVideo = remoteVideos.querySelector( `[data-peer-id="${peerId}"]` ); remoteVideo.srcObject.getTracks().forEach(track => track.stop()); remoteVideo.srcObject = null; remoteVideo.remove(); messages.textContent += `=== ${peerId} left ===\n`; }); // for closing myself room.once('close', () => { sendTrigger.removeEventListener('click', onClickSend); messages.textContent += '== You left ===\n'; Array.from(remoteVideos.children).forEach(remoteVideo => { remoteVideo.srcObject.getTracks().forEach(track => track.stop()); remoteVideo.srcObject = null; remoteVideo.remove(); }); }); sendTrigger.addEventListener('click', onClickSend); leaveTrigger.addEventListener('click', () => room.close(), { once: true }); function onClickSend() { // Send message to all of the peers in the room via websocket room.send(localText.value); messages.textContent += `${peer.id}: ${localText.value}\n`; messages.scrollTop = messages.scrollHeight-messages.clientHeight; localText.value = ''; } //画面共有部分 ScreenShare.addEventListener('click',()=>{ const ssStream = navigator.mediaDevices.getDisplayMedia({video:{width: 1280,height:720,frameRate:60}, audio: false}).then( stream => { localVideo.srcObject = stream; localVideo.play(); localStream.getVideoTracks()[0] = stream;//映像をグローバル変数に }) Audio.addEventListener('click',()=>{ if(localStream.getAudioTracks()[0].enabled == true){ localStream.getAudioTracks()[0].enabled = false Audio.style.textDecoration = 'line-through' Audio.style.backgroundColor="red" }else{ localStream.getAudioTracks()[0].enabled = true Audio.style.textDecoration = 'none' Audio.style.backgroundColor="rgb(239,239,239)" } }) Video.addEventListener('click',()=>{ if(localStream.getVideoTracks()[0].enabled == true){ localStream.getVideoTracks()[0].enabled = false Video.style.textDecoration = 'line-through' Video.style.backgroundColor="red" }else{ localStream.getVideoTracks()[0].enabled = true Video.style.textDecoration = 'none' Video.style.backgroundColor="rgb(239,239,239)" } }) }); peer.on('error', console.error); })();

Skyway SDKを使用しているので、以下を参考にしています。
https://webrtc.ecl.ntt.com/api-reference/javascript.html#%E7%94%BB%E9%9D%A2%E5%85%B1%E6%9C%89

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。