SHINOBU KAWANO JavaScript / UX Design / Sencha Web Techinologies

Sencha Touch + WebRTC!

The last week, study meeting to learn about WebRTC was held at my office. WebRTC is a project or APIs for browser-based real-time communication, currently it is standardized by the W3C. If you want to know detail, please check the project site.

I tried some code that introduced by this study meeting, then I thought it’s a good idea to implement Sencha Touch custom component for webRTC. That’s why I made it.

Usage

Simply, if you want to output camera stream to the web page,

{
    xtype: 'webrtc'
}

That’s all. You open the page, then it shows the message to permit to use the device camera, please go ahead.

If it got the stream, display it to the web page.

If it cannot got it, shows error message.

if you want to effect stream,

{
    xtype    : 'webrtc',
    useEffect: true,
    effectFn : 'monochrome'
}

useEffect option changes the way of display, stream will be outputted by canvas (Normally, it use with video tag). effectFn option define function object or effect name which offered by component. If you define monochrome, it outputs the stream with monochrome effect.


Conclusion

Actually, the smart phone’s default browser is not support WebRTC.. Now, we can use WebRTC APIs on Chrome for Android (since 29), Firefox (since 24), Opera Mobile (since 21) only. My favorite browser Safari is not sure to support WebRTC. But, it is a great dream to communicate each web browser, I thought. I want to continue to maintain this component.

</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul>

</li> </ul></li> </ul>