Javascript Chromecast web app：使用js向Chromecast发送多个URL
我正在尝试编写一个javascript文件，它能够将图像投射到chromecast上。一个html页面上将有多个按钮。根据用户单击的按钮，将向chromecast发送url。我将文件名存储在一个名为videoNames.JSON的JSON文件中，我循环该文件以获取名称。目前，所有要浇铸的文件都是图像。当我运行代码时，屏幕保持空白，没有按钮显示。这是我的密码：Javascript Chromecast web app：使用js向Chromecast发送多个URL,javascript,html,json,chromecast,Javascript,Html,Json,Chromecast,我正在尝试编写一个javascript文件，它能够将图像投射到chromecast上。一个html页面上将有多个按钮。根据用户单击的按钮，将向chromecast发送url。我将文件名存储在一个名为videoNames.JSON的JSON文件中，我循环该文件以获取名称。目前，所有要浇铸的文件都是图像。当我运行代码时，屏幕保持空白，没有按钮显示。这是我的密码： <!doctype html> <html> <head> <title>C
<!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>
铸造
var session=null；
$（文档）.ready（函数（）{
var loadCastInterval=setInterval（函数（）{
if（铬铸件可用）{
console.log（'Cast已加载'）；
clearInterval（loadCastInterval）；
初始化castapi（）；
}否则{
console.log（'Unavailable'）；
}
}, 1000);
});
函数初始化为castapi（）{
var applicationID=chrome.cast.media.DEFAULT\u media\u RECEIVER\u APP\u ID；
var sessionRequest=new chrome.cast.sessionRequest（applicationID）；
var apiConfig=new chrome.cast.apiConfig（sessionRequest，
会话侦听器，
接管人）；
初始化（apiConfig、onInitSuccess、onInitError）；
};
函数sessionListener（e）{
会话=e；
console.log（“新会话”）；
如果（session.media.length！=0）{
log（'Found'+session.media.length+'sessions'）；
}
}
函数receiverListener（e）{
如果（e==‘可用’）{
log（“Chromecast是在网络上找到的。”）；
}
否则{
log（“没有可用的Chromecast”）；
}
}
函数onInitSuccess（）{
log（“初始化成功”）；
}
函数onInitError（）{
console.log（“初始化失败”）；
}
函数getArray（）{
返回$.getJSON（'./videoNames.json'）；
}
getArray（）.done（函数（json）{
//log（json）；//在控制台中显示json数据
//var len=json.length；
var固定装置；
//循环使用json并将今天的日期与匹配日期匹配
for（json中的var i）{
fixture=json[i]；
文件.书写（夹具.名称）；
var butt=document.createElement（“按钮”）；
var text=document.createTextNode（“单击以强制转换”）；
对子对象（文本）；
butt.id=i；
var nameArray[i]=fixture.name；
文件.正文.附件（对接）；
}
});
$（#i）.单击（函数（名称数组[i]）{
launchApp（名称数组[i]）；
});
函数getFileNameExtension（文件名）{
返回filename.split（'.'）.pop（）；
}
函数launchApp（名称数组[i]）{
log（“启动Chromecast应用程序…”）；
请求会话（onRequestSessionSuccess（nameArray[i]），onLaunchError）；
}
函数onRequestSessionSuccess（e）{
log（“成功创建会话：+e.sessionId”）；
会话=e；
}
函数onLaunchError（）{
日志（“连接到Chromecast时出错”）；
}
函数onRequestSessionSuccess（e，nameArray[i]）{
log（“成功创建会话：+e.sessionId”）；
会话=e；
loadMedia（名称数组[i]）；
}
函数loadMedia（名称数组[i]）{
如果（！会话）{
log（“无会话”）；
返回；
}
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；
loadMedia（请求、onLoadSuccess、onLoadError）；
}
函数onLoadSuccess（）{
log（'已成功加载映像'）；
}
函数onLoadError（）{
console.log（'加载映像失败'）；
}
$（'#停止'）。单击（函数（）{
stopApp（）；
});
函数stopApp（）{
会话停止（onstoppsuccess，onstopperror）；
}
函数onStopAppSuccess（）{
log（'已成功停止应用程序'）；
}
函数onStopAppError（）{
log（'停止应用程序时出错'）；
}
感谢您的帮助。谢谢 我在HTML中看不到任何按钮？在我循环json文件的for循环中，我使用document.createElement（“按钮”）创建了与文件数量相同的按钮。现在请尝试删除循环。你能让一个按钮出现吗？