Google Cast (Chromecast) browser SDK study notes (a)

Original Address :: https://blog.csdn.net/weixin_33699914/article/details/89290565

related articles

1, go-castv2, in Golang in, Chromecast achieve CASTV2 agreement ---- .zip https://download.csdn.net/download/weixin_38743481/11768608?utm_source=bbsseo

2, Node-castv2, a protocol implemented CASTV2 Chromecast ---- Node-castv2, one implementation CASTV2 protocol Chromecast

3, Chromecast open source alternatives ---- PiCAST.zip https://download.csdn.net/download/weixin_39841365/11374128

4、google cast demo----https://download.csdn.net/download/wb127/7470357

5、GoogleCast 简介----https://blog.csdn.net/weixin_34342578/article/details/92532009

6、Google Cast和ChromeCast----https://www.cnblogs.com/lijunamneg/p/8986008.html

7, Google Cast protocol analysis ---- https://download.csdn.net/download/amoikio/10578496

 

A few days ago because of a discount Jingdong, bought a Sony  SRS-X77  speakers, read the instructions says that it supports Google Cast, tried feeling pretty easy to use, so a little research with Google Cast SDK.

Chromecast, Google Cast silly you could not tell?

Google in 2013 launched a call Chromecast hardware, it runs a streamlined version of Chrome OS, the user can use the phone or computer (Chrome browser) to control its network or local playback of video, photos, etc. Google subsequently released applicable to iOS, Android and Chrome browser SDK. 2015, Google has released a Chromecast Audio, it does not have HDMI interface, you can only play audio. Google to use this technology Chromecast named Google Cast.

In other words, Chromecast is the name of Google's hardware products, Google Cast refers to the technology is set to play the media over a network, such as the corresponding Apple's AirPlay. In addition to Chromecast series hardware itself, Android TV also supports Google Cast as a receiver, in addition, Sony, LG and other manufacturers have created some Google Cast Ready audio system, of course, also includes I bought the Sony SRS-X series.

Google Cast roughly works

Send end app (sender app) using the SDK, will need to play the media is sent to Google's servers, the server notifies the reception side player ( so the sender and receiver must have access to Google's servers for the job ). The receiving end are running a browser , it will be based app ID and media information of the sender, corresponding to load a web page , this page (receiver app) is also provided by the sender app developers , will be responsible for playing corresponding media content. Chromecast Audio and the like can only play audio hardware even when the receiving end, this website also will be loaded and rendered.

The difference Google Cast and DLNA or Apple AirPlay place, one dependent on Google's servers, that must be connected to the Internet can only be used, if only a local area network is not enough. Second, the first two players receiving end of the receiving terminal itself provides, developers only need to provide content to play on it, but Google Cast is a need to provide your receiver app, so that the benefits developers can be highly customized ( For example, you can customize the UI, or join barrage, scrolling lyrics, music visualization like complex function), although Android is not the receiving end often run open operating systems such as, but because of the nature of the receiver app is a web page, it is not difficult to develop high.

However, if you do not need to customize the receiver app, Google also provides a set of default receiver app, has the most basic functions of audio and video playback.

Of course, the above is only based on my understanding of Google documents summarized if there is something wrong, please point out.

Google Cast introduce some of the concepts of

• The sender (sender)
  can be a Chrome browser (desktop or Android version), Android devices, iOS devices.

• The sender app (sender app)
  using the Google Cast SDK's app, can be a web app (website) can also be Android or iOS app.

• The receiving end (Receiver)
  support hardware as a receiver, such as Chromecast, set-top boxes, speakers, television and the like.

• Receiving end app (receiver app)
  running on App receiving end, designated by the sender app ID decision, which essentially is a web browser on the receiving end to load and execute.

• session
  Sender First, keep a particular receiver to establish communication with each session. Establish session for the user is the "device pairing" process.

• media
  after the establishment of Session, Sender can use the session  loadMedia way to tell the receiver to play the media. If loadMedia success, Sender will receive a media object. This object reflects the media receiver app being played, which contains the play state, playback information queues.

Using the SDK to make a simple sender app

Here we follow the official course , with Chrome browser SDK (Javascript) to create a simple sender app. Because the registration app ID to pay five dollars so I'll just use the default receiver app.

Introduced SDK

