Question

我正在尝试编写一个能够将图像投射到chromecast的javascript文件。 html页面上会有多个按钮。根据用户点击的按钮，网址将被发送到chromecast。我有一个名为videoNames.json的JSON文件中存储的文件的名称，我将其循环以获取名称。目前要渲染的所有文件都是图像。当我运行代码时，屏幕保持空白，没有按钮显示。这是我的代码：

<!doctype html>

<html>
<head>  
    <title>Casting</title>
    <script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

    <body>

        <SCRIPT language= "Javascript">

            var session = null;

            $( document ).ready(function(){
                    var loadCastInterval = setInterval(function(){
                            if (chrome.cast.isAvailable) {
                                    console.log('Cast has loaded.');
                                    clearInterval(loadCastInterval);
                                    initializeCastApi();
                            } else {
                                    console.log('Unavailable');
                            }
                    }, 1000);
            });

            function initializeCastApi() {
                    var applicationID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
                    var sessionRequest = new chrome.cast.SessionRequest(applicationID);
                    var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
                            sessionListener,
                            receiverListener);
                    chrome.cast.initialize(apiConfig, onInitSuccess, onInitError);
            };

            function sessionListener(e) {
                    session = e;
                    console.log('New session');
                    if (session.media.length != 0) {
                            console.log('Found ' + session.media.length + ' sessions.');
                    }
            }

            function receiverListener(e) {
                    if( e === 'available' ) {
                            console.log("Chromecast was found on the network.");
                    }
                    else {
                            console.log("There are no Chromecasts available.");
                    }
            }

            function onInitSuccess() {
                    console.log("Initialization succeeded");
            }

            function onInitError() {
                    console.log("Initialization failed");
            }

            function getArray(){
                return $.getJSON('./videoNames.json');
            }

            getArray().done( function(json) {
                //console.log(json); // show the json data in console
                //var len = json.length;
                var fixture;


                //loop through json and match today's date with match-date
                for (var i in json) {
                    fixture = json[i];
                    document.write(fixture.name);
                    var butt = document.createElement("button");
                    var text = document.createTextNode("Click to cast");
                    butt.appendChild(text);

                    butt.id = i;
                    var nameArray[i] = fixture.name; 

                    document.body.appendChild(butt);
                }

            });

            $(#i).click(function(nameArray[i]){
                launchApp(nameArray[i]);
            });

            function getFileNameExtension(filename){
                return filename.split('.').pop();         
            }

            function launchApp(nameArray[i]) {
                    console.log("Launching the Chromecast App...");
                    chrome.cast.requestSession(onRequestSessionSuccess(nameArray[i]), onLaunchError);
            }

            function onRequestSessionSuccess(e) {
                    console.log("Successfully created session: " + e.sessionId);
                    session = e;
            }

            function onLaunchError() {
                    console.log("Error connecting to the Chromecast.");
            }

            function onRequestSessionSuccess(e, nameArray[i]) {
                    console.log("Successfully created session: " + e.sessionId);
                    session = e;
                    loadMedia(nameArray[i]);
            }

            function loadMedia(nameArray[i]) {
                    if (!session) {
                            console.log("No session.");
                            return;
                    }

                    var mediaInfo = new
            chrome.cast.media.MediaInfo('http://52.60.153.189/video_files/' + nameArray[i]);
                    mediaInfo.contentType = 'image/' + getFileNameExtension(nameArray[i]);

                    var request = new chrome.cast.media.LoadRequest(mediaInfo);
                    request.autoplay = true;

                    session.loadMedia(request, onLoadSuccess, onLoadError);
            }

            function onLoadSuccess() {
                    console.log('Successfully loaded image.');
            }

            function onLoadError() {
                    console.log('Failed to load image.');
            }

            $('#stop').click(function(){
                    stopApp();
            });

            function stopApp() {
                    session.stop(onStopAppSuccess, onStopAppError);
            }

            function onStopAppSuccess() {
                    console.log('Successfully stopped app.');
            }

            function onStopAppError() {
                    console.log('Error stopping app.');
            }

        </SCRIPT>
    </body>

</html>

感谢任何帮助。谢谢！

Chromecast网络应用：使用js将多个网址发送到Chromecast

0 个答案: