jchang419 · February 23, 2018 23:56
diff --git a/cycleCamera b/cycleCamera
 <!DOCTYPE html>
 <html>

 <head>
    <title></title>
 </head>

 <body>
    <select id="selectCamera"></select>
    <select id="selectMic"></select>
    <div id="publisher"></div>
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script type="text/javascript">
    // replace these values with those generated in your TokBox Account
    var apiKey = "";
    var sessionId = "";
    var token = "";

    var session;
    var pickedVideoDevice;
    var pickedAudioDevice;
    var publisher;
    var selectCameraTag = document.getElementById("selectCamera");
    var selectMicTag = document.getElementById("selectMic");

    initializeSession();

    var handleError = (err) => { console.log(err); }

    function initializeSession() {

        // get available devices and create device list
        OT.getDevices(function(error, devices) {
            let videoInputDevices = devices.filter(function(device) {
                return device.kind == "videoInput";
            });
            let audioInputDevices = devices.filter(function(device) {
                return device.kind == "audioInput";
            });

            for (i = 0; i < videoInputDevices.length; i++) {
                let option = document.createElement("option");

                if (pickedVideoDevice == null) {
                    pickedVideoDevice = videoInputDevices[i].deviceId;
                    option.setAttribute("selected", "selected");
                }

                option.setAttribute("value", videoInputDevices[i].deviceId);
                option.innerHTML = videoInputDevices[i].label;
                selectCameraTag.appendChild(option);
            }

            for (var i = 0; i < audioInputDevices.length; i++) {
                let option = document.createElement("option");

                if (pickedAudioDevice == null) {
                    pickedAudioDevice = audioInputDevices[i].deviceId;
                    option.setAttribute("selected", "selected");
                }

                option.setAttribute("value", audioInputDevices[i].deviceId);
                option.innerHTML = audioInputDevices[i].label;
                selectMicTag.appendChild(option);
            }

            let publisherOptions = {videoSource: pickedVideoDevice, audioSource: pickedAudioDevice};

            // Create a Publisher
            publisher = OT.initPublisher('publisher', publisherOptions, handleError);
        });

        session = OT.initSession(apiKey, sessionId);

        // Connect to the session
        session.connect(token, function(error) {
            // If the connection is successful, publish to the session
            if (error) {
                console.log(error);
            } else {
                session.publish(publisher, handleError);
            }
        });

    }

    //Change Camera on select
    selectCameraTag.addEventListener("change", (event) => {
        publisher.destroy();
        pickedVideoDevice = event.target.value;
        
        let newPublisher;
        let publisherOptions = {videoSource: pickedVideoDevice, audioSource: pickedAudioDevice};

        newPublisher = OT.initPublisher('publisher', publisherOptions, handleError);

        session.publish(newPublisher, handleError);

        publisher = newPublisher;
    });

    //Change Mic on select
    selectMicTag.addEventListener("change", (event) => {
        publisher.destroy();
 		pickedAudioDevice = event.target.value;

        let newPublisher;
 		let publisherOptions = {videoSource: pickedVideoDevice, audioSource: pickedAudioDevice};

        newPublisher = OT.initPublisher('publisher', publisherOptions, handleError);

        session.publish(newPublisher, handleError);

        publisher = newPublisher;
    });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title></title>
	</head>

	<body>
	<select id="selectCamera"></select>
	<select id="selectMic"></select>
	<div id="publisher"></div>
	<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
	<script type="text/javascript">
	// replace these values with those generated in your TokBox Account
	var apiKey = "";
	var sessionId = "";
	var token = "";

	var session;
	var pickedVideoDevice;
	var pickedAudioDevice;
	var publisher;
	var selectCameraTag = document.getElementById("selectCamera");
	var selectMicTag = document.getElementById("selectMic");

	initializeSession();

	var handleError = (err) => { console.log(err); }

	function initializeSession() {

	// get available devices and create device list
	OT.getDevices(function(error, devices) {
	let videoInputDevices = devices.filter(function(device) {
	return device.kind == "videoInput";
	});
	let audioInputDevices = devices.filter(function(device) {
	return device.kind == "audioInput";
	});

	for (i = 0; i < videoInputDevices.length; i++) {
	let option = document.createElement("option");

	if (pickedVideoDevice == null) {
	pickedVideoDevice = videoInputDevices[i].deviceId;
	option.setAttribute("selected", "selected");
	}

	option.setAttribute("value", videoInputDevices[i].deviceId);
	option.innerHTML = videoInputDevices[i].label;
	selectCameraTag.appendChild(option);
	}

	for (var i = 0; i < audioInputDevices.length; i++) {
	let option = document.createElement("option");

	if (pickedAudioDevice == null) {
	pickedAudioDevice = audioInputDevices[i].deviceId;
	option.setAttribute("selected", "selected");
	}

	option.setAttribute("value", audioInputDevices[i].deviceId);
	option.innerHTML = audioInputDevices[i].label;
	selectMicTag.appendChild(option);
	}

	let publisherOptions = {videoSource: pickedVideoDevice, audioSource: pickedAudioDevice};

	// Create a Publisher
	publisher = OT.initPublisher('publisher', publisherOptions, handleError);
	});

	session = OT.initSession(apiKey, sessionId);

	// Connect to the session
	session.connect(token, function(error) {
	// If the connection is successful, publish to the session
	if (error) {
	console.log(error);
	} else {
	session.publish(publisher, handleError);
	}
	});

	}

	//Change Camera on select
	selectCameraTag.addEventListener("change", (event) => {
	publisher.destroy();
	pickedVideoDevice = event.target.value;

	let newPublisher;
	let publisherOptions = {videoSource: pickedVideoDevice, audioSource: pickedAudioDevice};

	newPublisher = OT.initPublisher('publisher', publisherOptions, handleError);

	session.publish(newPublisher, handleError);

	publisher = newPublisher;
	});

	//Change Mic on select
	selectMicTag.addEventListener("change", (event) => {
	publisher.destroy();
	pickedAudioDevice = event.target.value;

	let newPublisher;
	let publisherOptions = {videoSource: pickedVideoDevice, audioSource: pickedAudioDevice};

	newPublisher = OT.initPublisher('publisher', publisherOptions, handleError);

	session.publish(newPublisher, handleError);

	publisher = newPublisher;
	});
	</script>
	</body>

	</html>