fernandoc1/link_viewer.html

## link_viewer.html

<html style="height:100%; margin:0;">
<body style="height:100%; margin:0;">
<video style="height:100%;" id="streamVideo" autoplay playsinline controls muted/>
</body>
</html>

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.585.0.min.js"></script>
<script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script>

<script>

function getRandomClientId() {
    return Math.random()
        .toString(36)
        .substring(2)
        .toUpperCase();
}

start();

async function start()
{
    const region = 'us-west-2';
    const clientId = getRandomClientId();
    const accessKeyId = "-------------";
    const secretAccessKey = "---------------";

    const kinesisVideoClient = new AWS.KinesisVideo({
            region,
            accessKeyId,
            secretAccessKey,
            correctClockSkew: true,
    });

    const describeSignalingChannelResponse = await kinesisVideoClient.describeSignalingChannel({
        ChannelName: (new URLSearchParams(window.location.search)).get("uid"),
    }).promise();

    const channelARN = describeSignalingChannelResponse.ChannelInfo.ChannelARN;

    const getSignalingChannelEndpointResponse = await kinesisVideoClient.getSignalingChannelEndpoint(
    {
        ChannelARN: channelARN,
        SingleMasterChannelEndpointConfiguration: {
            Protocols: ['WSS', 'HTTPS'],
            Role: KVSWebRTC.Role.VIEWER,
        },
    }).promise();

    const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
        endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
        return endpoints;
    }, {});

    const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
        region,
        accessKeyId,
        secretAccessKey,
        endpoint: endpointsByProtocol.HTTPS,
        correctClockSkew: true,
    });

    const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient.getIceServerConfig({
        ChannelARN: channelARN,
    }).promise();

    const iceServers = [
        { urls: `stun:stun.kinesisvideo.${region}.amazonaws.com:443` }
    ];

    peerConnection = new RTCPeerConnection({ iceServers });

    const signalingClient = new KVSWebRTC.SignalingClient({
            channelARN,
            channelEndpoint: endpointsByProtocol.WSS,
            clientId,
            role: KVSWebRTC.Role.VIEWER,
            region,
            credentials: { accessKeyId, secretAccessKey },
            systemClockOffset: kinesisVideoClient.config.systemClockOffset,
    });

    signalingClient.on('open', async() => {
        const offer = peerConnection.createOffer({
            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await peerConnection.setLocalDescription(await offer);
        signalingClient.sendSdpOffer(peerConnection.localDescription);
        console.log("LocalOffer:", await offer);
    });

    signalingClient.on('sdpAnswer', async answer => {
        console.log(answer);
        await peerConnection.setRemoteDescription(answer);
    });

    signalingClient.on('iceCandidate', candidate => {
        console.log("signalingClient iceCandidate:", candidate);
        peerConnection.addIceCandidate(candidate);
    });

    signalingClient.on('error', error => {
        console.log("ERROR:", error);
    });

    peerConnection.addEventListener('icecandidate', ({candidate}) => {
        console.log('PeerConnection ICE Candidate', candidate);
        if(candidate)
        {
            signalingClient.sendIceCandidate(candidate);
        }
    });

    peerConnection.addEventListener('track', event => {
        console.log('Streams', event.streams);
        document.getElementById("streamVideo").srcObject = event.streams[0];
    });

    signalingClient.open();
}

</script>

	<html style="height:100%; margin:0;">
	<body style="height:100%; margin:0;">
	<video style="height:100%;" id="streamVideo" autoplay playsinline controls muted/>
	</body>
	</html>

	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.585.0.min.js"></script>
	<script src="https://unpkg.com/amazon-kinesis-video-streams-webrtc/dist/kvs-webrtc.min.js"></script>

	<script>

	function getRandomClientId() {
	return Math.random()
	.toString(36)
	.substring(2)
	.toUpperCase();
	}

	start();

	async function start()
	{
	const region = 'us-west-2';
	const clientId = getRandomClientId();
	const accessKeyId = "-------------";
	const secretAccessKey = "---------------";

	const kinesisVideoClient = new AWS.KinesisVideo({
	region,
	accessKeyId,
	secretAccessKey,
	correctClockSkew: true,
	});

	const describeSignalingChannelResponse = await kinesisVideoClient.describeSignalingChannel({
	ChannelName: (new URLSearchParams(window.location.search)).get("uid"),
	}).promise();

	const channelARN = describeSignalingChannelResponse.ChannelInfo.ChannelARN;

	const getSignalingChannelEndpointResponse = await kinesisVideoClient.getSignalingChannelEndpoint(
	{
	ChannelARN: channelARN,
	SingleMasterChannelEndpointConfiguration: {
	Protocols: ['WSS', 'HTTPS'],
	Role: KVSWebRTC.Role.VIEWER,
	},
	}).promise();

	const endpointsByProtocol = getSignalingChannelEndpointResponse.ResourceEndpointList.reduce((endpoints, endpoint) => {
	endpoints[endpoint.Protocol] = endpoint.ResourceEndpoint;
	return endpoints;
	}, {});

	const kinesisVideoSignalingChannelsClient = new AWS.KinesisVideoSignalingChannels({
	region,
	accessKeyId,
	secretAccessKey,
	endpoint: endpointsByProtocol.HTTPS,
	correctClockSkew: true,
	});

	const getIceServerConfigResponse = await kinesisVideoSignalingChannelsClient.getIceServerConfig({
	ChannelARN: channelARN,
	}).promise();

	const iceServers = [
	{ urls: `stun:stun.kinesisvideo.${region}.amazonaws.com:443` }
	];

	peerConnection = new RTCPeerConnection({ iceServers });

	const signalingClient = new KVSWebRTC.SignalingClient({
	channelARN,
	channelEndpoint: endpointsByProtocol.WSS,
	clientId,
	role: KVSWebRTC.Role.VIEWER,
	region,
	credentials: { accessKeyId, secretAccessKey },
	systemClockOffset: kinesisVideoClient.config.systemClockOffset,
	});

	signalingClient.on('open', async() => {
	const offer = peerConnection.createOffer({
	offerToReceiveAudio: true,
	offerToReceiveVideo: true
	});
	await peerConnection.setLocalDescription(await offer);
	signalingClient.sendSdpOffer(peerConnection.localDescription);
	console.log("LocalOffer:", await offer);
	});

	signalingClient.on('sdpAnswer', async answer => {
	console.log(answer);
	await peerConnection.setRemoteDescription(answer);
	});

	signalingClient.on('iceCandidate', candidate => {
	console.log("signalingClient iceCandidate:", candidate);
	peerConnection.addIceCandidate(candidate);
	});

	signalingClient.on('error', error => {
	console.log("ERROR:", error);
	});

	peerConnection.addEventListener('icecandidate', ({candidate}) => {
	console.log('PeerConnection ICE Candidate', candidate);
	if(candidate)
	{
	signalingClient.sendIceCandidate(candidate);
	}
	});

	peerConnection.addEventListener('track', event => {
	console.log('Streams', event.streams);
	document.getElementById("streamVideo").srcObject = event.streams[0];
	});

	signalingClient.open();
	}

	</script>