Zajmuję aplikację Google Cast zwyczaj odbiornika za pomocą WebTorrent (https://webtorrent.io, https://github.com/feross/webtorrent) oraz aplikację Google Cast nadawcy przy użyciu JavaScript (chrom) SDK.Jak dodać standardowe formanty multimediów do aplikacji Google Cast?
Pomysł mojej aplikacji jest wysyłanie torrent identyfikatora URI (magnes jak magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d lub HTTP/HTTPS URL do pliku * .torrent jak https://webtorrent.io/torrents/sintel.torrent) od nadawcy do odbiorcy Google Obsada Obsada Google i używając WebTorrent odbiornik Google Cast, aby wyświetlić media (wideo lub audio) z torrenta.
Zauważ, że torrent id nie jest bezpośredni adres URL do pliku multimedialnego.
Teraz używam nazw Google Cast i messagebus do wysyłania i odbierania potoku id.
WebTorrent API zawiera 2 sposoby wyświetlania nośnik:
- dołączania do DOM pomocą
file.appendTo: https://webtorrent.io/docs#-file-appendto-rootelem-function-callback-err-elem- - czynią bezpośrednio do danego elementu (lub selektora CSS) stosując
file.renderTo: https://webtorrent.io/docs#-file-renderto-elem-function-callback-err-elem-
Oto kod mojego odbiornika:
<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>
Oto kod mojego nadawcy:
<!--
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>
Problem: Odbiornik obsługuje torrent id od nadawcy i wideo spektakli, jak oczekiwano. Jednak oficjalna aplikacja Google Cast lub oficjalne rozszerzenie Google Cast w Chrome nie wyświetla standardowych elementów sterujących odtwarzaniem wideo, które umożliwiają wstrzymywanie, zatrzymywanie, wyszukiwanie itp.
To jest to, co mam (jest to zrzut ekranu z wbudowanym standardem modalne okno dialogowe dla Google Cast w najnowszej wersji Google Chrome):
jest to, co chcę osiągnąć (jest to zrzut ekranu z wbudowanego standardowego okna modalnego dla Google Cast w najnowszej wersji Google Chrome):
Dodawanie
window.mediaElement = document.getElementById('media');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
dla
<video autoplay id='media' />
elementu nie pomagają.
Czy mogę coś dodać do nadawcy i/lub odbiorcy, aby dodać standardowe kontrole medialne dla <video autoplay id='media' /> na wszystkich nadawców?
Może jest inny sposób, aby wysyłać i odbierać torrent id bez używania nazw Google Cast i messagebus?
UPD
Wygląda Znalazłem korzeń mojego problemu ...
Jak włączyć domyślne sterowanie multimediami dla istniejącego odtwarzanego wideo w odbiorniku?
Na przykład, aplikacja odbiornik już odtwarzanie wideo:
<video autoplay id='media'
src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
/>
Jak włączyć kontroli mediów domyślne - przyciski robocze „Play/Pauza”, pracując pasek postępu (na wszystkich nadawców, takich jak oficjalne rozszerzenie Google Cast dla Chrome) do tego odtwarzanego wideo?
Wygląda na to, dodając następujący kod nie pomaga:
window.mediaElement = document.getElementById('media');
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
window.castReceiverManager.start();
Oto kod źródłowy pełne odbiornika:
<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:
Wygląda na to, że możliwe jest użyj dowolnego ciągu tekstowego (identyfikator torrenta w moim przypadku) zamiast adresu URL multimediów pod numerem chrome.cast.media.MediaInfo i użyj przestrzeni nazw multimediów zamiast używać niestandardowa przestrzeń nazw i niestandardowa magistrala komunikatów (tj. bez użycia https://developers.google.com/cast/docs/reference/receiver/cast.receiver.CastReceiverManager#getCastMessageBus i https://developers.google.com/cast/docs/reference/receiver/cast.receiver.CastMessageBus i 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);
}
Ale jak poradzić na odbiorniku w tym przypadku?
Dziękuję za odpowiedź, ale to pytanie dotyczące tworzenia nadawcy Google Cast (JavaScript) (https://developers.google.com/cast/docs/chrome_sender), a nie nadawcy Androida. –
Przeprosiny za wysyłanie dokumentów związanych z systemem Android zamiast JavaScript. W każdym razie, dziękuję za edytowanie posta i tagowanie JavaScript. :) – Teyam