[英]stream only audio with controls to chromecast from html5 javascript
仅通过浏览器将带有控件的音频从 html5 javascript 传输到 chromecast。 我只需要使用我的电脑将音频流式传输到 googlechromecast。 我正在使用 chrome 浏览器。 我需要做的就是仅使用我的控件流式传输音频,甚至是我正在播放的歌曲的屏幕图像。 目前我无法做到这一点。
var applicationID = 'some id';
var namespace = 'some namespace';
var session = null;
/**
* Call initialization for Cast
*/
if (!chrome.cast || !chrome.cast.isAvailable) {
setTimeout(initializeCastApi, 1000);
}
/**
* initialization
*/
function initializeCastApi() {
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
sessionListener,
receiverListener);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
};
/**
* initialization success callback
*/
function onInitSuccess() {
appendMessage("onInitSuccess");
}
/**
* initialization error callback
*/
function onError(message) {
appendMessage("onError: "+JSON.stringify(message));
}
/**
* generic success callback
*/
function onSuccess(message) {
appendMessage("onSuccess: "+message);
}
/**
* callback on success for stopping app
*/
function onStopAppSuccess() {
appendMessage('onStopAppSuccess');
}
/**
* session listener during initialization
*/
function sessionListener(e) {
appendMessage('New session ID:' + e.sessionId);
session = e;
session.addUpdateListener(sessionUpdateListener);
session.addMessageListener(namespace, receiverMessage);
}
/**
* listener for session updates
*/
function sessionUpdateListener(isAlive) {
var message = isAlive ? 'Session Updated' : 'Session Removed';
message += ': ' + session.sessionId;
appendMessage(message);
if (!isAlive) {
session = null;
}
};
/**
* utility function to log messages from the receiver
* @param {string} namespace The namespace of the message
* @param {string} message A message string
*/
function receiverMessage(namespace, message) {
appendMessage("receiverMessage: "+namespace+", "+message);
};
/**
* receiver listener during initialization
*/
function receiverListener(e) {
if( e === 'available' ) {
appendMessage("receiver found");
}
else {
appendMessage("receiver list empty");
}
}
/**
* stop app/session
*/
function stopApp() {
session.stop(onStopAppSuccess, onError);
}
/**
* send a message to the receiver using the custom namespace
* receiver CastMessageBus message handler will be invoked
* @param {string} message A message string
*/
function sendMessage(message) {
if (session!=null) {
session.sendMessage(namespace, message, onSuccess.bind(this, "Message sent: " + message), onError);
}
else {
chrome.cast.requestSession(function(e) {
session = e;
session.sendMessage(namespace, message, onSuccess.bind(this, "Message sent: " + message), onError);
}, onError);
}
}
/**
* append message to debug message window
* @param {string} message A message string
*/
function appendMessage(message) {
console.log(message);
var dw = document.getElementById("debugmessage");
dw.innerHTML += '\n' + JSON.stringify(message);
};
/**
* utility function to handle text typed in by user in the input field
*/
function update() {
sendMessage(document.getElementById("input").value);
}
/**
* handler for the transcribed text from the speech input
* @param {string} words A transcibed speech string
*/
function transcribe(words) {
sendMessage(words);
}
请帮忙。 请让我知道是否有办法实现这一目标。
添加另一个我能够修改以满足我的需求的代码。 但问题是它只能连接。 选项卡显示已连接并正在播放,但我听不到来自 chromecast(电视)的音频。 请帮我解决有关音频流的问题。
'use strict';
var DEVICE_STATE = {
'IDLE' : 0,
'ACTIVE' : 1,
'WARNING' : 2,
'ERROR' : 3,
};
/**
* Constants of states for CastPlayer
**/
var PLAYER_STATE = {
'IDLE' : 'IDLE',
'LOADING' : 'LOADING',
'LOADED' : 'LOADED',
'PLAYING' : 'PLAYING',
'PAUSED' : 'PAUSED',
'STOPPED' : 'STOPPED',
'SEEKING' : 'SEEKING',
'ERROR' : 'ERROR'
};
var streamCaster = function(ele,url)
{
this.playUrl = url;
this.castPlayer =null;
this.receiverAvailable = null;
this.init(ele);
this.initCastPlayer();
console.log("Playing URL "+this.playUrl);
}
streamCaster.prototype.init = function(ele)
{
console.log("Init Player");
this.castPlayer = document.getElementById(ele);
this.castPlayer.addEventListener('loadeddata', this.onMediaLoadedLocally.bind(this));
}
streamCaster.prototype.onMediaLoadedLocally = function()
{
console.log("Playing Audio");
this.castPlayer.play();
};
streamCaster.prototype.initCastPlayer = function() {
console.log("Init Chrome-Cast");
if (!chrome.cast || !chrome.cast.isAvailable) {
console.log("No Support For Chrome Cast..Re Trying");
setTimeout(this.initCastPlayer.bind(this), 1000);
return;
}
var applicationID = 'Yr ID';
// auto join policy can be one of the following three
var autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;
//var autoJoinPolicy = chrome.cast.AutoJoinPolicy.PAGE_SCOPED;
//var autoJoinPolicy = chrome.cast.AutoJoinPolicy.TAB_AND_ORIGIN_SCOPED;
// request session
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
this.sessionListener.bind(this),
this.receiverListener.bind(this),
autoJoinPolicy);
chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.onError.bind(this));
}
streamCaster.prototype.onError = function() {
console.log("error");
};
streamCaster.prototype.onInitSuccess = function() {
console.log("init success");
this.startChromeCast();
};
streamCaster.prototype.sessionListener = function(e) {
this.session = e;
if( this.session )
{
if( this.session.media[0] )
{
this.onMediaDiscovered('activeSession', this.session.media[0]);
this.syncCurrentMedia(this.session.media[0].media.contentId);
this.selectMediaUpdateUI(this.currentMediaIndex);
}
else
{
this.loadMedia(this.currentMediaIndex);
}
this.session.addUpdateListener(this.sessionUpdateListener.bind(this));
}
}
streamCaster.prototype.loadMedia = function(mediaIndex) {
if (!this.session)
{
console.log("no session");
return;
}
//console.log("loading..." + this.mediaContents[mediaIndex]['title']);
var mediaInfo = new chrome.cast.media.MediaInfo(this.playUrl);
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
mediaInfo.contentType = 'audio/mp3';
mediaInfo.metadata.title = "Castlevania Symphony Of The Night";
// mediaInfo.metadata.images = [{'url': MEDIA_SOURCE_ROOT + this.mediaContents[mediaIndex]['thumb']}];
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.autoplay = this.autoplay;
request.currentTime = this.castPlayer.currentTime;
// this.castPlayer.pause();
// this.castPlayer = PLAYER_STATE.STOPPED;
//
//
// this.castPlayerState = PLAYER_STATE.LOADING;
this.session.loadMedia(request,
this.onMediaDiscovered.bind(this, 'loadMedia'),
this.onLoadMediaError.bind(this));
};
streamCaster.prototype.onMediaDiscovered = function(how, mediaSession) {
this.currentMediaDuration =-1;
this.currentMediaSession = mediaSession;
this.currentMediaSession.addUpdateListener(function()
{
console.log("binding");
});
};
streamCaster.prototype.onLoadMediaError = function(e) {
console.log("media error");
};
streamCaster.prototype.sessionUpdateListener = function(isAlive) {
if (!isAlive)
{
this.session = null;
this.deviceState = DEVICE_STATE.IDLE;
this.castPlayerState = PLAYER_STATE.IDLE;
this.currentMediaSession = null;
var online = navigator.onLine;
if( online == true )
{
// continue to play media locally
this.playMediaLocally();
}
}
};
streamCaster.prototype.playMediaLocally = function() {
this.castPlayer.load();
this.castPlayer.play();
};
streamCaster.prototype.receiverListener = function(e) {
if( e === 'available' ) {
this.receiverAvailable = true;
console.log("receiver found");
}
else {
console.log("receiver list empty");
}
}
streamCaster.prototype.startChromeCast = function() {
console.log("launching app...");
chrome.cast.requestSession(
this.sessionListener.bind(this),
this.onLaunchError.bind(this));
if( this.timer ) {
clearInterval(this.timer);
}
};
streamCaster.prototype.onLaunchError = function() {
console.log("launch error");
};
您似乎没有使用 Cast SDK 媒体频道向接收器发送媒体。 您只支持短信。 查看有关如何在 Cast 设备上播放媒体的参考 Chrome 发送器应用程序: https : //github.com/googlecast/CastVideos-chrome参考应用程序基于视频,但音频非常相似。
我已经围绕 chromecast SDK 创建了一个简单的 javascript 包装器:
https://github.com/fenny/castjs
var device = new Castjs()
device.on('available', function() {
cc.cast('https://example.com/music.mp3', {
poster: 'https://example.com/album.jpg',
title: 'Artist - Song',
description: 'Album'
})
})
这个包装器有更多的选择,你可以查看上面github链接上的文档
祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.