视频聊天

青旅半醒 2023-07-17 15:45 32阅读 0赞

必须使用HTTPS协议

/* Wait for the page to load */
    $(function() {
        console.log("[DEMO] :: Rainbow Application started!");
    
        /**
         * 这里的applicationID和applicationSecret 你需要去阿尔卡特官网注册一个应用
         * 访问  https://hub.myopenrainbow.com.cn/#/dashboard/applications
         * 点击 Applications 创建一个应用 将创建好的applicationID和applicationSecret填写在下方
         */
        // china prod
        var applicationID = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
        var applicationSecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    
        /* Bootstrap the SDK */
        angular.bootstrap(document, ["sdk"]).get("rainbowSDK");
    
        /* Callback for handling the event 'RAINBOW_ONREADY' */
        /* 准备召唤彩虹 */
        var onReady = function onReady() {
            console.log("[DEMO] :: On SDK Ready !");
            console.log("[DEMO] :: SDK version " + rainbowSDK.version());
            // do something when the SDK is ready
            // 当SDK准备好的时候做点什么
            var myRainbowLogin = "xxxx@xx.com";         //用户的账号,也可以做好和自己的系统账号做映射     Replace by your login
            var myRainbowPassword = '123456@501';       //用户的登录密码    Replace by your password
            // 选项卡切换
            $("#tab li").click(function(){
                $(this).addClass("cur").siblings().removeClass("cur");
                var index = $(this).index();
                $("#boxwap .box").eq(index).addClass("active").siblings().removeClass("active");
            })
    
            // The SDK for Web is ready to be used, so you can sign in
            // Web的SDK已准备好使用，因此您可以登录
            rainbowSDK.connection.signinOnRainbowHosted(myRainbowLogin, myRainbowPassword, "myopenrainbow.com.cn")
            .then(function(account) {
                // Successfully signed to Rainbow and the SDK is started completely. Rainbow data can be retrieved.
                // 已成功登录彩虹，并且已完全启动SDK。彩虹数据可以被检索。
                console.log("[DEMO] :: Login success !");
    
                // setup mic and camera input devices
                // 设置麦克风和相机输入设备
                setupDevices();
    
                // make video call
                // 打视频电话
                makeVideoCall();
    
                // 获取历史消息 Get history message
                getHistoryMessageRecord(); 
    
                $("#send").click(function(){
                    // IM聊天
                    sendChatMessage(account.userData.displayName);
                })            
    
            })
            .catch(function(err) {
                  // An error occurs (e.g. bad credentials). Application could be informed that sign in has failed
                  console.log("[DEMO] :: Login failed !");
            });
        };
    
        /* Callback for handling the event 'RAINBOW_ONCONNECTIONSTATECHANGED' */
        /* 彩虹彩虹事件召唤 */
        var onLoaded = function onLoaded() {
            console.log("[DEMO] :: On SDK Loaded !");
    
            // Activate full SDK log
            // 激活完整的SDK日志
            rainbowSDK.setVerboseLog(true);
    
            rainbowSDK
                .initialize(applicationID, applicationSecret)
                .then(function() {
                    console.log("[DEMO] :: Rainbow SDK is initialized!");
                })
                .catch(function(err) {
                    console.log("[DEMO] :: Something went wrong with the SDK...", err);
                });
        };
    
        /* Listen to the SDK event RAINBOW_ONREADY */
        /* 收听SDK事件RAINBOW_ONREADY */
        $(document).on(rainbowSDK.RAINBOW_ONREADY, onReady);
    
        /* Listen to the SDK event RAINBOW_ONLOADED */
        /* 收听加载的SDK事件RAINBOW */
        $(document).on(rainbowSDK.RAINBOW_ONLOADED, onLoaded);
    
        /* 当webrtc调用的状态更改时，会触发此事件 */
        $(document).on(rainbowSDK.webRTC.RAINBOW_ONWEBRTCCALLSTATECHANGED, onWebRTCCallChanged);
        $(document).on(rainbowSDK.webRTC.RAINBOW_ONWEBRTCTRACKCHANGED, onWebRTCTrackChanged);
    
        /* 监听接收的文字信息 */
        // $(document).on(rainbowSDK.im.RAINBOW_ONNEWIMMESSAGERECEIVED, onNewMessageReceived);
        $(document).on(rainbowSDK.im.RAINBOW_ONNEWIMMESSAGERECEIVED, onNewMessageReceived);
    
    
        /* Load the SDK */
        /* 加载SDK */
        rainbowSDK.load();
    
        // 设置麦克风和相机输入设备
        function setupDevices() {
            /* Somewhere in your application... Ask the user to authorize the application to access to the media devices */
            /* 在你的申请中。。。要求用户授权应用程序访问媒体设备 */
            navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(function(stream) {
                /* Stream received which means that the user has authorized the application to access to the audio and video devices. Local stream can be stopped at this time */
                /* 接收到的流，这意味着用户已授权应用程序访问音频和视频设备。此时可以停止本地流 */
                stream.getTracks().forEach(function(track) {
                    track.stop();
                });
    
                /*  Get the list of available devices */
                /* 获取可用设备的列表 */
                navigator.mediaDevices.enumerateDevices().then(function(devices) {
                    /* Do something for each device (e.g. add it to a selector list) */
                    /* 为每个设备做点什么,如 将其添加到选择器列表中 */
                    var microphoneDevice = null;
                    var speaker = null;
                    var camera = null;
    
                    devices.forEach(function(device) {
                        switch (device.kind) {
                            case "audioinput":
                                // This is a device of type 'microphone'
                                // 这是“麦克风”类型的设备
                                console.log("[DEMO] :: microphone ID:" + device.deviceId + " label:" + device.label);
                                if(microphoneDevice == null)
                                    microphoneDevice = device;
    
                                break;
                            case "audiooutput":
                                // This is a device of type 'speaker'
                                // 这是一种“扬声器”类型的设备
                                console.log("[DEMO] :: speaker ID:" + device.deviceId + " label:" + device.label);
                                if(speaker == null)
                                    speaker = device;
    
                                break;
                            case "videoinput":
                                // This is a device of type 'camera'
                                // 这是“照相机”类型的设备
                                console.log("[DEMO] :: camera ID:" + device.deviceId + " label:" + device.label);
                                if(camera == null)
                                    camera = device;
                                break;
                            default:
                                break;
                        }
                    });
    
                    /* Select the microphone to use */
                    /* 选择要使用的麦克风 */
                    console.log("[DEMO] :: Set mic to " + microphoneDevice.deviceId + " " + microphoneDevice.label);
                    rainbowSDK.webRTC.useMicrophone(microphoneDevice.deviceId);
    
                    /* Select the speaker to use */
                    /* 选择要使用的扬声器 */
                    console.log("[DEMO] :: Set speaker to " + speaker.deviceId + " " + speaker.label);
                    rainbowSDK.webRTC.useSpeaker(speaker.deviceId);
    
                    /* Select the camera to use */
                    /* 选择要使用的相机 */
                    console.log("[DEMO] :: Set camera to " + camera.deviceId + " " + camera.label);
                    rainbowSDK.webRTC.useCamera(camera.deviceId);
                }).catch(function(error) {
                    /* In case of error when enumerating the devices */
                    /* 如果枚举设备时出错 */
                });
            }).catch(function(error) {
                /* In case of error when authorizing the application to access the media devices */
                /* 授权应用程序访问媒体设备时出错 */
            });
        };
    
        // make a video call
        // 打视频电话
        function makeVideoCall() {
            // find your remote party ID using Rainbow CLI tool on sandbox platform
            // 使用sandbox平台上的Rainbow CLI工具查找远程参与方ID
            var remotePartyID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';         // 对方的远程id
    
            // retrieve the remote party contact
            // 检索远程方联系人
            rainbowSDK.contacts.searchById(remotePartyID).then(function(entityFound) {
                if(entityFound) {
                    // Do something with the entity found
                    // 对找到的实体做些什么
                    console.log("[DEMO] :: Found remote party !");
    
                    // make a video call to selected remote party
                    // 对选定的远程方进行视频呼叫
                    callInVideo(entityFound);
                } else {
                    // No entity returned
                    // 未返回任何实体
                }
            }).catch(function(error) {
                /* In case of error when searching for contact */
                /* 如果在搜索联系人时出错 */
            });
        };
    
        function onWebRTCCallChanged(event) {
            console.log("[DEMO] :: onWebRTCCallChanged", event);
            let call = event.originalEvent.detail;
        
            /* Listen to WebRTC call state change */
            if (call.status.value === "incommingCall") {
                // You have an incoming call, do something about it:
                console.log("[DEMO] :: Incoming call");
        
                // Detect the type of incoming call
                if (call.remoteMedia === 3) {
                    // The incoming call is of type audio + video
                    rainbowSDK.webRTC.answerInVideo(call);
        
                    // Populate the #minivideo and #largevideo elements with the video streams
                    rainbowSDK.webRTC.showLocalVideo();
                    rainbowSDK.webRTC.showRemoteVideo(call);
                } else if (call.remoteMedia === 1) {
                    // The incoming call is of type audio
                    rainbowSDK.webRTC.answerInAudio(call);
                }
            } else if (call.status.value == "active") {
                // call is active, show local video stream
                console.log("[DEMO] :: onWebRTCCallChanged active");
                rainbowSDK.webRTC.showLocalVideo(call);
            }
    
            /* Listen to WebRTC call state change */
            /* 侦听WebRTC调用状态更改 */
            // if (call.status.value === "incommingCall") {
            //     // You have an incoming call, do something about it:
            //     // 你有一个来电，做点什么：
            //     console.log("[DEMO] :: Incoming call");
    
            //     // Detect the type of incoming call
            //     // 检测传入呼叫的类型
            //     if (call.remoteMedia === 3) {
            //         // The incoming call is of type audio + video
            //         // 来电类型为音频+视频
            //         rainbowSDK.webRTC.answerInVideo(call);
    
            //         // Populate the #minivideo and #largevideo elements with the video streams
            //         // 用视频流填充“minivideo”和“largevideo”元素
            //         rainbowSDK.webRTC.showLocalVideo();
            //         // 显示远程对方视频
            //         rainbowSDK.webRTC.showRemoteVideo(call);
            //     } else if (call.remoteMedia === 1) {
            //         // The incoming call is of type audio
            //         // 来电类型为音频
            //         rainbowSDK.webRTC.answerInAudio(call);
            //     }
            // } else if (call.status.value == "active") {
            //     // call is active, show local video stream
            //     // 呼叫处于活动状态，显示本地视频流
            //     rainbowSDK.webRTC.showLocalVideo(call);
            // }
        };
    
        // WebRTC tracks changed = video has been added or removed
        // WebRTC已经改变 = 已添加或删除视频
        var onWebRTCTrackChanged = function onWebRTCTrackChanged(event) {
            console.log("[DEMO] :: onWebRTCTrackChanged", event);
            let call = event.originalEvent.detail;
        
            // Manage remote video
            if (call.remoteMedia & call.Media.VIDEO) {
                rainbowSDK.webRTC.showRemoteVideo(call);
            } else {
                rainbowSDK.webRTC.hideRemoteVideo(call);
            }
            // Manage local video
            if (call.localMedia & call.Media.VIDEO) {
                rainbowSDK.webRTC.showLocalVideo(call);
            } else {
                rainbowSDK.webRTC.hideLocalVideo(call);
            }
    
            // // Manage remote video
            // // 管理远程视频
            // if (call.remoteMedia & call.Media.VIDEO) {
            //     // 显示与呼叫关联的远程视频 必须为true
            //     rainbowSDK.webRTC.showRemoteVideo(call);
            // } else {
            //     // 隐藏与呼叫关联的远程视频
            //     rainbowSDK.webRTC.hideRemoteVideo(call);
            // }
            // // Manage local video
            // // 管理本地视频
            // if (call.localMedia & call.Media.VIDEO) {
            //     // 显示本地视频（图片中的图片） 必须为true
            //     rainbowSDK.webRTC.showLocalVideo(call);
            // } else {
            //     // 隐藏本地视频（图片中的图片） 必须为true
            //     rainbowSDK.webRTC.hideLocalVideo(call);
            // }
        };
    
        function callInVideo(contact) {
            /* Call this API to call a contact using video */
            /* 调用此API以使用视频调用联系人 */
            var res = rainbowSDK.webRTC.callInVideo(contact);
            if(res.label === "OK") {
                /* Your call has been correctly initiated. Waiting for the other peer to answer */
                /* 您的呼叫已正确启动。等待对方回答 */
                console.log("[DEMO] :: call started !");
            } else {
                console.log("[DEMO] :: call failed ! ");
                console.dir(res);
            }
        };
    
    
        // send a chat message
        // 发送聊天信息
        function sendChatMessage(myName) {
            // find your remote party ID using Rainbow CLI tool on sandbox platform
            // 使用sandbox平台上的Rainbow CLI工具查找远程参与方ID
            var remotePartyID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
            
            /* 
            if remote party is in your contact list, you can use getContactByJID() or getContactById()
            else you can use searchContactByJid(), searchContactById() or searchContactByName().
    
            if you want to get your whole contact list, you can use getAll() and iterate through all the Contact objects
            */
            /**
                如果远程方在联系人列表中，则可以使用getContactByJID()或getContactById()
                否则可以使用searchContactByJid()、searchContactById()或searchContactByName()。
    
                如果要获取整个联系人列表，可以使用getAll()并遍历所有联系人对象
            */
    
            // retrieve the remote party contact by ID
            // 按ID检索远程方联系人
            rainbowSDK.contacts.searchById(remotePartyID).then(function (entityFound) {
                if (entityFound) {
                    // Do something with the entity found
                    // 对找到的实体做些什么
                    console.log("[DEMO] :: Found remote party !", entityFound);
                    // 建立连接
                    rainbowSDK.conversations.openConversationForContact(entityFound).then(function(conversation) {
                        // 发生信息
                        // rainbowSDK.im.sendMessageToConversation(conversation, "Hello World222222");
                        rainbowSDK.im.sendMessageToConversation(conversation, $("#sendInput").val());
                        var masg = $("#sendInput").val()
                        // 添加到窗口
                        $("#chatwap").append("<div class='chatitemright'><div class='message'><div class='username'>沈总</div><div class='messagecon'>"+masg+"</div></div><div class='headPortrait'><img src='2.png'></div></div>");
                        // $("#chatwap").append("<div class='chatitemright'><div class='message'><div class='username'>"+myName+"</div><div class='messagecon'>"+masg+"</div></div><div class='headPortrait'><img src='2.png'></div></div>");
                        $("#sendInput").val("")
    
                        $("#boxwap").scrollTop($("#chatwap").height());
                    }).catch(function(err) {
                        console.log("[DEMO] :: Error retrieving conversation");
                    });
                } else {
                    // No entity returned
                    // 未返回任何实体
                    console.log("[DEMO] :: No contact found")
                }
            }).catch(function (error) {
                /* In case of error when searching for contact */
                /* 如果在搜索联系人时出错
    
        */
                console.log("[DEMO] :: Error retrieving contact", error);
            });
        };
    
    
        // 获取历史消息记录 Get history message record
        function getHistoryMessageRecord(){
            var remotePartyID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
            rainbowSDK.contacts.searchById(remotePartyID).then(function (entityFound) {
                if (entityFound) {
                    // Do something with the entity found
                    // 对找到的实体做些什么
                    console.log("[DEMO] :: Found remote party !", entityFound);
                    // 建立连接
                    rainbowSDK.conversations.openConversationForContact(entityFound).then(function(conversation) {
                        // // 发生信息
                        // // rainbowSDK.im.sendMessageToConversation(conversation, "Hello World222222");
                        // rainbowSDK.im.sendMessageToConversation(conversation, $("#sendInput").val());
    
                        // 获取历史消息 Get history message
                        // getHistoryMessageRecord(conversation);
                            // var currentPage = 0;
                            rainbowSDK.im.getMessagesFromConversation(conversation, 30).then(function(resp) {
                                // The conversation object is updated with the messages retrieved from the server (same reference)
                                console.log("]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]")
                                console.log(resp)
                                console.log("]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]")
                                for(var i=0;i<resp.messages.length;i++){
                                    if(resp.messages[i].data.indexOf("GMT+0800")==-1){   
                                        if(resp.messages[i].side=="R"){ // 自己
                                            $("#chatwap").append("<div class='chatitemright'><div class='message'><div class='username'>沈总</div><div class='messagecon'>"+resp.messages[i].data+"</div></div><div class='headPortrait'><img src='2.png'></div></div>");
                                            // $("#chatwap").append("<div class='chatitemright'><div class='message'><div class='username'>"+resp.messages[i].from.name.value+"</div><div class='messagecon'>"+resp.messages[i].data+"</div></div><div class='headPortrait'><img src='2.png'></div></div>");
                                        }else if(resp.messages[i].side=="L"){ // 对方
                                            $("#chatwap").append("<div class='chatitemleft'><div class='headPortrait'><img src='1.png'></div><div class='message'><div class='username'>"+resp.messages[i].from.name.value+"</div><div class='messagecon'>"+resp.messages[i].data+"</div></div></div>");
                                        }
                                    }
                                }
                                console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
                                // Call a function to display the new messages received
                                // displayMessages(conversation, currentPage);
                                // Display something if there is possibly more messages on the server
                                if(!conversation.historyComplete) {
                                    // e.g. display a button to get more messages
                                }
                            })
                    }).catch(function(err) {
                        console.log("[DEMO] :: Error retrieving conversation");
                    });
                } else {
                    // No entity returned
                    // 未返回任何实体
                    console.log("[DEMO] :: No contact found")
                }
            }).catch(function (error) {
                /* In case of error when searching for contact */
                /* 如果在搜索联系人时出错
                */
                console.log("[DEMO] :: Error retrieving contact", error);
            });
        }
    
        // 获取新消息
        function onNewMessageReceived(event) {
            console.log("[DEMO] :: onNewMessageReceived", event);
            let msgObj = event.originalEvent.detail.message;
            let msg = msgObj.data;
            let fromContact = msgObj.from;
            $("#chatwap").append("<div class='chatitemleft'><div class='headPortrait'><img src='1.png'></div><div class='message'><div class='username'>"+fromContact.firstname+fromContact.lastname+"</div><div class='messagecon'>"+msg+"</div></div></div>");
            $("#boxwap").scrollTop($("#chatwap").height());
            console.log("--------------------------------------------------------------------------------------------------------------")
            console.log("[DEMO] :: new msg from " + fromContact.firstname + " " +fromContact.lastname + " " + msg);
        }
    });