The Practice of the Class in the Virtual Classroom with the HTML Texture Screen (2)

The SAIBOKU series of kanae.net is the tools which can be annotate on your Desktop, the movies, and the photos.

By this article, I explain how to display the image of SAIBOKU Whiteboard which can annotate the movie and images on the http texture of Secondlife using Open Broadcaster Software and Youtube Live.



The Soft and web service to be used are as follows.

a) SAIBOKU Whiteboard 
 SAIBOKU is shareware.
 http://kanae.net/penworks/en/wbd.html
b) Open Broadcaster Software
 https://obsproject.com/
 I used OBS Classic 0.657.
c) Youtube Live
 The dashboard of Youtube is https://www.youtube.com/dashboard

The rough step is as follows.

1) Boot SAIBOKU Whiteboard and show the window which is streamed. And Open the Images which you want to annotate.
2) Make the events which exhibits the Streaming from Youtube Live. 
3) Set the streaming key to Open Broadcaster Software and start streaming.
4) Check the streaming status on Youtube Live and start streaming.
5) Set the URL of Youtube Live on the http texture on Secondlife.

Finally I explain the solution in case the Streaming of Youtube Live is not displayed on the http texture of Secondlife.

Then, Let's begin.

1) Boot SAIBOKU Whiteboard and show the window which is streamed. And Open the Images which you want to annotate.

Let's boot SAIBOKU Whiteboard and open the Subview window to be streamed.
Double click the SAIBOKU WhiteBoard.

Click the menu button in the lower-right of the main window. 

Click the "Sub View" button.

Then, the small windows is displayed. When you annotate the main window, this window is updated automatically.

Next, let's open the image to annotate.
Click the menu button in the lower-right of the main window.


Click the Open button.

The file-selection dialogue is displayed, choose the image to annotate.

Then, the image is displayed on the main window and the images in the same folder are enumerated on the right side.
If you click the thumbnail, the image of it will be shown on main window.
You can select the pen style on the bottom menus of the main window.

The plotimage of the main window is automatically reflected in the subView window.

If you right click the subview window, popup menu is shown.

You can set the client size of subview wiondow. Please select 640x360.

It was ready for streaming the image to annotate to the streaming service now. 

2) Make the events which exhibits the Streaming from Youtube Live. 

Let's log in to Youtube, and create the event for exhibiting the movie, and acquire the Streaming name. 

Log in to http://youtube.com/

As follows, click the icon of the accounts and click the "Creator Studio" button.

In order to exhibit the streaming, the accounts has the requirements. 

Please check following URL. https://support.google.com/youtube/answer/2474026

Choose Events of LIVE STREAMING of the left Menus and click the New Event button. 

Input Tile of Basic Info, the time, the instruction, and the tag. 

Set the exhibit type to Unlisted, set Type to Custom, and click Create Event. 

Set up Main Camera. 

Select Basic ingestion and select 400Kbps - 1000Kbps (360p), because it is the size 640x360 of the subViews windows of SAIBOKU Whiteboard used for the Streaming. 

Copy the string (values of the yellow area of the following image) of Streaming Name. 

Click the Save Changes button.

Now, it was ready for exhibiting the Streaming by Youtube Live.

3) Set the streaming key to Open Broadcaster Software and start streaming.

Double click the Open Broadcster Software Icon.

Choose Settings on the Settings Menu. 

Choose "Youtube/Youtube Gaming as Streaming Service" with the "Broadcast Settings" tab. 

Since red notes are displayed on this dialog when there is the setups which is not appropriate. Please follow the indication. 

Paste the string copied to Play Path/Stream Key by Youtube. 

Click the "OK" button and it closes the setups dialogue. 

Let's register the Subview window of SAIBOKU Whiteboard into the source of the Streaming. 

Right-click the Souces control and choose Add - Window Capture. 

Name Source. The default is "Window Capture". Click the OK button. 

Choose "640x360" as Window.  The name of the Subview window of SAIBOKU Whiteboard is the sizes. 

Check Inner Window and uncheck Capture mouse cursor. 

Let's confirm whether Source can be chosen correctly. 

Click the Preview Stream button. 

Then, the description of the Subview window of SAIBOKU Whiteboard was displayed on the upper portion of the windows. 

Click the Stop Preview button and suspend the preview. 

Let's transmit the Streaming to Youtube Live. 

Click the Start Streaming button. 

4) Check the streaming status on Youtube Live and start streaming.