The first step of course is to introduce the SDK page:

<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>

SDK uses chrome.castthis namespace.

initialization:

1. function onError(error) {

2. console.log(error);

3. }

4.  

5. function onInitSuccess() {

6. console.log('API successfully initialized');

7. }

8.  

9. function initializeCastApi() {

10. const appID = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;

11. const sessionRequest = new chrome.cast.SessionRequest(applicationID);

12. const apiConfig = new chrome.cast.ApiConfig(sessionRequest,

13. sessionListener,

14. receiverListener);

15. chrome.cast.initialize(apiConfig, onInitSuccess, onError);

16. };

17.  

18. window['__onGCastApiAvailable'] = function(loaded, errorInfo) {

19. if (loaded) {

20. console.log('API available');

21. initializeCastApi();

22. } else {

23. console.log(errorInfo);

24. }

25. }

We need to listen to __onGCastApiAvailablethis custom event to perform  initializeCastApi. initializeCastApi We need to know the app ID (if you use the default receiver app use  chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID this constant. sessionListener And receiverListener what is it? Below he said.

receiverListener When the state of the receiver is changed callback function triggered. Google Cast mDNS protocol is implemented using a device discovery, when the receiver has to be found or disappear, this function will be triggered think. For example, we define a such  receiverListener:

1. let receiverIsAvailable = false;

2. function receiverListener(receiverAvailability) {

3. console.log(`Receiver is ${receiverAvailability}`);

4. receiverIsAvailable = (receiverAvailability === chrome.cast.ReceiverAvailability.AVAILABLE);

5. }

At first I speaker is turned off, refresh the page, the console display:

Then I put the speakers turned on and connected to the network, then the console display:

Visible  receiverListener calls in real time, but this function does not know how many receivers, but do not know the specific information receivers - its only parameter is a string  unavailable or  available, with its  chrome.cast.ReceiverAvailability.AVAILABLE constant comparison to determine whether or not available.

sessionListener When the function is called when there is a session. When we first initialize the page has not been established session, so this function is not called, but if we have established a session, then refresh this page again, SDK will find existing session and call this function . In this function, we can store up session for later recall:

1. let currentSession = null;

2.  

3. function sessionListener(session) {

4. currentSession = session;

5. console.log('Current session updated');

6. }

Establish session (device pairing)

1. function onRequestSessionSuccess(session){

2. console.log(session);

3. currentSession = session;

4. console.log('Current session updated');

5. }

6.  

7. function requestSession(){

8. if(!currentSession){

9. chrome.cast.requestSession(onRequestSessionSuccess, onError);

10. }

11. }

Paired devices require a client take the initiative to perform, for example, we can put a button on the page, when the user presses on the implementation  requestSession. After the execution, we can see Chrome pop-up device list, this list is the Chrome browser itself provided:

I can see the speaker has been paired with Google Play Music, but we need to pair it with the current page, click on the name of the speaker, then click on the "projection", the speaker will be disconnected with Play Music and then establish a session with us this page.

If you build a successful session is called  onRequestSessionSuccess, the function told the front  sessionListener is about the same.

The session print out something like this:

Can see the session is determined by the receiver and sender app, and only we have established a session to get specific receiver (before we know whether the receiver avilable, I do not know what receiver), you can know the receiver can support audio or video. When we load the page again, because the same appId, so the initialization phase can trigger  sessionListener us then you can get session without the need to operate in a requestSession. Note that I have a speaker before the session but did not trigger my page before the Google Play Music now  sessionListener, because of the different appId.

Play Media

Now, with session, we can finally play the media a command receiver!

1. let currentMedia = null;

2.  

3. function onMediaDiscovered(how, media) {

4. currentMedia = media;

5. }

6.  

7. function loadMedia(){

8. const mediaInfo = new chrome.cast.media.MediaInfo('http://example.com/example.mp3');

9. const request = new chrome.cast.media.LoadRequest(mediaInfo);

10. session.loadMedia(request,

11. onMediaDiscovered.bind(this, 'loadMedia'),

12. onError);

13. }

Implementation of End  loadMedia Soon, should be able to hear the speakers sound a ✌️.

media object returned can be used to control playback:

1. currentMedia.pause();

2. currentMedia.play();

3. currentMedia.stop();