Home > Developer > Web Develop
Based on SIMPLEWEBRTC fast implementation of the Web version of the multi-person text, video chat room.
1 Implementation MethodsCopy the following code, save as an HTML file
<! DOCTYPE html>
<script src="Https://code.jquery.com/jquery-1.9.1.js"></script><script src="Http://simplewebrtc.com/latest.js"></script><script>New SIMPLEWEBRTC ({The id/element DOM element that would hold "our" video' Localvideo ',The id/element DOM element that would hold the remote videos' Remotevideos ',Immediately ask for camera accesstrue,URL: ' http://111.172.238.250:8888 '' Wuhan '});We have to wait until it's readyWebrtc.on (' readytocall ', function () {You can name it anythingWebrtc.joinroom (' room1 ');Send a chat message$ (' #send '). Click (function () {var msg = $ (' #text '). Val ();Webrtc.sendtoall (' chat ', {message:msg, nick:webrtc.config.nick});$ (' #messages '). Append ('<br>You:<br>'\ n ');$ (' #text '). Val (');});});For Text Chat------------------------------------------------------------------Await Messages from othersWebrtc.connection.on (' message ', function (data) {if ' chat ') {Console.log (' chat received ', data);$ (' #messages '). Append ('<br>':<br>'\ n ');}});</script><style>#remoteVideos Video {height:150px;}#localVideo {height:150px;}</style><body><textarea id="Messages" rows="5" cols="></textarea><br/>"<input id="text" type="text "/><input id="send" type="button"value="send" /><br/><video id="Localvideo"></video><div id="Remotevideos"></div></body>Modify the inside of the nick: ' Wuhan ' for their own name, with Firefox or Chrome open, you can start testing.
2 effectsThe interface is simple, the above is sending and receiving messages, the following is a local and remote video map:
Crazy kiss It Source: http://fengwenit.cnblogs.com
3 principleA brief introduction to the next SIMPLEWEBRTC, which is a package class library of WEBRTC.
The purpose of WEBRTC is to simplify the development effort of browser-based real-time data communication, but the practical application of programming is somewhat complex, especially when calling Rtcpeerconnection must have a deeper understanding of how to establish a connection, the process of exchanging signaling, and the details. As a result, we have developed the WEBRTC package library for us, encapsulating the call details of WEBRTC and wrapping it into a simpler API, making it easier to develop applications. Another purpose of the encapsulation Library is to block differences between different browsers, such as the API names mentioned above. Of course, these libraries are open source, can be based on their own need to change again.
Now found on the internet there are two kinds of WebRTC package library, one is Webrtc.io, the URL is https://github.com/webRTC/ Webrtc.io, there are specific instructions and usage, there are very many demo use it, and another is SIMPLEWEBRTC, the URL is Https://github.com/HenrikJoreteg/SimpleWebRTC, It seems to be easier to use than Webrtc.io.
3.1 Video ChatThis is the official first demo, three steps to create a video chat:
3.1.1 HTML page<! DOCTYPE html><script src="//simplewebrtc.com/latest.js"<body><video height= "id="localvideo"></video><div id="Remotesvideos"></div></body>3.1.2 Creating a Web RTC ObjectNew SIMPLEWEBRTC ({The id/element DOM element that would hold "our" video' Localvideo ',The id/element DOM element that would hold the remote videos' Remotesvideos ',Immediately ask for camera accessTrue3.1.3 Into the room});We have to wait until it's readyWebrtc.on (' readytocall ', function () {You can name it anythingWebrtc.joinroom (' Wuhan ');3.2 Text Chat});This is the most basic function, but the official document is not actually introduced, very strange.
3.2.1 HTML Content<textarea id="Messages" rows="5" cols="></textarea><br/>"<input id="text" type="text "/>3.2.2 Send a message<input id="send" type="button"value="send" /><br/>Send a chat message$ (' #send '). Click (function () {var msg = $ (' #text '). Val ();Webrtc.sendtoall (' chat ', {message:msg, nick:webrtc.config.nick});$ (' #messages '). Append ('<br>You:<br>'\ n ');$ (' #text '). Val (');3.3.3 Receiving Messages});Await Messages from othersWebrtc.connection.on (' message ', function (data) {if ' chat ') {Console.log (' chat received ', data);$ (' #messages '). Append ('<br>':<br>'\ n ');}});3 minutes to achieve the Web version of multi-person text, video chat room (including full source)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
