Google Cast uygulamasına standart medya denetimleri nasıl eklenir?

JavaScript (Krom) SDK kullanılarak WebTorrent kullanarak Google Cast özel alıcı uygulaması (https://webtorrent.io, https://github.com/feross/webtorrent) ve Google Cast gönderen uygulaması geliştiriyorum.Google Cast uygulamasına standart medya denetimleri nasıl eklenir?

Uygulamamda fikri Google Cast alıcıya Google Cast göndericiden ( https://webtorrent.io/torrents/sintel.torrent gibi * .torrent dosyasına magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d veya HTTP/HTTPS URL gibi mıknatıs URI) sel id göndermeyi ve görüntülemek için Google Cast alıcısı içinde WebTorrent kullanıyor

torrentden gelen medya (video veya ses).

Torrent kimliğinin medya dosyasına doğrudan bir URL olmadığını unutmayın.

Artık torrent kimliğini göndermek ve almak için Google Cast ad alanını ve messageBus'u kullanıyorum. https://webtorrent.io/docs#-file-renderto-elem-function-callback-err-elem- : Doğrudan verilen elemanın (veya CSS seçicisi) file.renderTo kullanarak içine https://webtorrent.io/docs#-file-appendto-rootelem-function-callback-err-elem-

işlemek: file.appendTo kullanarak

DOM ekler:

WebTorrent API medya görüntülemek için 2 yol sunar

<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>

: İşte

benim alıcısının kodudur

<!-- 
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>

sorun:

İşte benim göndericinin kodudur beklendiği gibi alıcı gönderici ve video oyunlarından torrent id işler. Ancak resmi Google Cast uygulaması veya Chrome için resmi Google Cast uzantısı, videoyu duraklatmak, durdurmak, aramak vb. Için oynatmak için standart medya denetimlerini göstermez.

Sahip olduğum şey (bu standart yerleşik ekran görüntüsüdür) Google Chrome'un son sürümünü Google Cast) için kalıcı iletişim:

Bu benim ulaşmak istediğim şey (bu son sürümünde Google Cast dahili standart kalıcı iletişim bir ekran görüntüsü Google Chrome):

yardımcı olmazsa

<video autoplay id='media' />

elemanı için

window.mediaElement = document.getElementById('media'); 
window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);

ekleme.

tüm gönderenler üzerinde <video autoplay id='media' /> için standart medya denetimler eklemek için gönderen ve/veya alıcıya bir şeyler eklemek gerekir?

Belki Google Cast ad ve messageBus kullanmadan sel id göndermek ve almak için başka bir yol var mı? Benim sorunun kök buldum gibi

UPD

görünüyor ...

Alıcıda varolan oynatma videosu için varsayılan ortam denetimleri nasıl etkinleştirilir?

Örneğin, alıcı uygulaması zaten oynarken video var:

<video autoplay id='media' 
src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' 
/>

varsayılan medya denetimlerini etkinleştirmek için nasıl

- Çalışma düğmeleri "Play/Pause", için resmi Google Cast uzantısı gibi tüm gönderenler üzerinde çalışan ilerleme çubuğunu (Bu oynatılan video için Chrome)

<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: Burada

window.mediaElement = document.getElementById('media'); window.mediaManager = new cast.receiver.MediaManager(window.mediaElement); window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); window.castReceiverManager.start();

alıcısının tam kaynak kodu:

yardımcı olmaz aşağıdaki kodu ekleyerek Görünüşe o mümkün gibi

görünüyor chrome.cast.media.MediaInfo'da medya URL'si yerine herhangi bir metin dizesi (benim durumumdaki torrent kimliği) kullanın ve kullanmak yerine medya ad alanını kullanın özel ad alanı ve özel mesaj yolu (ör.

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); 
}

Ama nasıl bu durumda alıcının üzerine idare: https://developers.google.com/cast/docs/reference/receiver/cast.receiver.CastReceiverManager#getCastMessageBus ve https://developers.google.com/cast/docs/reference/receiver/cast.receiver.CastMessageBus ve https://developers.google.com/cast/docs/reference/chrome/chrome.cast.Session#sendMessage) kullanmadan?

kaynak

2016-04-26 Fluorescent Hallucinogen

Gerçekte, gönderen uygulamasının en üst düzey bir Yayınlama düğmesi sağlaması gerektiğini bildiren mevcut bir Google Cast UX Yönergeleri vardır. MediaRouter Yayınla düğmesini kullanarak android.support.v7.app.MediaRouteActionProvider

: Tam MediaRouter İşlem Çubuğu sağlayıcısı kullanma Android Sender App Development

tartışıldı bir Yayınla düğmesine desteklemek için üç yolu vardır android.support .v7.app.MediaRouteButton
MediaRouter API ve MediaRouter.Callback ile özel bir UI Geliştirme

standart medya con göstermek için Medya oynatıldıktan sonra trol uygulaması gönderen uygulama, RemoteMediaPlayer örneğini kullanarak medya oynatmayı kontrol edebilir. Adımlar ve örnekler dokümanlarda bulunabilir.

Google Cast Android SDK'sındaki tüm sınıfların, yöntemlerin ve etkinliklerin kapsamlı bir listesi için, bkz. Google Cast Android API Reference.

kaynak

2016-04-27 15:12:43 Teyam

Cevabınız için teşekkür ederiz, ancak bir Android göndericisi değil, bir JavaScript (Chrome) Google Cast göndereni (https://developers.google.com/cast/docs/chrome_sender) geliştirmekle ilgili bu soru. –

JavasScript yerine Android ile ilgili belgeleri göndermek için özür dilerim. Her neyse, postanızı düzenlediğiniz ve JavaScript’i etiketlediğiniz için teşekkür ederiz. :) – Teyam

Google Cast uygulamasına standart medya denetimleri nasıl eklenir?

cevap

İlgili konular