Sto sviluppando un'app ricevente personalizzata Google Cast utilizzando WebTorrent (https://webtorrent.io, https://github.com/feross/webtorrent) e l'app di invio Google Cast utilizzando l'SDK JavaScript (Chrome).Come aggiungere controlli multimediali standard all'app Google Cast?
L'idea della mia app è l'invio torrente id (magnete URI come magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d o HTTP/HTTPS URL di un file * .torrent come https://webtorrent.io/torrents/sintel.torrent) da Google Cast mittente al ricevente Google Cast, e l'utilizzo di WebTorrent ricevitore Google Cast per visualizzare i media (video o audio) dal torrent.
Si noti che l'ID del torrent non è un URL diretto del file multimediale.
Ora sto utilizzando lo spazio dei nomi Google Cast e messageBus per inviare e ricevere l'ID del torrent.
WebTorrent API fornisce 2 modi per visualizzare i media:
- aggiungerlo al DOM utilizzando
file.appendTo: https://webtorrent.io/docs#-file-appendto-rootelem-function-callback-err-elem- - renda direttamente nel dato elemento (o selettore CSS) utilizzando
file.renderTo: https://webtorrent.io/docs#-file-renderto-elem-function-callback-err-elem-
Ecco il codice del mio ricevitore:
<html>
<head>
<script src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
</head>
<body>
<video autoplay id='media' />
<script>
window.mediaElement = document.getElementById('media');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
window.messageBus = window.castReceiverManager.getCastMessageBus('urn:x-cast:com.google.cast.sample.helloworld');
window.messageBus.onMessage = function(event) {
displayVideo(event.data);
// Inform all senders on the CastMessageBus of the incoming message event
// sender message listener will be invoked
window.messageBus.send(event.senderId, event.data);
};
function displayVideo(torrentId) {
var client = new WebTorrent();
client.add(torrentId, function (torrent) {
var file = torrent.files[0];
file.renderTo('video');
});
}
window.castReceiverManager.start();
</script>
</body>
</html>
Ecco il codice della mia mittente:
<!--
Copyright (C) 2014 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<style type="text/css">
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
input {
font-family: "Arial", Arial, sans-serif;
font-size: 40px;
font-weight: bold;
}
.border {
border: 2px solid #cccccc;
border-radius: 5px;
}
.border:focus {
outline: none;
border-color: #8ecaed;
box-shadow: 0 0 5px #8ecaed;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<script type="text/javascript">
var applicationID = 'F5304A3D';
var namespace = 'urn:x-cast:com.google.cast.sample.helloworld';
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);
}
</script>
</head>
<body>
<table id="wrapper">
<tr>
<td>
<form method="get" action="JavaScript:update();">
<input id="input" class="border" type="text" size="30" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech/>
</form>
</td>
</tr>
</table>
<!-- Debbugging output -->
<div style="margin:10px; visibility:hidden;">
<textarea rows="20" cols="70" id="debugmessage">
</textarea>
</div>
<script type="text/javascript">
document.getElementById("input").focus();
</script>
</body>
</html>
Il problema: Il ricevitore gestisce torrente id dal mittente e video giochi come previsto. Ma l'app Google Cast ufficiale o l'estensione Google Cast ufficiale per Chrome non mostra i controlli multimediali standard per riprodurre i video per mettere in pausa, arrestare, cercare, ecc.
Questo è ciò che ho (questo è uno screenshot di built-in standard finestra di dialogo modale per Google Cast nella versione più recente di Google Chrome):
questo è ciò che voglio ottenere (questo è uno screenshot di standard di built-in finestra di dialogo modale per Google Cast nella versione più recente di Google Chrome):
Aggiunta
window.mediaElement = document.getElementById('media');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
per
<video autoplay id='media' />
elemento non aiutano.
Devo aggiungere qualcosa al mittente e/o al destinatario per aggiungere controlli multimediali standard per <video autoplay id='media' /> su tutti i mittenti?
Forse c'è un altro modo per inviare e ricevere id torrent senza utilizzare lo spazio dei nomi Google Cast e messageBus?
UPD
Sembra che ho trovato la radice del mio problema ...
Come abilitare i controlli multimediali predefiniti per la riproduzione video esistente nel ricevitore?
Ad esempio, l'applicazione ricevente ha già la riproduzione di video:
<video autoplay id='media'
src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
/>
Come abilitare controlli multimediali predefiniti - pulsanti di lavoro "Play/Pause", lavorando barra di avanzamento (su tutti i mittenti come estensione Google Cast ufficiale Chrome) per questo video?
Sembra che aggiungendo il seguente codice non aiuta:
window.mediaElement = document.getElementById('media');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
window.castReceiverManager.start();
Ecco il codice sorgente completo di ricevitore:
<html>
<head>
<script src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
</head>
<body>
<video autoplay id='media'
src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
/>
<script>
window.mediaElement = document.getElementById('media');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
window.castReceiverManager.start();
</script>
</body>
</html>
UPD2:
sembra che sia possibile utilizzare qualsiasi stringa di testo (l'ID del torrent nel mio caso) anziché l'URL del supporto in chrome.cast.media.MediaInfo e utilizzare lo spazio dei nomi del supporto anziché utilizzare spazio dei nomi personalizzato e bus dei messaggi personalizzati (ad es. senza l'utilizzo di https://developers.google.com/cast/docs/reference/receiver/cast.receiver.CastReceiverManager#getCastMessageBus e https://developers.google.com/cast/docs/reference/receiver/cast.receiver.CastMessageBus e https://developers.google.com/cast/docs/reference/chrome/chrome.cast.Session#sendMessage):
function cast() {
url = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d';
chrome.cast.requestSession(function(session) {
var mediaInfo = new chrome.cast.media.MediaInfo(url);
//mediaInfo.contentType = 'video/mp4';
//mediaInfo.contentType = 'audio/mpeg';
//mediaInfo.contentType = 'image/jpeg';
var request = new chrome.cast.media.LoadRequest(mediaInfo);
request.autoplay = true;
session.loadMedia(request, function() {}, onError);
}, onError);
}
Ma come gestire la cosa sul ricevitore in questo caso?
Grazie per la risposta, ma questa domanda sullo sviluppo di un mittente Google Cast JavaScript (Chrome) (https://developers.google.com/cast/docs/chrome_sender), non di un mittente Android. –
Ci scusiamo per l'invio di documenti relativi ad Android anziché a JavasScript. Ad ogni modo, grazie per aver modificato il tuo post e aver taggato JavaScript. :) – Teyam