gtk2k.github.io/ss_sample.html at master · Roulyoung/gtk2k.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <video id="selfView" autoplay></video>
        <video id="remoteView" autoplay></video>
        <input id="btnStart" type="button" value="接続" />
        <script>
            // signalingChannelのインスタンスは拡張機能で生成
            //var signalingChannel = new SignalingChannel();

            const configuration = { iceServers: [{ url: 'stun:stun.example.org' }] };
            let pc;

            btnStart.onclick = () => {
                start(true);
            };

            function start(isCaller) {
                pc = new webkitRTCPeerConnection(configuration);
                pc.onicecandidate = (evt) => {
                    if(evt.candidate)
                        signalingChannel.send({ candidate: evt.candidate });
                };
                pc.onnegotiationneeded = () => {
                    pc.createOffer(localDescCreated, logError);
                };
                pc.onaddstream = (evt) => {
                    remoteView.src = URL.createObjectURL(evt.stream);
                };
                navigator.webkitGetUserMedia({ audio: false, video: true }, (stream) => {
                    if(isCaller) { // 呼び出し元の場合スクリーンキャプチャストリームを追加
                        // スクリーンキャプチャストリームのストリームIDを取得
                        chrome.runtime.sendMessage('djjnhdinbajmcmpffkpdjiiaegllppbk', { type: 'getSourceId' }, (res) => {
                            if(res.sourceId){
                                // スクリーンキャプチャのストリーム取得
                                navigator.webkitGetUserMedia(
                                    { audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: res.sourceId, maxWidth: 1920, maxHeight: 1080 } } },
                                    (ssStream) => {
                                        // カメラのメディアストリームにスクリーンキャプチャのVideoトラック追加
                                        stream.addTrack(ssStream.getVideoTracks()[0]);
                                        setStream(selfView, stream);
                                    },
                                    (err) => console.log('ssGetStrem error', err)
                                );
                            }
                        });
                    } else {
                        setStream(selfView, stream);
                    }
                }, logError);
            }

            function setStream(elm, stream) {
                elm.src = URL.createObjectURL(stream);
                pc.addStream(stream);
            }

            function localDescCreated(desc) {
                pc.setLocalDescription(desc, () => {
                    signalingChannel.send({ sdp: pc.localDescription });
                }, logError);
            }

            function logError(error) {
                console.log(error);
            }

            function signalingChannelCreated() {
                signalingChannel.onmessage = (msg) => {
                    if(!pc)
                        start();
                    if(msg.sdp)
                        pc.setRemoteDescription(new RTCSessionDescription(msg.sdp), () => {
                            if(pc.remoteDescription.type === 'offer')
                                pc.createAnswer(localDescCreated, logError);
                        }, logError);
                    if(msg.candidate)
                        pc.addIceCandidate(new RTCIceCandidate(msg.candidate), () => {}, logError);
                };
            }
        </script>
    </body>
</html>