Since the Streaming is transmitted from OBS, let's check by Youtube Live and exhibit the Streaming.
Display the events which you created at the previous step, and choose Live Control Room of the upper portion of the pages.

Check that STREAM STATUS is GOOD and click the Preview button. 

Wait until the setup is completed, and click the Start Streaming button. 

When you click the preview of Public, streamed image will be displayed.

Right-click the public preview then popup menu is displayed. Choose Copy Video URL on it.

Let's check whether copied URL is opened by the browser and the moving image is displayed. 

5) Set the URL of Youtube Live on the http texture on Secondlife.

Let's set copied URL as the http texture of Secondlife.

Build the new prim, and select it by right-click. Choose the Select Face of the edit window and select the face which you want to set as http texture. And Select the Texture tab and set it Media as followins.


Click the Choose button.

Uncheck all of Auto Zoom, Auto Play Media, and Auto Scale Media on Face of Object.

Paste URL copied from Youtube Live to Home Page , and click the Apply button. 

After the preview is reflected in the page, the texture will be reflected in the prim selected Face, when you click the Reset button and clicks the OK button. 

Adjust the indication position so that only the area of the moving image is displayed as follows. 

The http texture is displayed in the in-World as follows. 

The solution in case the Streaming of Youtube Live is not displayed on the http texture of Secondlife.

If you are going to show Youtube Live to http texture on the Secondlife Viewer4.0, it may be displayed as follows.

To check whether the internal Web browser of Secondlife Viewer can show the html5 player of Youtube Live, I browsed the following URL http://youtube.com/html5 on it.

You can find that the the internal Web browser can't show H.265 encoded movie.

You can see the same web page on Chrome as follows.

So, I find that I must install flash plugin toSecondlife Viewer. (Thank you Whirly Fizzle, for the information on BUG-10684 )

1) Access to http://get.adobe.com/flashplayer/otherversions/ by Chrome or FireFox Web Browser

2）Choose the correct operating system under Step 1.

3) Choose Flash Player 20 for Opera & Chromium - PPAPI under Step 2.

4) Install Flash.
5) Make sure that "Enable Plugins" is ticked under viewer Preferences -> Setup -> Enable Plugins.

6) You need to restart the viewer if logged in while installing Flash.

Then you can see the http texture on the Secondlife viewer.
If you can't see it. Please make a "URL Giver Box" at in-world.

And Insert the following LSL scripts.
--
default
{
    touch_start(integer total_number)
    {

        llLoadURL(llDetectedKey(0), "Youtube Live", "https://youtube.com/XXXXXXXX");
    }
}
--
You can see it your web browser.

This article is automatically translated by the computer interpreter.
Please notify me of any mistakes in translation.

The Practice of the Class in the Virtual Classroom with the HTML Texture Screen (1)

The Practice of the Class in the Virtual Classroom with the HTML Texture Screen

The Video using the content annotation tool is displayed on the virtual classroom using the real-time video streaming services service.

 The students’ chats are converted to the voice in order that the teacher can answer the students’ question quickly.

I developed these two types of content annotation tools for the virtual classroom, and a text-to-speech tool for Second Life chat.

 1) Two annotation tools:
 a) Desktop Annotation Tool – allows you to draw on the computer screen, captures what you do on it and streams it live.

 b) Whiteboard and Image Annotation Tool – allows you to draw on JPEG/PNG/BMP files on a tablet or with your mouse and live streams it through a projector.

 For details, please visit http://kanae.net/penworks/en/

The sample of the structure of HTML Texture Screen 

Using the above tools, the teacher can use the HTML texture of the virtual space as an electronic board (whiteboard). Since Japan adopted EPUB3.0 as a format for public electronic textbooks, I enabled it to show it. I am developing now. I have a plan to release it this summer.

2) Text to Speech Tool – converts IM, local chat and group chat in Second Life to voice; also works on Skype with group chat.

Please check the following videos to know how to use IDOBATA.

Please visit http://kanae.net/secondlife/idobata_en.html for details.

With the Text to Speech tool, the presenter can receive feedback from the audience appropriately, on voice. I did the technical enhancement to get faster response from last year to it, allowing for smoother dialogue between presenter and audience.

I teach classes using these tools at midnight JST every the Saturday at “Freedom City” in Second Life. The audience is mainly users of my tools. I talk about how to use my 3D tools and report to the user group within the Second Life. Since all of the audience is Japanese at Freedom City, I speak in Japanese.

This article is automatically translated by the computer interpreter.
Please notify me of any mistakes in translation.